From f0caaf1ad0dacaa0ccbe08bc625a9da74b8d32d8 Mon Sep 17 00:00:00 2001
From: ImAlpha <arcticjcb@gmail.com>
Date: Thu, 9 Nov 2023 16:26:28 -0800
Subject: [PATCH] navbar change

---
 .../app/components/NavBar/NavBar.tsx          | 118 ++++++++++++------
 Websites/jefes-nextjs/tailwind.config.ts      |  13 +-
 2 files changed, 90 insertions(+), 41 deletions(-)

diff --git a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
index c44442e..91d95f8 100644
--- a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
+++ b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
@@ -4,15 +4,24 @@ import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
 import classnames from "classnames";
-import { GiHamburgerMenu } from "react-icons/gi";
-import { MdOutlineRestaurantMenu } from "react-icons/md";
 import Reserve from "./reserveButton";
 import "./NavBar.css";
+import { GiHamburgerMenu } from "react-icons/gi";
+import {
+  AiOutlineInstagram,
+  AiOutlineFacebook,
+  AiOutlineTwitter,
+} from "react-icons/ai";
+import { FaTiktok } from "react-icons/fa";
 
 const NavBar = () => {
   const currentPath = usePathname();
   console.log(currentPath);
-  const [toggle_menu, set_toggle_menu] = useState(false);
+  const [menu_open, set_menu_open] = useState(false);
+
+  const handleNav = () => {
+    set_menu_open(!menu_open);
+  };
 
   // Create an array to hold the list items
   const links = [
@@ -114,38 +123,77 @@ const NavBar = () => {
           />
         </div>
       </div>
-      <div className="block md:hidden">
-        <GiHamburgerMenu
-          className="text-accent text-4xl space-x-2 absolute top-3 right-3"
-          onClick={() => set_toggle_menu(true)}
-        />
-        {toggle_menu && (
-          <div className="navbar_small_screen_overlay flex_center slide_bottom">
-            <MdOutlineRestaurantMenu
-              fontSize={27}
-              className="text-accent absolute top-3 right-3 text-4xl"
-              onClick={() => set_toggle_menu(false)}
-            />
-            <ul className="flex flex-col text-2xl col-auto gap-4 grid-cols-1 table-auto absolute">
-              {links.map((link) => (
-                <Link
-                  key={link.href}
-                  // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
-                  // replace with classnames object instead
-                  className={classnames({
-                    "border-b border-jefesRed text-accent":
-                      link.href === currentPath,
-                    "text-accent": link.href !== currentPath,
-                    // "hover:text-jefesRed": true,
-                  })}
-                  href={link.href}
-                >
-                  {link.label}
-                </Link>
-              ))}
-            </ul>
-          </div>
-        )}
+      <div className={menu_open ? "hidden" : ""}>
+        {" "}
+        <div
+          onClick={handleNav}
+          className="md:hidden cursor-pointer pl-24 text-white top-3 right-3 absolute"
+        >
+          <GiHamburgerMenu size={25} />
+        </div>
+      </div>
+
+      <div className={menu_open ? "" : "hidden"}>
+        <div
+          onClick={handleNav}
+          className="md:hidden cursor-pointer top-3 right-3 absolute z-20 ease-in duration-500"
+        >
+          <Image src="/fork.svg" width={20} height={20} alt="fork" />
+        </div>
+      </div>
+
+      <div
+        className={
+          menu_open
+            ? "fixed right-0 top-0 w-[65%] sm:hidden h-screen bg-[#18191a] p-10 ease-in duration-300 z-10"
+            : "fixed right-[-100%] top-0 p-10 ease-in duration-500"
+        }
+      >
+        <div className="flex flex-col py-32 w-full items-center justify-center">
+          <ul className="hover:cursor-pointer flex flex-col gap-8 items-center justify-center">
+            {links.map((link) => (
+              <Link
+                key={link.href}
+                // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
+                // replace with classnames object instead
+                onClick={() => set_menu_open(false)}
+                className={classnames({
+                  "border-b-2 border-white text-red-700":
+                    link.href === currentPath,
+                  "text-red-700": link.href !== currentPath,
+                  "hover:text-red-700": true,
+                })}
+                href={link.href}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </ul>
+          <ul className="hover:cursor-pointer flex flex-col gap-8 items-center justify-center py-8">
+            {links2.map((link) => (
+              <Link
+                key={link.href}
+                // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
+                // replace with classnames object instead
+                onClick={() => set_menu_open(false)}
+                className={classnames({
+                  "border-b-2 border-white text-red-700":
+                    link.href === currentPath,
+                  "text-red-700": link.href !== currentPath,
+                  "hover:text-red-700": true,
+                })}
+                href={link.href}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </ul>
+        </div>
+        <div className="flex flex-row justify-around  items-center text-red-800">
+          <FaTiktok size={30} className="cursor-pointer" />
+          <AiOutlineInstagram size={30} className="cursor-pointer" />
+          <AiOutlineFacebook size={30} className="cursor-pointer" />
+        </div>
       </div>
     </nav>
   );
diff --git a/Websites/jefes-nextjs/tailwind.config.ts b/Websites/jefes-nextjs/tailwind.config.ts
index 0377ea1..52b43b8 100644
--- a/Websites/jefes-nextjs/tailwind.config.ts
+++ b/Websites/jefes-nextjs/tailwind.config.ts
@@ -2,11 +2,11 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
   theme: {
     container: {
       center: true,
@@ -22,6 +22,7 @@ module.exports = {
         ring: "hsl(var(--ring))",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+        jefesRed: "#B3121E",
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
@@ -73,4 +74,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
\ No newline at end of file
+};