navbar change

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">
+      <div className={menu_open ? "hidden" : ""}>
-        <GiHamburgerMenu
+        {" "}
-          className="text-accent text-4xl space-x-2 absolute top-3 right-3"
+        <div
-          onClick={() => set_toggle_menu(true)}
+          onClick={handleNav}
-        />
+          className="md:hidden cursor-pointer pl-24 text-white top-3 right-3 absolute"
-        {toggle_menu && (
+        >
-          <div className="navbar_small_screen_overlay flex_center slide_bottom">
+          <GiHamburgerMenu size={25} />
-            <MdOutlineRestaurantMenu
+        </div>
-              fontSize={27}
+      </div>
-              className="text-accent absolute top-3 right-3 text-4xl"
+
-              onClick={() => set_toggle_menu(false)}
+      <div className={menu_open ? "" : "hidden"}>
-            />
+        <div
-            <ul className="flex flex-col text-2xl col-auto gap-4 grid-cols-1 table-auto absolute">
+          onClick={handleNav}
-              {links.map((link) => (
+          className="md:hidden cursor-pointer top-3 right-3 absolute z-20 ease-in duration-500"
-                <Link
+        >
-                  key={link.href}
+          <Image src="/fork.svg" width={20} height={20} alt="fork" />
-                  // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
+        </div>
-                  // replace with classnames object instead
+      </div>
-                  className={classnames({
+
-                    "border-b border-jefesRed text-accent":
+      <div
-                      link.href === currentPath,
+        className={
-                    "text-accent": link.href !== currentPath,
+          menu_open
-                    // "hover:text-jefesRed": true,
+            ? "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"
-                  href={link.href}
+        }
-                >
+      >
-                  {link.label}
+        <div className="flex flex-col py-32 w-full items-center justify-center">
-                </Link>
+          <ul className="hover:cursor-pointer flex flex-col gap-8 items-center justify-center">
-              ))}
+            {links.map((link) => (
-            </ul>
+              <Link
-          </div>
+                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>
   );

Websites/jefes-nextjs/tailwind.config.ts

@@ -2,11 +2,11 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
+    "./pages/**/*.{ts,tsx}",
-    './components/**/*.{ts,tsx}',
+    "./components/**/*.{ts,tsx}",
-    './app/**/*.{ts,tsx}',
+    "./app/**/*.{ts,tsx}",
-    './src/**/*.{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")],
-}
+};