fixing issue with header

webdevcody · Feb 2, 2024 · 4d1c967 · 4d1c967
1 parent ec9361d
commit 4d1c967
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 20 deletions.
diff --git a/src/app/header.tsx b/src/app/header.tsx
@@ -4,7 +4,7 @@ import { SignInButton, UserButton } from "@clerk/nextjs";
 import { ModeToggle } from "./mode-toggle";
 import Link from "next/link";
 import { useSession } from "@/lib/utils";
-import MobileNav, { useMobileNavState } from "./mobile-nav";
+import MobileNav, { MenuToggle, useMobileNavState } from "./mobile-nav";
 import Image from "next/image";
 
 export function Header() {
@@ -15,22 +15,23 @@ export function Header() {
   return (
     <div className="border-b dark:bg-gray-900">
       <div className="h-16 container flex justify-between items-center">
-        <Link href="/" className="flex gap-2 items-center">
+        <Link
+          href="/"
+          className="flex gap-2 items-center relative flex-shrink-0"
+        >
           <Image
             className="rounded"
             src="/hero.jpeg"
+            alt="logo"
             width="40"
             height="40"
-            alt="logo"
           />
-          <span className="hidden sm:block text-xs md:text-md">
-            ThumbnailCritique
-          </span>
+          <span className="text-xs md:text-md">ThumbnailCritique</span>
         </Link>
 
         <MobileNav isOpen={isOpen} toggleOpen={toggleOpen} />
 
-        <div className="gap-4 md:gap-8 hidden sm:flex text-xs md:text-base">
+        <div className="gap-4 hidden sm:flex md:gap-8 text-xs md:text-base">
           {!isLoading && (
             <>
               {isAuthenticated && (
@@ -68,6 +69,8 @@ export function Header() {
             </>
           )}
           <ModeToggle />
+
+          <MenuToggle toggle={toggleOpen} />
         </div>
       </div>
     </div>

diff --git a/src/app/mobile-nav.tsx b/src/app/mobile-nav.tsx
@@ -125,7 +125,6 @@ export default function MobileNav({
             </MenuItem>
           </div>
         </motion.ul>
-        <MenuToggle toggle={toggleOpen} />
       </motion.nav>
     </>
   );
@@ -145,25 +144,15 @@ const useDimensions = (ref: any) => {
   return dimensions.current;
 };
 
-const MenuToggle = ({ toggle }: { toggle: any }) => (
+export const MenuToggle = ({ toggle }: { toggle: any }) => (
   <button
     onClick={toggle}
-    className="pointer-events-auto flex z-50 dark:text-white text-black mr-3"
+    className="sm:hidden pointer-events-auto flex z-50 dark:text-white text-black mr-3"
   >
     <MenuIcon />
   </button>
 );
 
-const Path = (props: any) => (
-  <motion.path
-    fill="transparent"
-    strokeWidth="2"
-    stroke="hsl(0, 0%, 18%)"
-    strokeLinecap="round"
-    {...props}
-  />
-);
-
 const MenuItem = ({
   className,
   children,