Made Navbar dynamic

langaracpsc · Dec 27, 2023 · 91d3830 · 91d3830
1 parent 93d96c4
commit 91d3830
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/frontend/src/app/NavBar.tsx b/frontend/src/app/NavBar.tsx
@@ -8,17 +8,20 @@ import { useAppDispatch } from "./hooks/hooks";
 import { SetCurrentPage, selectCurrentPage } from "./slices/pageSlice";
 import { useSelector } from "react-redux";
 import { AppDispatch } from "./stores/store";
+import { waitForDebugger } from "inspector";
 
 interface NavBarProps
-{}
+{
+    Pages: Map<string, string>;  
+}
 
 interface NavBarState
 {
     ButtonGap?: number;
     TopMargin?: number;
 }
 
-export default function NavBar({} : NavBarProps) 
+export default function NavBar({ Pages } : NavBarProps) 
 {
     <div className={"gap-x-2"}></div>;
     <div className={"gap-x-3"}></div>;
@@ -40,9 +43,15 @@ export default function NavBar({} : NavBarProps)
         router.push(url);    
         mainDispatch(SetCurrentPage(url));
         setPage(currentPage);
-
     };
 
+    const navButtons: Array<typeof NavButton> = new Array<typeof NavButton>();
+
+    Pages.forEach((value, key, pageMap) => {
+        console.log(currentPage == value[1]);
+        navButtons.push(<NavButton Label={value[0]} Activated={currentPage == value[1]} EndPoint={value[1]} OnClick={onClickHandler}/>);
+    }); 
+
     return (
         <div className="flex flex-row max-[600px]:grid max-[600px]:grid-rows-2  row-start-1 row-span-1 max-[600px]:justify-center">
             <div className="min-[600px]:basis-1/4 max-[600px]:row-start-1 flex flex-row shrink-0 grow-0 max-[600px]:justify-center ">
@@ -54,9 +63,7 @@ export default function NavBar({} : NavBarProps)
                 <div></div>
                 <div className={"col-start-2"}>
                     <div className={"nav_button_container flex max-[500px]:gap-x-3 gap-x-7 mt-5 max-[500px]:mt-6"}>
-                        <NavButton Label={"Home"} Activated={currentPage == "/"} EndPoint={"/"} OnClick={onClickHandler}/>
-                        <NavButton Label={"About"} Activated={currentPage == "/about"} EndPoint={"/about"}  OnClick={onClickHandler}/>
-                        <NavButton Label={"Events"} Activated={currentPage == "/events"} EndPoint={"/events"}  OnClick={onClickHandler}/>
+                        {navButtons}
                     </div>
                 </div>
                 <div></div>

diff --git a/frontend/src/app/NavButton.tsx b/frontend/src/app/NavButton.tsx
@@ -3,6 +3,8 @@
 import {Component} from "react";
 import {Global} from "@/app/Global";
 import {redirect} from "next/navigation";
+import { useAppSelector } from "./hooks/hooks";
+import { selectCurrentPage } from "./slices/pageSlice";
 
 interface NavButtonProps 
 {
@@ -19,10 +21,10 @@ export default function NavButton({ Label, EndPoint, Activated, OnClick } : NavB
 {
     const color: string = (Activated) ? "white" : "lang-orange";
 
-    return <button 
-    className={`bg-transparent max-[600px]:text-[10px] max-[600px]:h-8 max-[600px]:w-15 h-10 text-white font-semibold hover:text-white py-2 px-4 border border-${color} hover:border-white rounded select-none`}
-    onClick={() => {OnClick(EndPoint)}}>
+    return (<button 
+            className={`bg-transparent max-[600px]:text-[10px] max-[600px]:h-8 max-[600px]:w-15 h-10 text-white font-semibold hover:text-white py-2 px-4 border border-${color} hover:border-white rounded select-none`}
+            onClick={() => {OnClick(EndPoint);}}>
             {Label}
-    </button>
+        </button>);
 }
 
diff --git a/frontend/src/app/about/page.tsx b/frontend/src/app/about/page.tsx
@@ -9,7 +9,11 @@ export default function Page()
     return (
         <Provider store={store}>
         <main className="grid grid-rows-[10vh_1fr] max-[600px]:grid-rows-[20vh_1fr] overflow-hidden">
-            <NavBar></NavBar>
+            <NavBar Pages={[
+                ["Home", "/"],
+                ["About", "/about"],
+                ["Events", "/events"]
+            ]}></NavBar>
             <AboutPage></AboutPage>
         </main>    
         </Provider>

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -17,7 +17,11 @@ export default function Home() {
     return (
         <Provider store={store}>
         <main className="grid grid-rows-[10vh_1fr] max-[600px]:grid-rows-[10vh_1fr] overflow-hidden">
-            <NavBar></NavBar>
+            <NavBar Pages={[
+                ["Home", "/"],
+                ["About", "/about"],
+                ["Events", "/events"]
+            ]}></NavBar>
             <HomePage></HomePage>
         </main>
         </Provider>