From 550fcb21b7be965459043ca0287ac1b593b07a94 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Mon, 22 Apr 2024 08:45:33 -0500
Subject: [PATCH] updated nav menu funtionality

---
 awwwards_ss4/src/components/Home.jsx    |  2 ++
 awwwards_ss4/src/components/NavMenu.jsx | 29 +++++++++++++++++++++++++
 awwwards_ss4/src/index.css              |  3 +++
 3 files changed, 34 insertions(+)
 create mode 100644 awwwards_ss4/src/components/NavMenu.jsx

diff --git a/awwwards_ss4/src/components/Home.jsx b/awwwards_ss4/src/components/Home.jsx
index c61ba66..3a65868 100644
--- a/awwwards_ss4/src/components/Home.jsx
+++ b/awwwards_ss4/src/components/Home.jsx
@@ -12,6 +12,7 @@ import Img3 from "../assets/bg-3.webp"
 import { useState } from "react";
 import NavBag from "./NavBag";
 import NavSearch from "./NavSearch";
+import NavMenu from "./NavMenu";
 
 
 const Home = () => {
@@ -76,6 +77,7 @@ const Home = () => {
         <AnimatePresence mode="wait">
           {isActiveBag && <NavBag/>}
           {isActiveSearch && <NavSearch/>}
+          {isActive && <NavMenu/>}
         </AnimatePresence>
       </div>
       <Slider {...homeSlide}>
diff --git a/awwwards_ss4/src/components/NavMenu.jsx b/awwwards_ss4/src/components/NavMenu.jsx
new file mode 100644
index 0000000..21acf0c
--- /dev/null
+++ b/awwwards_ss4/src/components/NavMenu.jsx
@@ -0,0 +1,29 @@
+
+
+const NavMenu = () => {
+  return (
+    <div className='overflow-hidden bg-[#FBF8F4] absolute w-[90.5vw] h-[50vh] rounded-b-3xl -z-10 px-4'>
+        <div className='mt-40 grid grid-cols-2'>
+            <div className='px-2 flex flex-col'>
+                <a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Best sellers<span className="text-xs">21</span></a>
+                <a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Latest<span className="text-xs">01</span></a>
+                <a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">All<span className="text-xs">21</span></a>
+            </div>
+            <div className='px-2 flex flex-col'>
+                <a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Face<span className="text-xs">04</span></a>
+                <a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Body<span className="text-xs">04</span></a>
+                <a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Kits<span className="text-xs">20</span></a>
+                <a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Tools<span className="text-xs">05</span></a>
+            </div>
+        </div>
+        <div className="border border-dashed border-black mt-4 mb-4 mx-2"></div>
+        <div className='px-2 flex flex-col'>
+            <a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Ethos</a>
+            <a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">Apothecary</a>
+            <a href="" className="flex gap-1 sm:gap-2 uppercase text-lg sm:text-xl mb-2">journal</a>
+        </div>
+    </div>
+  )
+}
+
+export default NavMenu
\ No newline at end of file
diff --git a/awwwards_ss4/src/index.css b/awwwards_ss4/src/index.css
index 5eaa77f..bcfecfd 100644
--- a/awwwards_ss4/src/index.css
+++ b/awwwards_ss4/src/index.css
@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+html{
+    overflow-x: hidden;
+}
 body{
     font-family: "Space Mono", monospace;
 }