Issue 71 edit nav bar to match figma (#171)

* Added "News" link * News link * Changing nav-bar links * Nav-bar boldness * fixed navbar * fixed dynamic positioning of navbar * window with issue. --------- Co-authored-by: James Lee <[email protected]>
codersforcauses · Mar 15, 2024 · b8e7ecd · b8e7ecd
1 parent 207dd35
commit b8e7ecd
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 22 deletions.
diff --git a/src/components/Header/NavBar/index.tsx b/src/components/Header/NavBar/index.tsx
@@ -1,19 +1,37 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
 
 import { primaryNav } from "./links";
 import NavItem from "./nav-item";
 
 export default function NavBar() {
+  const [windowWidth, setWindowWidth] = useState(0);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   // handles hamburger button state
   const [hamburgerMenuOpen, setHamburgerMenuOpen] = useState(false);
 
   return (
-    <div className="flex h-14 items-center justify-between whitespace-nowrap bg-white px-4 text-starick-brown">
+    <div className="flex h-20 items-center justify-center gap-60 whitespace-nowrap bg-white px-4 text-starick-black">
       {/* Left nav container (logo and links) */}
-      <div className="flex items-center justify-center">
-        {/* Header container */}
+      {/* Header container */}
+      <div
+        className={`flex flex-row items-center ${
+          windowWidth >= 1200 ? "lg:gap-60" : "md:gap-30"
+        }`}
+      >
         <Link href="/">
           <Image
             src="/placeholder_starick_logo.png"
@@ -24,18 +42,20 @@ export default function NavBar() {
           />
         </Link>
         {/* Primary nav link container */}
-        <div
-          className={`flex items-center justify-center lg:visible lg:static lg:block lg:h-full lg:w-full ${
-            hamburgerMenuOpen
-              ? "fixed bottom-0 left-0 right-0 top-0 h-full bg-white"
-              : "hidden"
-          }`}
-        >
-          <ul className="ml-20 flex w-full flex-col divide-starick-olive lg:ml-0 lg:flex-row lg:divide-x-2">
-            {primaryNav.map((link) => (
-              <NavItem link={link} key={link.href} />
-            ))}
-          </ul>
+        <div className="items-center text-end">
+          <div
+            className={`flex items-center justify-center lg:visible lg:static lg:block lg:h-full lg:w-full ${
+              hamburgerMenuOpen
+                ? "fixed bottom-0 left-0 right-0 top-0 h-full bg-white"
+                : "hidden"
+            }`}
+          >
+            <ul className="flex w-full flex-col divide-starick-olive font-semibold lg:ml-0 lg:flex-row lg:divide-x-2">
+              {primaryNav.map((link) => (
+                <NavItem link={link} key={link.href} />
+              ))}
+            </ul>
+          </div>
         </div>
       </div>
 

diff --git a/src/components/Header/NavBar/links.ts b/src/components/Header/NavBar/links.ts
@@ -58,15 +58,15 @@ export const primaryNav: Array<NavBarItem> = [
     ]
   },
   {
-    href: "/support",
-    label: "Support Us"
+    href: "https://us20.campaign-archive.com/?u=fd9ee23110367fb6d7afdc749&id=bc2242df48",
+    label: "News"
   },
   {
-    href: "/chat",
-    label: "Chat"
+    href: "/op-shop",
+    label: "Op Shop"
   },
   {
-    href: "donations",
+    href: "/donations",
     label: "Donate"
   }
 ];
diff --git a/src/components/Header/NavBar/nav-item.tsx b/src/components/Header/NavBar/nav-item.tsx
@@ -19,7 +19,7 @@ const NavItem = ({ link }: Props) => {
       onMouseLeave={() => setActivated(false)}
     >
       {/* button handles click action */}
-      <button className="my-2 w-max border-t-4 border-white hover:brightness-90 hover:filter lg:my-0 lg:px-2 hover:lg:border-starick-green">
+      <button className="mx-2 my-2 w-max border-t-4 border-white hover:brightness-90 hover:filter lg:my-0 lg:px-2 hover:lg:border-starick-green">
         <Link href={link.href}>
           {link.label}
           {link.submenu && <FiChevronDown className="inline" />}