Made navbar change appropriately to whether user is logged in

zzadxz · Nov 2, 2024 · 37c85bb · 37c85bb
1 parent 3b5f756
commit 37c85bb
Showing 1 changed file with 14 additions and 12 deletions.
diff --git a/frontend/src/app/components/Navbar.tsx b/frontend/src/app/components/Navbar.tsx
@@ -6,11 +6,11 @@ import { useRouter } from "next/navigation";
 import { User } from "firebase/auth";
 
 const navBarLinks = [
-  { name: "Home", link: "/" },
-  { name: "About", link: "/about" },
-  { name: "Carbon Dashboard", link: "/dashboard" },
-  { name: "Transactions", link: "/transactions" },
-  { name: "Map", link: "/map" },
+  { name: "Home", link: "/", access_restricted: false },
+  { name: "About", link: "/about", access_restricted: false },
+  { name: "Carbon Dashboard", link: "/dashboard", access_restricted: true },
+  { name: "Transactions", link: "/transactions", access_restricted: true },
+  { name: "Map", link: "/map", access_restricted: true },
 ];
 
 const Navbar = () => {
@@ -53,13 +53,15 @@ const Navbar = () => {
 
         <div className="hidden max-w-full flex-grow justify-end overflow-clip sm:flex">
           <ul className="flex items-center gap-2 2xsm:gap-6">
-            {navBarLinks.map(({ name, link }) => (
-              <li key={name}>
-                <a href={link} className="text-sm font-extrabold text-black">
-                  {name.toUpperCase()}
-                </a>
-              </li>
-            ))}
+            {navBarLinks.map(({ name, link, access_restricted }) =>
+              user || !access_restricted ? (
+                <li key={name}>
+                  <a href={link} className="text-sm font-extrabold text-black">
+                    {name.toUpperCase()}
+                  </a>
+                </li>
+              ) : null
+            )}
             <li>
               {user ? (
                 <button