From bd4169b92f081819ad3aff5adc811cbe540b7ad4 Mon Sep 17 00:00:00 2001
From: ImAlpha <arcticjcb@gmail.com>
Date: Tue, 14 Nov 2023 01:41:43 -0800
Subject: [PATCH] navbar fixed and centered

---
 .../app/components/NavBar/NavBar.tsx          |  6 ++--
 Websites/jefes-nextjs/app/menu/layout.tsx     | 31 ++++++++++++-------
 Websites/jefes-nextjs/app/menu/page.tsx       |  3 +-
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
index 834a77b..76bd48b 100644
--- a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
+++ b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
@@ -57,8 +57,8 @@ const NavBar = () => {
     <nav>
       {/* <center className="text-accent bg-black">O</center> */}
       <div className={navbar ? "flex items-center bg-black justify-center xl:p-1 mx-auto  md:p-4 absolute z-10 w-full h-[120px] bg-green"
-      : "flex items-center justify-center xl:p-1 bg-red-800 mx-auto  md:p-4 absolute z-10 w-full h-[120px]"}>
-        <ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased">
+      : "flex items-center justify-center xl:p-1 bg-transparent mx-auto  md:p-4 absolute z-10 w-full h-[120px]"}>
+        <ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 pr-6">
           {links.map((link) => (
             <Link
               key={link.href}
@@ -77,7 +77,7 @@ const NavBar = () => {
           ))}
         </ul>
         {/* logo */}
-        <Link href="/">
+        <Link href="/" className="relative">
           <Image
             src="/logo.svg"
             width={0}
diff --git a/Websites/jefes-nextjs/app/menu/layout.tsx b/Websites/jefes-nextjs/app/menu/layout.tsx
index b267ef7..512d7c2 100644
--- a/Websites/jefes-nextjs/app/menu/layout.tsx
+++ b/Websites/jefes-nextjs/app/menu/layout.tsx
@@ -3,19 +3,26 @@ import Image from "next/image";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="flex flex-col">
-      <div className="flex relative w-full h-[400px]">
-      <Image
-            src="/header02.webp"
-            alt="nav image"
-            priority
-            fill
-            style={{ objectFit: "cover" , objectPosition: '75%'}}
-            quality={100}
-            className="brightness-[25%]"
-          />
+    <div className="flex flex-col relative justify-center items-center ">
+      <div className="flex relative -z-10 pt-40 w-[100vw] h-[400px] overflow-hidden">
+        <Image
+          src="/IMG_2431.jpg"
+          alt="nav image"
+          priority
+          fill
+          style={{ objectFit: "cover", objectPosition: "center" }}
+          quality={100}
+          className="brightness-[20%] "
+        />
+        <div className="flex flex-col w-full text-center xl:text-5xl xl:block text-white lg:text-2xl z-10">
+          <div className="p-6 ">
+            <p className="py-4">
+              <span className="">Menu</span>
+            </p>
+          </div>
+        </div>
       </div>
-      
+
       <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
     </div>
   );
diff --git a/Websites/jefes-nextjs/app/menu/page.tsx b/Websites/jefes-nextjs/app/menu/page.tsx
index fd5041a..aedc6bc 100644
--- a/Websites/jefes-nextjs/app/menu/page.tsx
+++ b/Websites/jefes-nextjs/app/menu/page.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import Appetizers from "./Appetizers/page";
+import Image from "next/image";
 
 const menu = () => {
   return (
-    <div className="flex flex-col justify-center items-center">
+    <div className="flex flex-col relative justify-center items-center">
       <div>
         <Appetizers />
       </div>