From 090a0a041acb2be7aa26136175b5adf96d426be0 Mon Sep 17 00:00:00 2001
From: Minjee Son <104430030+iammminzzy@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:32:13 +0100
Subject: [PATCH] Add categories menu

---
 app/error.tsx                      |  3 +-
 app/page.tsx                       |  4 +-
 components/layout/navbar/index.tsx | 95 ++++++++++++++++++++++++++----
 tailwind.config.js                 |  3 +-
 4 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/app/error.tsx b/app/error.tsx
index f36ec80d7..7a95af8a7 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -5,9 +5,8 @@ import { useRouter } from 'next/navigation';
 export default function Error({ resetAction }: { resetAction?: () => void }) {
   const router = useRouter();
 
-  // '/'로 이동하는 defaultReset 함수
   const defaultReset = () => {
-    router.push('/'); // 메인 페이지로 이동
+    router.push('/');
   };
 
   return (
diff --git a/app/page.tsx b/app/page.tsx
index 1de1ed24c..8f98f80c2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -24,7 +24,7 @@ export default async function HomePage() {
     <>
       <section className="relative">
         <Navbar />
-        <div className={'relative h-screen w-screen'}>
+        <div className="relative h-screen w-screen">
           <Image
             src={
               products[0].featuredImage.url || '' //Todo: default image
@@ -39,7 +39,7 @@ export default async function HomePage() {
         <div className="absolute bottom-20 flex w-full flex-col items-center text-lightText">
           <h1 className="text-xl">{products[0].title}</h1>
           <span className="mb-6 mt-1 text-sm text-lightText/80">Read more</span>
-          <div className={`text-mainBG flex w-[384px] justify-center gap-[10px]`}>
+          <div className="flex w-[384px] justify-center gap-[10px] text-mainBG">
             <PriceBox title="Box of 20" price={2460} />
             <PriceBox title="Single Cigar" price={120} />
           </div>
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index 20ebc0bd4..34ff5ba00 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -1,5 +1,4 @@
-import Link from 'next/link';
-import { Suspense } from 'react';
+'use client';
 
 import {
   Bars3Icon,
@@ -8,23 +7,37 @@ import {
   UserIcon
 } from '@heroicons/react/24/outline';
 import Logo from 'components/icons/logo';
-import { SearchSkeleton } from './search';
+import { LiHTMLAttributes, useState } from 'react';
+
+interface MenuListItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  type: 'main' | 'sub';
+}
+
+function MenuListItem({ type, children }: MenuListItemProps) {
+  return (
+    <>
+      {type === 'main' ? (
+        <li className="hover:bg-menuHover/15 px-[10px] py-[15px] hover:rounded-md">{children}</li>
+      ) : (
+        <li className="p-[10px]">{children}</li>
+      )}
+    </>
+  );
+}
+
+export function Navbar() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-export async function Navbar() {
   return (
     <nav className="absolute left-0 top-0 z-10 flex w-full items-center px-[4.38rem] py-[3.12rem]">
       <div className="flex w-full items-center justify-between">
         {/* burger menu */}
-        <div className="block flex-none">
+        <button onClick={() => setIsMenuOpen(true)}>
           <Bars3Icon width={24} height={24} color="white" />
-        </div>
+        </button>
         {/* logo */}
-        <div className="justify-center md:flex md:w-1/3">
-          <Suspense fallback={<SearchSkeleton />}>
-            <Link href="/" prefetch={true}>
-              <Logo />
-            </Link>
-          </Suspense>
+        <div className="z-10 justify-center md:flex md:w-1/3">
+          <Logo />
         </div>
         {/* 3 icons */}
         <div className="flex justify-between gap-[1.88rem]">
@@ -33,6 +46,64 @@ export async function Navbar() {
           <ShoppingBagIcon width={16} height={16} fill="white" color="white" />
         </div>
       </div>
+      {/* Categories menu */}
+      {isMenuOpen && (
+        <div className="absolute left-0 top-0 h-screen w-full bg-black/75 text-white">
+          <div className="flex h-full flex-col items-center justify-start pt-[190px]">
+            <div className="grid w-3/4 grid-cols-4 gap-8 text-left text-lightText">
+              <ul>
+                <MenuListItem type="main">All Brands</MenuListItem>
+                <MenuListItem type="main">Special Offers</MenuListItem>
+                <MenuListItem type="main">Collectors</MenuListItem>
+                <MenuListItem type="main">MenuListItemmited Edition</MenuListItem>
+                <MenuListItem type="main">Regional Edition</MenuListItem>
+                <MenuListItem type="main">Vintage</MenuListItem>
+                <MenuListItem type="main">Accessories</MenuListItem>
+              </ul>
+
+              <ul>
+                <MenuListItem type="sub">Bolivar</MenuListItem>
+                <MenuListItem type="sub">Cohiba</MenuListItem>
+                <MenuListItem type="sub">Cuaba</MenuListItem>
+                <MenuListItem type="sub">El Rey Del Mundo</MenuListItem>
+                <MenuListItem type="sub">Juan Lopez</MenuListItem>
+                <MenuListItem type="sub">H. Upmann</MenuListItem>
+                <MenuListItem type="sub">Hoyo De Monterrey</MenuListItem>
+                <MenuListItem type="sub">La Flor De Cano</MenuListItem>
+                <MenuListItem type="sub">La Gloria Cubana</MenuListItem>
+                <MenuListItem type="sub">Montecristo</MenuListItem>
+                <MenuListItem type="sub">Partagas</MenuListItem>
+              </ul>
+              <ul>
+                <MenuListItem type="sub">Bolivar</MenuListItem>
+                <MenuListItem type="sub">Cohiba</MenuListItem>
+                <MenuListItem type="sub">Cuaba</MenuListItem>
+                <MenuListItem type="sub">El Rey Del Mundo</MenuListItem>
+                <MenuListItem type="sub">Juan Lopez</MenuListItem>
+                <MenuListItem type="sub">H. Upmann</MenuListItem>
+                <MenuListItem type="sub">Hoyo De Monterrey</MenuListItem>
+                <MenuListItem type="sub">La Flor De Cano</MenuListItem>
+                <MenuListItem type="sub">La Gloria Cubana</MenuListItem>
+                <MenuListItem type="sub">Montecristo</MenuListItem>
+                <MenuListItem type="sub">Partagas</MenuListItem>
+              </ul>
+              <ul>
+                <MenuListItem type="sub">Bolivar</MenuListItem>
+                <MenuListItem type="sub">Cohiba</MenuListItem>
+                <MenuListItem type="sub">Cuaba</MenuListItem>
+                <MenuListItem type="sub">El Rey Del Mundo</MenuListItem>
+                <MenuListItem type="sub">Juan Lopez</MenuListItem>
+                <MenuListItem type="sub">H. Upmann</MenuListItem>
+                <MenuListItem type="sub">Hoyo De Monterrey</MenuListItem>
+                <MenuListItem type="sub">La Flor De Cano</MenuListItem>
+                <MenuListItem type="sub">La Gloria Cubana</MenuListItem>
+                <MenuListItem type="sub">Montecristo</MenuListItem>
+                <MenuListItem type="sub">Partagas</MenuListItem>
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
     </nav>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index dfb6495a7..d3581ac1f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,8 @@ module.exports = {
       },
       colors: {
         lightText: '#FFF2DB',
-        mainBG: '#F8E8D1'
+        mainBG: '#F8E8D1',
+        menuHover: '#C6BAA7'
       },
       keyframes: {
         fadeIn: {