feature:edited the page-header to serve as a navbar for mobile screen

harshmangalam · Oct 15, 2024 · aa5baa0 · aa5baa0
1 parent 252eb8e
commit aa5baa0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx
@@ -1,5 +1,6 @@
 import { Slot, component$ } from "@builder.io/qwik";
 import { Link } from "@builder.io/qwik-city";
+import { Logo } from "../components/shared/logo";
 import { ArrowLeftIcon } from "~/icons/arrow";
 import { ThemesDialog } from "./shared/themes-dialog";
 import { useCurrentUser } from "~/routes/(app)/layout";
@@ -24,7 +25,7 @@ export const PageHeader = component$((props: Props) => {
 
   const currentUser = useCurrentUser();
   return (
-    <nav class="sticky top-0 h-10 z-10 backdrop-blur navbar bg-base-100/70">
+    <nav class="sticky top-0 h-10 z-10 backdrop-blur navbar bg-base-100/70 border-b-2 border-b-gray-600">
       <div class="navbar-start">
         <div class="flex items-center gap-3">
           {showBackArrow && (
@@ -38,7 +39,9 @@ export const PageHeader = component$((props: Props) => {
           </div>
         </div>
       </div>
-
+      <div>
+        <Logo height="h-10" width="w-10"/>
+      </div>
       <div class="navbar-end">
         {links.map(({ href, name, icon }) => (
           <Link

diff --git a/src/components/shared/logo.tsx b/src/components/shared/logo.tsx
@@ -2,9 +2,15 @@ import { component$ } from "@builder.io/qwik";
 import { Link } from "@builder.io/qwik-city";
 import { LogoIcon } from "~/icons/logo";
 
-export const Logo = component$(() => {
+type LogoProps = {
+  className?: string;
+  height?: string;
+  width?: string;
+}
+
+export const Logo = component$(({ className = "", height = "h-14", width = "w-14"}: LogoProps) => {
   return (
-    <Link class="w-14 h-14 p-0 rounded-full btn btn-ghost" href="/">
+    <Link class={`p-0 rounded-full btn btn-ghost ${className} ${height} ${width}`} href="/">
       <LogoIcon />
     </Link>
   );