From 84f5672aca032bc7e99ba90e8bc7ec1280736120 Mon Sep 17 00:00:00 2001
From: "Rayyan (Rayy)" <rayyan.hodges@studytafensw.edu.au>
Date: Tue, 5 Sep 2023 10:43:11 +0000
Subject: [PATCH] Modify Navbar view for different users dpending on login

---
 src/components/Header.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 02aea35..aba097f 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,15 +3,19 @@ import Navbar from "react-bootstrap/Navbar"
 import Nav from "react-bootstrap/Nav"
 
 export function Header ( props ) {
-    return (    <Navbar>
+    // props.items is the value of nav state in App.js
+    // create a collection of navigation items
+    const Links = props.items.map( (item, itemkey) => {
+return (
+        <Nav.Link href={item.link} key={itemkey}> {item.label}  </Nav.Link>
+)
+    } )
+    return (
+            <Navbar>
         <Container>
           <Navbar.Brand>App</Navbar.Brand>
           <Nav>
-            <Nav.Link href="/">Home</Nav.Link>
-            <Nav.Link href="/about">About</Nav.Link>
-            <Nav.Link href="/contact">Contact</Nav.Link>
-            <Nav.Link href="/signup">Create Account</Nav.Link>
-            <Nav.Link href="/signin">Sign in</Nav.Link>
+            {Links}
             </Nav>
         </Container>
       </Navbar>)