feat: swap logo and integrate with shopify navigation

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/icons/logo.tsx

@@ -4,13 +4,23 @@ export default function LogoIcon(props: React.ComponentProps<'svg'>) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 73 76"
       aria-label={`${process.env.SITE_NAME} logo`}
-      viewBox="0 0 32 28"
       {...props}
       className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
     >
-      <path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
+      <path
-      <path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" />
+        d="M0 50.0762L25.3734 38.7832L39.9779 47.253L42.9283 75.0399L24.9309 74.8909L27.5862 55.5739L24.4883 53.7909L9.2937 65.6789L0 50.0762Z"
+        fill="#17E4BB"
+      />
+      <path
+        d="M41.6014 46.0633L64.0248 62.5569L72.8758 46.6577L54.8778 39.3766V35.8104L72.8758 28.3807L64.0248 12.6298L41.6014 29.1237V46.0633Z"
+        fill="#17E4BB"
+      />
+      <path
+        d="M39.9779 27.7869L42.9283 0L24.9309 0.2971L27.5862 19.6143L24.4883 21.3974L9.1462 9.5099L0 24.9636L25.3734 36.2567L39.9779 27.7869Z"
+        fill="#17E4BB"
+      />
     </svg>
   );
 }

components/layout/footer.tsx

@@ -18,8 +18,8 @@ export default async function Footer() {
     <footer className="text-sm text-neutral-500 dark:text-neutral-400">
       <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700">
         <div>
-          <Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
+          <Link className="flex items-center text-black md:pt-1 dark:text-white" href="/">
-            <LogoSquare size="sm" />
+            <LogoSquare />
             <span className="uppercase">{SITE_NAME}</span>
           </Link>
         </div>

components/layout/navbar/index.tsx

@@ -10,7 +10,7 @@ import Search, { SearchSkeleton } from './search';
 const { SITE_NAME } = process.env;
 
 export default async function Navbar() {
-  const menu = await getMenu('next-js-frontend-header-menu');
+  const menu = await getMenu('main-menu');
 
   return (
     <nav className="relative flex items-center justify-between p-4 lg:px-6">
@@ -19,39 +19,47 @@ export default async function Navbar() {
           <MobileMenu menu={menu} />
         </Suspense>
       </div>
-      <div className="flex w-full items-center">
+      <div className="flex w-full flex-col">
-        <div className="flex w-full md:w-1/3">
+        <div className="flex w-full items-center">
-          <Link href="/" className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6">
+          <div className="flex w-full md:w-1/3">
-            <LogoSquare />
+            <Link
-            <div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
+              href="/"
-              {SITE_NAME}
+              className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
-            </div>
+            >
-          </Link>
+              <LogoSquare />
-          {menu.length ? (
+              <div className="flex-none text-sm font-medium uppercase md:hidden lg:block">
-            <ul className="hidden gap-6 text-sm md:flex md:items-center">
+                {SITE_NAME}
+              </div>
+            </Link>
+          </div>
+          <div className="hidden justify-center md:flex md:w-1/3">
+            <Suspense fallback={<SearchSkeleton />}>
+              <Search />
+            </Suspense>
+          </div>
+          <div className="flex justify-end md:w-1/3">
+            <Suspense fallback={<OpenCart />}>
+              <Cart />
+            </Suspense>
+          </div>
+        </div>
+
+        {menu.length ? (
+          <div className="hidden w-full items-center justify-center border-b py-3 md:flex">
+            <ul className="hidden gap-7 text-sm md:flex md:items-center">
               {menu.map((item: Menu) => (
                 <li key={item.title}>
                   <Link
                     href={item.path}
-                    className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
+                    className="text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-neutral-300"
                   >
                     {item.title}
                   </Link>
                 </li>
               ))}
             </ul>
-          ) : null}
+          </div>
-        </div>
+        ) : null}
-        <div className="hidden justify-center md:flex md:w-1/3">
-          <Suspense fallback={<SearchSkeleton />}>
-            <Search />
-          </Suspense>
-        </div>
-        <div className="flex justify-end md:w-1/3">
-          <Suspense fallback={<OpenCart />}>
-            <Cart />
-          </Suspense>
-        </div>
       </div>
     </nav>
   );

components/logo-square.tsx

@@ -1,23 +1,10 @@
 import clsx from 'clsx';
 import LogoIcon from './icons/logo';
 
-export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
+export default function LogoSquare() {
   return (
-    <div
+    <div className={clsx('flex h-[40px] w-[40px] flex-none items-center justify-center')}>
-      className={clsx(
+      <LogoIcon className="h-[16px] w-[16px]" />
-        'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
-        {
-          'h-[40px] w-[40px] rounded-xl': !size,
-          'h-[30px] w-[30px] rounded-lg': size === 'sm'
-        }
-      )}
-    >
-      <LogoIcon
-        className={clsx({
-          'h-[16px] w-[16px]': !size,
-          'h-[10px] w-[10px]': size === 'sm'
-        })}
-      />
     </div>
   );
 }