fixed nav and scrolling nav

Websites/jefes-nextjs/app/components/NavBar/NavBar.css

@@ -9,7 +9,7 @@
 }
 
 .active {
-  background: green;
+
   position: fixed;
   width: 100%;
   justify-content: space-around;

Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx

@@ -12,6 +12,9 @@ import { FaTiktok } from "react-icons/fa";
 import { RiCellphoneLine } from "react-icons/ri";
 import { FaPhone } from "react-icons/fa6";
 import StoreHours from "../StoreHours/StoreHours";
+import { Button } from "@/components/ui/button";
+import { IoLocationSharp } from "react-icons/io5";
+import { IoIosMail } from "react-icons/io";
 
 const NavBar = () => {
   const currentPath = usePathname();
@@ -28,6 +31,8 @@ const NavBar = () => {
     { label: "HOME", href: "/" },
     { label: "MENU", href: "/menu" },
     { label: "GALLERY", href: "/gallery" },
+    { label: "ABOUT", href: "/about-us" },
+    { label: "CONTACT", href: "/contact" },
   ];
   // Create an array to hold the list items
   const links2 = [
@@ -41,7 +46,7 @@ const NavBar = () => {
 
   const changeBackground = () => {
     // console.log(window.scrollY);
-    if (window.scrollY >= 70) {
+    if (window.scrollY >= 120) {
       setNavbar(true);
     } else {
       setNavbar(false);
@@ -58,31 +63,105 @@ const NavBar = () => {
       <div
         className={
           navbar
-            ? "flex fixed top-0 items-center bg-black justify-center xl:p-1 mx-auto md:p-4 z-10 w-full h-[60px]"
+            ? "flex fixed top-0 items-center bg-zinc-800 justify-center xl:p-1 mx-auto md:p-4 z-10 w-full h-[70px]"
-            : "flex items-center justify-center xl:p-1 bg-transparent mx-auto  md:p-4 absolute z-10 w-full h-[120px]"
+            : "flex flex-col bg-transparent mx-auto absolute z-10 w-full h-[220px]"
         }
       >
+        {/* Top Bar */}
+        <div
+          className={
+            navbar ? "hidden" : "w-full text-white flex flex-col h-[7svh]"
+          }
+        >
+          <div className="flex flex-row h-full">
+            {/* left side  */}
+            <div className="flex w-1/2 gap-6 relative left-20">
+              <div className="flex items-center justify-center gap-1">
+                <div className="text-xl brightness-90">
+                  <IoLocationSharp />
+                </div>
+                <span className="brightness-90 font-sans text-sm">
+                  24188 E Hwy 51, Broken Arrow, OK 74014
+                </span>
+              </div>
+              <div className="flex items-center justify-center">
+                <StoreHours />
+              </div>
+            </div>
+            {/* right side  */}
+            <div className="flex w-1/2 relative right-20 justify-end gap-6">
+              <div className="flex items-center gap-1">
+                <div>
+                  <FaPhone />
+                </div>
+                <div className="text-sm brightness-90">
+                  <a href="tel:9188880844">(918)-888-0844</a>
+                </div>
+              </div>
+              <div className="flex items-center gap-1">
+                <div className="text-xl">
+                  <IoIosMail />
+                </div>
+                <div className="text-sm brightness-90">
+                  <a href="mailto:jefesmexicanba@gmail.com">
+                    jefesmexicanba@gmail.com
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="w-full h-[1px] bg-white brightness-50"></div>
+        </div>
+
         {/* Phone Number  */}
         <div
           className={
             navbar
-              ? "hover:cursor-pointer hidden md:block xl:text-xl font-sans antialiased z-90 text-white left-10 absolute"
+              ? "hover:cursor-pointer hidden md:block xl:text-xl font-sans antialiased z-90 text-white left-10 absolute "
               : "hidden"
           }
         >
           <div className="flex flex-row items-center justify-center gap-4">
-          <div className="flex items-center justify-center space-x-1.5">
+            <div className="flex items-center justify-center gap-1 font-sans">
-            <FaPhone />
+              <FaPhone />
-            <span>(918) 888-0844</span>
+              <span className="text-base brightness-95">
-          </div>
+                <a href="tel:9188880844">(918)-888-0844</a>
-            <StoreHours />
+              </span>
+            </div>
+            <div className="text-base">
+              <StoreHours />
+            </div>
           </div>
         </div>
+
+        {/* logo */}
+        <Link href="/" className="absolute left-32 pt-20">
+          <Image
+            src="/logo.svg"
+            width={0}
+            height={0}
+            sizes="100vw"
+            style={{ width: "40%", height: "auto" }}
+            alt="Logo"
+            className={navbar ? "hidden" : "hidden xl:block logo brightness-75"}
+          />
+          <Image
+            src="/logo.svg"
+            width={0}
+            height={0}
+            sizes="50vw"
+            style={{ width: "50%", height: "auto" }}
+            alt="Logo"
+            className="block md:hidden"
+          />
+        </Link>
+
+        {/* Pages */}
         <ul
           className={
             navbar
-              ? "hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 z-90"
+              ? "hover:cursor-pointer hidden md:flex space-x-4 xl:text-xl font-sans antialiased z-90  w-full absolute justify-center items-center brightness-95 font-sans"
-              : "hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 pr-4"
+              : "hover:cursor-pointer hidden relative md:flex gap-4 xl:text-xl font-sans antialiased w-full justify-center items-center text-center brightness-90 h-[18svh]"
           }
         >
           {links.map((link) => (
@@ -102,50 +181,24 @@ const NavBar = () => {
             </Link>
           ))}
         </ul>
-        {/* logo */}
-        <Link href="/" className="relative justify-center items-center">
-          <Image
-            src="/logo.svg"
-            width={0}
-            height={0}
-            sizes="100vw"
-            style={{ width: "40%", height: "auto" }}
-            alt="Logo"
-            className={navbar ? "hidden" : "hidden xl:block logo"}
-          />
-          <Image
-            src="/logo.svg"
-            width={0}
-            height={0}
-            sizes="50vw"
-            style={{ width: "50%", height: "auto" }}
-            alt="Logo"
-            className="block md:hidden"
-          />
-        </Link>
-
-        <ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased md:pl-3">
-          {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
-              className={classnames({
-                "border-b-2 border-red-800 text-white":
-                  link.href === currentPath,
-                "text-white": link.href !== currentPath,
-                "hover:text-red-800": true,
-              })}
-              href={link.href}
-            >
-              {link.label}
-            </Link>
-          ))}
-        </ul>
 
         {/* Reservation button */}
-        <div className="right-2 hidden md:block absolute overflow-hidden">
+        <div
-          <Reserve />
+          className={
+            navbar
+              ? "flex absolute top-0 items-center  justify-end xl:p-1 mx-auto md:p-4 z-10 w-full h-[70px]"
+              : "absolute hidden md:flex flex-wrap gap-1 w-full justify-end top-32"
+          }
+        >
+          <div className="flex sticky right-2 gap-1">
+            <Button
+              size="sm"
+              className="xl:text-lg bg-red-800 hover:bg-slate-800 text-xs"
+            >
+              RESERVE NOW
+            </Button>
+            <Reserve />
+          </div>
         </div>
       </div>
 

Websites/jefes-nextjs/app/components/NavBar/reserveButton.tsx

@@ -7,11 +7,11 @@ const Reserve = () => {
   return (
     <div>
       <div className="right-2 hidden md:block">
-        <Button size='sm' className="xl:text-lg  bg-red-800 hover:bg-slate-600 text-xs">
+        <Button size='sm' className="xl:text-lg  bg-red-800 hover:bg-slate-800 text-xs">
           <span className="flex flex-row">
             <span className="flex flex-row">ORDER ONLINE</span>
           </span>
-          <Image
+          {/* <Image
             src="/fork.svg"
             width={30}
             height={30}
@@ -24,7 +24,7 @@ const Reserve = () => {
             height={20}
             alt="fork"
             className="pl-2 xl:hidden block"
-          />
+          /> */}
         </Button>
       </div>
     </div>

Websites/jefes-nextjs/app/components/StoreHours/StoreHours.tsx

@@ -1,6 +1,6 @@
 import { getDay } from "date-fns";
 import React from "react";
-import { FaRegClock } from "react-icons/fa";
+import { FaClock } from "react-icons/fa6";
 
 const StoreHours = () => {
   var week = [
@@ -38,11 +38,14 @@ const StoreHours = () => {
 
   return (
     <>
-      <div className="flex flex-row gap-1 items-center justify-center">
+      <div className="flex flex-row gap-2 items-center justify-center">
-        <div className="flex">
+        <div className="flex items-center justify-center gap-1">
-          <FaRegClock />
+          <FaClock />
+          <span className="brightness-90 antialiased font-sans text-sm">
+            Today
+          </span>
         </div>
-        <div className="flex">{hours}</div>
+        <div className="flex brightness-90 font-sans">{hours}</div>
       </div>
     </>
   );

Websites/jefes-nextjs/app/menuButton.tsx

@@ -6,8 +6,8 @@ const MenuButton = () => {
   return (
     <div>
       <div className="right-2 hidden md:block">
-        <Button className="xl:text-lg  bg-zinc-900 hover:bg-slate-600">
+        <Button size="sm" className="xl:text-lg  bg-zinc-900 hover:bg-slate-600">
-          <span className="flex flex-row px-7">
+          <span className="flex flex-row px-3">
             <span className="flex flex-row">VIEW MENU</span>
           </span>
         </Button>

Websites/jefes-nextjs/components/ui/button.tsx

@@ -21,6 +21,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-10 px-4 py-2",
+        xs: "h-9 rounded-md px-1",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",