feat: mobile-header

zuplo · Nov 30, 2023 · 299d488 · 299d488
1 parent a6e93ad
commit 299d488
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 21 deletions.
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -32,15 +32,15 @@ function Header() {
         "!dark:bg-black": scrollY > 10,
       })}
     >
-      <div className="mx-auto box-content flex min-h-[52px] w-full max-w-[1180px] items-center justify-between py-2 lg:py-5">
-        <div className="mr-6 flex lg:hidden">
+      <div className="mx-auto flex min-h-[52px] w-full max-w-[1180px] items-center justify-between px-4 py-2 lg:box-content lg:px-0 lg:py-5">
+        <div className="flex p-3 lg:hidden">
           <MobileNavigation />
         </div>
         <div className="relative flex basis-0 items-center">
-          <Logo className="ml-4 block w-28 lg:ml-0 lg:w-36" />
+          <Logo className="block w-28 lg:w-36" />
         </div>
-        <div className="flex flex-grow justify-center">
-          <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
+        <div className="flex flex-grow justify-end lg:justify-center">
+          <div className="">
             <Search />
           </div>
         </div>

diff --git a/src/components/MobileNavigation.tsx b/src/components/MobileNavigation.tsx
@@ -4,25 +4,11 @@ import { Dialog } from "@headlessui/react";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useState } from "react";
+import { Bars3Icon as MenuIcon } from "@heroicons/react/24/outline";
 
 import Logo from "@/components/Logo";
 import { Navigation } from "@/components/Navigation";
 
-function MenuIcon(props: React.ComponentPropsWithoutRef<"svg">) {
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 24 24"
-      fill="none"
-      strokeWidth="2"
-      strokeLinecap="round"
-      {...props}
-    >
-      <path d="M4 7h16M4 12h16M4 17h16" />
-    </svg>
-  );
-}
-
 function CloseIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
     <svg
@@ -71,7 +57,10 @@ export function MobileNavigation() {
         className="relative"
         aria-label="Open navigation"
       >
-        <MenuIcon className="h-6 w-6 stroke-slate-500" />
+        <MenuIcon
+          className="block h-6 w-6 stroke-gray-600"
+          aria-hidden="true"
+        />
       </button>
       <Suspense fallback={null}>
         <CloseOnNavigation close={close} />