navBar part2

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

Hide file tree

Showing 7 changed files with 235 additions and 6 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/Home.jsx b/frontend/src/Home.jsx
@@ -3,17 +3,20 @@ import Header from './components/home/Header';
 import LatestData from './components/home/LatestData';
 import PickUp from './components/home/PickUp';
 import Report from './components/home/Report';
+import Projects from './components/home/Projects';
+import Footer from './components/Footer';
 
 export default function Home() {
 
     return (
         <>
            <div className="col-12">        
-            <Header />
-            <LatestData />
-            <PickUp />
-            <Report />  
-
+                <Header />
+                <LatestData />
+                <PickUp />
+                <Report />  
+                <Projects />
+                {/* <Footer />                       */}
             </div>        
         </>        
     );

diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+import Avatar from './Avatar';
+import '../css/dropdown.css';
+import menu from '../constants/navMenu';
+
+const DownIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
+</svg>
+);
+
+export default function NavBar () {
+    // const menu = ['Learn', 'Submit', 'Individuals', 'Sightings', 'Encounters', 'Administers'];
+
+    return (<Navbar variant="dark" expand="lg" style={{ 
+          width: '100%', 
+          display: 'flex', 
+          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" style={{marginLeft: '20%'}}>
+              <Nav className="mr-auto" style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+                {menu.map((item, idx) => (
+                  <Nav className="me-auto">                    
+                    <NavDropdown title={
+                      <span style={{color: 'white'}}>
+                        {Object.keys(item)[0]}
+                        <DownIcon />
+                        </span>} id={`basic-nav-dropdown${item}`} 
+                        style={{color: 'white'}}>
+                      {Object.values(item).map((subItem, idx) => (
+                        <LinkContainer to={subItem.to}>
+                          <NavDropdown.Item>{subItem.name}</NavDropdown.Item>
+                        </LinkContainer>
+                      ))}
+
+                      {/* <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+                      <NavDropdown.Item href="#action/3.2">
+                        Another action
+                      </NavDropdown.Item>
+                      <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
+                      <NavDropdown.Divider />
+                      <NavDropdown.Item href="#action/3.4">
+                        Separated link
+                      </NavDropdown.Item> */}
+                    </NavDropdown>
+          </Nav>
+                ))}
+              </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>)
+}
diff --git a/frontend/src/components/home/Progress.jsx b/frontend/src/components/home/Progress.jsx
@@ -0,0 +1,60 @@
+import React from "react";
+
+export default function Progress({ name, encounters, progress }) {
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            width: '100%',
+            marginBottom: '10px',
+        }}>
+            <div style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-start',
+                alignItems: 'flex-start',
+                width: '70%',
+            }}>
+                <h5>{name}</h5>
+                <span>{encounters} encounters</span>
+            </div>
+            <div style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-start',
+                alignItems: 'flex-start',
+                width: '70%',
+            }}>
+                <div style={{
+                    width: '100%',
+                    height: '15px',
+                    backgroundColor: 'lightgrey',
+                    borderRadius: '3px',
+                    position: 'relative', 
+                    border: '1px solid darkgrey',
+                }}>
+                    <div style={{
+                        position: 'relative',
+                        width: `${progress}%`,
+                        height: '13px',
+                        backgroundColor: 'green',
+                        borderRadius: '3px',
+                    }}>
+
+                        <span style={{
+                            position: 'absolute', 
+                            top: '50%', 
+                            left: '50%', 
+                            transform: 'translate(-50%, -50%)', 
+                            color: 'white', 
+                            fontSize: '0.8em',
+                        }}>
+                            {progress}%
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/components/home/Projects.jsx b/frontend/src/components/home/Projects.jsx
@@ -1,10 +1,51 @@
 
 import React from "react";
+import Progress from './Progress';
 
 export default function Projects () {
 
 
-    return <div></div>
+    return <div style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
+        height: '400px',
+        padding: '20px',
+
+    }}>
+        <div style={{
+            width: '45%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+    }}>
+            <h1 style={{                
+                fontSize: '4em',
+            }}>
+                View your
+            </h1>
+            <h1 style={{                
+                fontSize: '4em',
+            }}>
+                projects
+            </h1>
+        </div>
+        <div style={{
+            width: '45%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            padding: '20px',
+        }}>
+            <Progress name='Amphibians & Reptiles' encounters = '126' progress='25'/>
+            <Progress name='Seal' encounters = '12' progress='12'/>
+            <Progress name='Sharkwhale' encounters = '26' progress='80'/>
+
+        </div>
+
+    </div>
 
 
 

diff --git a/frontend/src/constants/navMenu.js b/frontend/src/constants/navMenu.js
@@ -0,0 +1,32 @@
+export default menu = [
+    {'Learn': [
+        {name: 'About Wildbook', to: '/about'},
+        {name: 'Citing Wildbook', to: '/citing.jsp'},
+        {name: 'Wildbook for Birds', to: '/about'},
+        {name: 'Wildbook for Sharks', to: '/about'},
+    ]},
+    {'Submit': [
+        {name: 'Report a Sighting', to: '/submit'},
+        {name: 'Bulk Import', to: '/submit'},
+    ]},
+    {'Individuals': [
+        {name: 'Search', to: '/individuals'},
+        {name: 'Add Individual', to: '/individuals'},
+        {name: 'Bulk Import', to: '/individuals'},
+    ]},
+    {'Sightings': [
+        {name: 'Search', to: '/sightings'},
+        {name: 'Add Sighting', to: '/sightings'},
+        {name: 'Bulk Import', to: '/sightings'},
+    ]},
+    {'Encounters': [
+        {name: 'Search', to: '/encounters'},
+        {name: 'Add Encounter', to: '/encounters'},
+        {name: 'Bulk Import', to: '/encounters'},
+    ]},
+    {'Administers': [
+        {name: 'Search', to: '/administers'},
+        {name: 'Add Administer', to: '/administers'},
+        {name: 'Bulk Import', to: '/administers'},
+    ]},
+]
diff --git a/frontend/src/css/dropdown.css b/frontend/src/css/dropdown.css
@@ -0,0 +1,3 @@
+.dropdown-toggle::after {
+    display: none !important; 
+  }