From a989cf997c7775965cec39b27c67582b2758bff5 Mon Sep 17 00:00:00 2001
From: ImAlpha <arcticjcb@gmail.com>
Date: Tue, 14 Nov 2023 02:35:43 -0800
Subject: [PATCH] sticky nav shows, but doesn't link

---
 .../app/components/NavBar/NavBar.tsx          | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
index 76bd48b..d41b732 100644
--- a/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
+++ b/Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx
@@ -42,7 +42,7 @@ const NavBar = () => {
 
   const changeBackground = () => {
     // console.log(window.scrollY);
-    if (window.scrollY >= 20) {
+    if (window.scrollY >= 70) {
       setNavbar(true);
     } else {
       setNavbar(false);
@@ -56,19 +56,30 @@ const NavBar = () => {
   return (
     <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-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">
+      <div
+        className={
+          navbar
+            ? "flex fixed top-0 items-center bg-black justify-center xl:p-1 mx-auto md:p-4 z-90 w-full h-[60px]"
+            : "flex items-center justify-center xl:p-1 bg-transparent mx-auto  md:p-4 absolute z-10 w-full h-[120px]"
+        }
+      >
+        <ul
+          className={
+            navbar
+              ? "hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8"
+              : "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}
               // 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-jefesRed text-accent":
+                "border-b-2 border-red-800 text-white":
                   link.href === currentPath,
-                "text-accent": link.href !== currentPath,
-                "hover:text-jefesRed": true,
+                "text-white": link.href !== currentPath,
+                "hover:text-red-800": true,
               })}
               href={link.href}
             >
@@ -85,7 +96,7 @@ const NavBar = () => {
             sizes="100vw"
             style={{ width: "40%", height: "auto" }}
             alt="Logo"
-            className="hidden xl:block logo"
+            className={navbar ? "hidden" : "hidden xl:block logo"}
           />
           <Image
             src="/logo.svg"
@@ -105,10 +116,10 @@ const NavBar = () => {
               // 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-jefesRed text-accent":
+                "border-b-2 border-red-800 text-white":
                   link.href === currentPath,
-                "text-accent": link.href !== currentPath,
-                "hover:text-jefesRed": true,
+                "text-white": link.href !== currentPath,
+                "hover:text-red-800": true,
               })}
               href={link.href}
             >