decouple header

WildMeOrg · Feb 29, 2024 · e11371a · e11371a
1 parent b516c89
commit e11371a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 41 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -59,6 +59,7 @@
     "css-loader": "^6.10.0",
     "html-webpack-plugin": "^5.6.0",
     "react-app-rewired": "^2.2.1",
+    "react-bootstrap-icons": "^1.11.3",
     "style-loader": "^3.3.4",
     "terser-webpack-plugin": "^5.3.10",
     "unused-webpack-plugin": "^2.4.0",

diff --git a/frontend/src/components/home/Header.jsx b/frontend/src/components/home/Header.jsx
@@ -1,16 +1,14 @@
 import React from 'react';
-import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
-import { LinkContainer } from 'react-router-bootstrap';
-import Avatar from '../Avatar';
+import NavBar from '../NavBar'
+
 
 export default function Header() {
-  const menu = ['Learn', 'Submit', 'Individuals', 'Sightings', 'Encounters', 'Administers'];
 
   return (
     <div 
             style = {{
                 position: 'relative',
-                height: '600px', 
+                height: '500px', 
                 backgroundImage: `url('/wildbook/react/forest.png')`, 
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
@@ -19,6 +17,16 @@ export default function Header() {
             }
             }
         >
+          <div style={{
+            position: 'absolute',
+            top: '20px',
+            left: '20px',
+            zIndex: '100',
+            width: '100%',
+            paddingRight: '60px',
+          }}>            
+            <NavBar />
+          </div>
           <div style={{
             position: 'absolute',
             top: '-150px',
@@ -45,42 +53,7 @@ export default function Header() {
               </defs>
             </svg>
           </div>
-    <Navbar variant="dark" expand="lg" style={{ justifyContent: 'space-between' }}>
-      <Navbar.Brand href="#home" style={{ marginLeft: '1rem' }}>Amphibian Wildbook</Navbar.Brand>
-      <Navbar.Toggle aria-controls="basic-navbar-nav" />
-      <Navbar.Collapse id="basic-navbar-nav">
-        <Nav className="mr-auto" style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
-          {menu.map((item, idx) => (
-            <LinkContainer to={'/wildbook/react/' + item.toLowerCase()} key={idx}>
-              <NavDropdown title={item} id={item} >
-              <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
-              <NavDropdown.Item href="#action4">
-                Another action
-              </NavDropdown.Item>
-              <NavDropdown.Divider />
-              <NavDropdown.Item href="#action5">
-                Something else here
-              </NavDropdown.Item>
-            </NavDropdown>
-            </LinkContainer>
-          ))}
-        </Nav>
-        <Nav style={{ alignItems: 'center', marginLeft: '35px' }}>          
-          <NavDropdown title={<Avatar />} id="basic-nav-dropdown">
-            <LinkContainer to="/profile">
-              <NavDropdown.Item>Profile</NavDropdown.Item>
-            </LinkContainer>
-            <LinkContainer to="/settings">
-              <NavDropdown.Item>Settings</NavDropdown.Item>
-            </LinkContainer>
-            <NavDropdown.Divider />
-            <LinkContainer to="/logout">
-              <NavDropdown.Item>Logout</NavDropdown.Item>
-            </LinkContainer>
-          </NavDropdown>
-        </Nav>
-      </Navbar.Collapse>
-    </Navbar>
+
     </div>
   );
 }