fixed user + admin navbars

client/src/pages/AdminLoginNavbar.js

@@ -1,15 +1,37 @@
 import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 import './Navbar.css';
 import berkeleyfoodpantrylogo from './../images/berkeley-food-pantry-logo.png';
+import React, { useState } from 'react';
 
 export default function AdminLoginNavbar() {
+
+   const [admin, setAdmin] = useState(false);
+
+    function setDisplay() {
+        if (admin) {
+            return(
+               <ul className = "navbar-container">
+               <Link to="/stockListingAdmin" className = "headerTags" style={{ textDecoration: 'none' }} >Edit Today's Stock</Link>
+               <Link to="/appointmentScheduler" className = "headerTags" style={{ textDecoration: 'none' }}>View Appointments</Link>
+               </ul>
+            )
+        }
+
+        return(
+         <ul className = "navbar-container">
+         <Link to="/stockListingAdmin" className = "headerTags" style={{ textDecoration: 'none' }} >View Today's Stock</Link>
+         <Link to="/appointmentScheduler" className = "headerTags" style={{ textDecoration: 'none' }}>Schedule Appointment</Link>
+         </ul>
+        )
+    }
+
+
    return(
       <div className= "navbarContainer">
          <img src={berkeleyfoodpantrylogo} className = "navbarLogo" alt = "navbar logo"></img>
             <ul className = "navbar-container"> 
                   <Link to="https://www.berkeleyfoodpantry.org/aboutus" className = "headerTags" style={{ textDecoration: 'none'}} >About the Pantry</Link>
-                  <Link to="/stockListingAdmin" className = "headerTags" style={{ textDecoration: 'none' }} >Edit Today's Stock</Link>
-                  <Link to="/appointmentScheduler" className = "headerTags" style={{ textDecoration: 'none' }}>View Appointments</Link>
+                  {setDisplay()}
                   <Link to="/adminLogin" className = "headerTags" style={{ textDecoration: 'none' }}>Login</Link>
             </ul>
       </div>

client/src/pages/MobNavbar.js

@@ -8,6 +8,27 @@ import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
 
 function MobNavbar() {
     const [dropdown, setDropdown] = useState(0);
+
+    const [admin, setAdmin] = useState(false);
+
+    function setDisplay() {
+        if (admin) {
+            return(
+               <ul className = "navbar-container">
+               <Link to="/stockListingAdmin" className = "headerTags" style={{ textDecoration: 'none' }} >Edit Today's Stock</Link>
+               <Link to="/appointmentScheduler" className = "headerTags" style={{ textDecoration: 'none' }}>View Appointments</Link>
+               </ul>
+            )
+        }
+
+        return(
+         <ul className = "navbar-container">
+         <Link to="/stockListingAdmin" className = "headerTags" style={{ textDecoration: 'none' }} >View Today's Stock</Link>
+         <Link to="/appointmentScheduler" className = "headerTags" style={{ textDecoration: 'none' }}>Schedule Appointment</Link>
+         </ul>
+        )
+    }
+
     function setTrue() {
         setDropdown(true)
     }
@@ -28,8 +49,9 @@ function MobNavbar() {
                     <div className='dropDownLinks'>
                         <a href="https://www.berkeleyfoodpantry.org/aboutus" 
                         target="_blank" rel="noopener noreferrer" className='dropDownText' onClick = {setFalse}>About the Pantry</a>
-                        <Link to = "/stockListingAdmin" onClick={setFalse} className = 'dropDownText'> Edit Today's Stock </Link>
-                        <a href="google.com" className='dropDownText'>View Appointments</a>
+                        {/* <Link to = "/stockListingAdmin" onClick={setFalse} className = 'dropDownText'> Edit Today's Stock </Link>
+                        <a href="google.com" className='dropDownText'>View Appointments</a> */}
+                        {setDisplay()}
                         <Link to = "/adminLogin" onClick={setFalse} className = 'dropDownText'> Login </Link>
                         {/* <a href="google.com" className='dropDownText'>Edit Today's Stock</a>
                         <a href="google.com" className='dropDownText'>View Appointments</a>
@@ -51,4 +73,4 @@ function MobNavbar() {
 
 }
 
-export default MobNavbar;
+export default MobNavbar;

client/src/pages/MobileUserNavbar.js

@@ -0,0 +1,54 @@
+import './MobNavbar.css';
+import bfpLogo from './../images/bfpLogo.svg';
+import xButton from './../images/isbees-x-symbol.svg';
+import groceries from './../images/navBarImage.png';
+import React, { useState } from 'react';
+import dropdownIcon from './../images/dropdown-icon.svg'
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+
+function MobNavbar() {
+    const [dropdown, setDropdown] = useState(0);
+    function setTrue() {
+        setDropdown(true)
+    }
+    function setFalse() {
+        setDropdown(false)
+    }
+    if (dropdown) {
+        return (
+            <div className='canvas'>
+                <div className = "dropNavBar">
+                    <img src = {bfpLogo} className = "logo"></img>
+                    <button onClick={setFalse}>
+                        <img src = {xButton} className = "xButton" />
+                    </button>
+                </div>
+                <div className ='imageAndDropDowns'>
+                    <img src = {groceries} className = "dropDownLogo"></img>
+                    <div className='dropDownLinks'>
+                        <a href="https://www.berkeleyfoodpantry.org/aboutus" 
+                        target="_blank" rel="noopener noreferrer" className='dropDownText' onClick = {setFalse}>About the Pantry</a>
+                        <Link to = "/stockListingAdmin" onClick={setFalse} className = 'dropDownText'> View Today's Stock </Link>
+                        <a href="google.com" className='dropDownText'>Schedule Appointment</a>
+                        <Link to = "/adminLogin" onClick={setFalse} className = 'dropDownText'> Login </Link>
+                        {/* <a href="google.com" className='dropDownText'>Edit Today's Stock</a>
+                        <a href="google.com" className='dropDownText'>View Appointments</a>
+                        <a href="google.com" className='dropDownText'>Logout</a> */}
+                    </div>
+                </div>
+            </div>
+        )
+    } 
+    return (
+            <div className='navBar'>
+                <img src = {bfpLogo} className = "logo"></img>
+                <button onClick={setTrue}>
+                    <img src = {dropdownIcon} className = "icon"></img>
+                </button>
+            </div>
+
+    )
+
+}
+
+export default MobNavbar;

client/src/pages/UserNavbar.js

@@ -0,0 +1,18 @@
+import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
+import './Navbar.css';
+import berkeleyfoodpantrylogo from './../images/berkeley-food-pantry-logo.png';
+
+export default function AdminLoginNavbar() {
+
+   return(
+      <div className= "navbarContainer">
+         <img src={berkeleyfoodpantrylogo} className = "navbarLogo" alt = "navbar logo"></img>
+            <ul className = "navbar-container"> 
+                  <Link to="https://www.berkeleyfoodpantry.org/aboutus" className = "headerTags" style={{ textDecoration: 'none'}} >About the Pantry</Link>
+                  <Link to="/stockListingAdmin" className = "headerTags" style={{ textDecoration: 'none' }}>View Today's Stock</Link>
+                  <Link to="/appointmentScheduler" className = "headerTags" style={{ textDecoration: 'none' }}>Schedule Appointment</Link>
+                  <Link to="/adminLogin" className = "headerTags" style={{ textDecoration: 'none' }}>Login</Link>
+            </ul>
+      </div>
+   )
+}