From aa5baa0042e9345b2dd14651ab23f911b4a0c893 Mon Sep 17 00:00:00 2001
From: Vixs101 <elijahvix695@gmail.com>
Date: Tue, 15 Oct 2024 12:39:04 +0100
Subject: [PATCH] feature:edited the page-header to serve as a navbar for
 mobile screen

---
 src/components/page-header.tsx |  7 +++++--
 src/components/shared/logo.tsx | 10 ++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx
index e089e36..d06343f 100644
--- 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
index a054ca0..72f376d 100644
--- 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>
   );