From 1afaa3d2586074da238df5b35f93479b89e8025c Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Fri, 15 Mar 2024 16:47:19 -0400
Subject: [PATCH 01/14] reformat code

---
 .../components/CustomNavBar.component.js      | 50 +++++++++++--------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/Website/webb/src/common/components/CustomNavBar.component.js b/Website/webb/src/common/components/CustomNavBar.component.js
index e35f45e..ffc9d94 100644
--- a/Website/webb/src/common/components/CustomNavBar.component.js
+++ b/Website/webb/src/common/components/CustomNavBar.component.js
@@ -1,31 +1,41 @@
-import React from 'react';
-import { Navbar, Nav, Container } from 'react-bootstrap';
-import { NavLink } from 'react-router-dom';
-import CONFIG from '../../config.json'
+import React from "react";
+import { Navbar, Nav, Container } from "react-bootstrap";
+import { NavLink } from "react-router-dom";
+import CONFIG from "../../config.json";
 
-import styles from './NavBar.module.css';
+import styles from "./NavBar.module.css";
 
 function CustomNavBar() {
   return (
     <Navbar bg="light" expand="lg" className={styles.navbar}>
       <Container className={styles.navbarContainer}>
-        <Navbar.Brand as={NavLink} to="/">Accessible Routes</Navbar.Brand>
-        <img width="45px" height="40px" alt="Accessible Routes logo" src={require('./Logo.png')} />
-          <Nav className="me-auto">
-            <Nav.Link as={NavLink} to="/" className={styles.navLink}>
-              Home
-            </Nav.Link>
-            <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
-              About
-            </Nav.Link>
-            <Nav.Link as={NavLink} to={CONFIG.report_issue_page_link} className={styles.navLink}>
-              Contact Us
-            </Nav.Link>
-          </Nav>
-        
+        <Navbar.Brand as={NavLink} to="/">
+          Accessible Routes
+        </Navbar.Brand>
+        <img
+          width="45px"
+          height="40px"
+          alt="Accessible Routes logo"
+          src={require("./Logo.png")}
+        />
+        <Nav className="me-auto">
+          <Nav.Link as={NavLink} to="/" className={styles.navLink}>
+            Home
+          </Nav.Link>
+          <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
+            About
+          </Nav.Link>
+          <Nav.Link
+            as={NavLink}
+            to={CONFIG.report_issue_page_link}
+            className={styles.navLink}
+          >
+            Contact Us
+          </Nav.Link>
+        </Nav>
       </Container>
     </Navbar>
   );
 }
 
-export default CustomNavBar;
\ No newline at end of file
+export default CustomNavBar;

From d9c2af7aadda2b75e2adb07c7f4fe46dd71ca405 Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Fri, 15 Mar 2024 17:19:10 -0400
Subject: [PATCH 02/14] more reformatting of code

---
 .../src/common/components/NavBar.module.css   | 50 +++++++++++--------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/Website/webb/src/common/components/NavBar.module.css b/Website/webb/src/common/components/NavBar.module.css
index 7e14466..fe4c3f6 100644
--- a/Website/webb/src/common/components/NavBar.module.css
+++ b/Website/webb/src/common/components/NavBar.module.css
@@ -1,34 +1,40 @@
 /* NavBar.module.css */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
 
 .navbar {
-    font-family: 'Roboto', sans-serif;
-    text-align: center;
-    align-items: center;
-    margin-bottom: 0px;
-    border:2px solid #2397e9;
-    border-radius: 0%;
+  font-family: "Roboto", sans-serif;
+  text-align: center;
+  align-items: center;
+  margin-bottom: 0px;
+  border: 2px solid #2397e9;
+  border-radius: 0%;
+}
+
+.navbar-toggler {
+  border: #ff0000;
+  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/2048px-Hamburger_icon.svg.png");
 }
 
 .navLink {
-    color: #3f3b3b;
-    font-weight: 300;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    transition: color 0.3s, background-color 0.3s;
-    text-decoration: none;
-    border-radius: 5px;
-    margin-left: 5px;
-    margin-right: 5px;
+  color: #3f3b3b;
+  font-weight: 300;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  transition: color 0.3s, background-color 0.3s;
+  text-decoration: none;
+  border-radius: 5px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
 
 .navLink:hover {
-    background-color: #aeccf1;
+  background-color: #aeccf1;
 }
 
 .navbarContainer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    justify-content: flex-start;
-}
\ No newline at end of file
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: column;
+}

From e136e7db29777accb018337c5a3a127400979416 Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Fri, 15 Mar 2024 17:19:23 -0400
Subject: [PATCH 03/14] prototype of collapsing Navbar

---
 .../components/CustomNavBar.component.js      | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/Website/webb/src/common/components/CustomNavBar.component.js b/Website/webb/src/common/components/CustomNavBar.component.js
index ffc9d94..e31a1c7 100644
--- a/Website/webb/src/common/components/CustomNavBar.component.js
+++ b/Website/webb/src/common/components/CustomNavBar.component.js
@@ -9,30 +9,34 @@ function CustomNavBar() {
   return (
     <Navbar bg="light" expand="lg" className={styles.navbar}>
       <Container className={styles.navbarContainer}>
-        <Navbar.Brand as={NavLink} to="/">
-          Accessible Routes
-        </Navbar.Brand>
-        <img
-          width="45px"
-          height="40px"
-          alt="Accessible Routes logo"
-          src={require("./Logo.png")}
-        />
-        <Nav className="me-auto">
-          <Nav.Link as={NavLink} to="/" className={styles.navLink}>
-            Home
-          </Nav.Link>
-          <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
-            About
-          </Nav.Link>
-          <Nav.Link
-            as={NavLink}
-            to={CONFIG.report_issue_page_link}
-            className={styles.navLink}
-          >
-            Contact Us
-          </Nav.Link>
-        </Nav>
+        
+        <Navbar.Collapse>
+          <Navbar.Brand as={NavLink} to="/">
+            Accessible Routes
+          </Navbar.Brand>
+          <img
+            width="45px"
+            height="40px"
+            alt="Accessible Routes logo"
+            src={require("./Logo.png")}
+          />
+          <Nav className="me-auto">
+            <Nav.Link as={NavLink} to="/" className={styles.navLink}>
+              Home
+            </Nav.Link>
+            <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
+              About
+            </Nav.Link>
+            <Nav.Link
+              as={NavLink}
+              to={CONFIG.report_issue_page_link}
+              className={styles.navLink}
+            >
+              Contact Us
+            </Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
+        <Navbar.Toggle className="navbar-toggler">Toggle</Navbar.Toggle>
       </Container>
     </Navbar>
   );

From 3c7e0307122ae38686c7e846c7a32a6148d920c4 Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Fri, 22 Mar 2024 17:27:25 -0400
Subject: [PATCH 04/14] initial sidebar prototype

---
 Website/webb/src/App.js                       |  1 -
 .../components/CustomNavBar.component.js      | 73 +++++++++++--------
 .../components/CustomSideBar/CustomSideBar.js | 26 +++++++
 .../components/CustomSideBar/styles.css       | 33 +++++++++
 Website/webb/src/pages/HomePage.js            | 11 ++-
 Website/webb/src/pages/page.css               | 11 ++-
 6 files changed, 117 insertions(+), 38 deletions(-)
 create mode 100644 Website/webb/src/common/components/CustomSideBar/CustomSideBar.js
 create mode 100644 Website/webb/src/common/components/CustomSideBar/styles.css

diff --git a/Website/webb/src/App.js b/Website/webb/src/App.js
index f8057f6..1e9ca36 100644
--- a/Website/webb/src/App.js
+++ b/Website/webb/src/App.js
@@ -9,7 +9,6 @@ import About from "./pages/about.js";
 function App() {
   return (
     <Router>
-      <CustomNavBar />
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/about" element={<About />} />
diff --git a/Website/webb/src/common/components/CustomNavBar.component.js b/Website/webb/src/common/components/CustomNavBar.component.js
index e31a1c7..43d6566 100644
--- a/Website/webb/src/common/components/CustomNavBar.component.js
+++ b/Website/webb/src/common/components/CustomNavBar.component.js
@@ -1,44 +1,55 @@
 import React from "react";
+import { useState } from "react";
 import { Navbar, Nav, Container } from "react-bootstrap";
 import { NavLink } from "react-router-dom";
 import CONFIG from "../../config.json";
 
 import styles from "./NavBar.module.css";
 
+import { Header, SideBar } from "./CustomSideBar/CustomSideBar";
+
 function CustomNavBar() {
+  const [sidebarOpen, setSideBarOpen] = useState(false);
+  const handleViewSidebar = () => {
+    setSideBarOpen(!sidebarOpen);
+  };
+
   return (
-    <Navbar bg="light" expand="lg" className={styles.navbar}>
-      <Container className={styles.navbarContainer}>
+    <>
+      <SideBar isOpen={sidebarOpen} toggleSidebar={handleViewSidebar} />
+    </>
+    // <Navbar bg="light" expand="lg" className={styles.navbar}>
+    //   <Container className={styles.navbarContainer}>
         
-        <Navbar.Collapse>
-          <Navbar.Brand as={NavLink} to="/">
-            Accessible Routes
-          </Navbar.Brand>
-          <img
-            width="45px"
-            height="40px"
-            alt="Accessible Routes logo"
-            src={require("./Logo.png")}
-          />
-          <Nav className="me-auto">
-            <Nav.Link as={NavLink} to="/" className={styles.navLink}>
-              Home
-            </Nav.Link>
-            <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
-              About
-            </Nav.Link>
-            <Nav.Link
-              as={NavLink}
-              to={CONFIG.report_issue_page_link}
-              className={styles.navLink}
-            >
-              Contact Us
-            </Nav.Link>
-          </Nav>
-        </Navbar.Collapse>
-        <Navbar.Toggle className="navbar-toggler">Toggle</Navbar.Toggle>
-      </Container>
-    </Navbar>
+    //     <Navbar.Collapse>
+    //       <Navbar.Brand as={NavLink} to="/">
+    //         Accessible Routes
+    //       </Navbar.Brand>
+    //       <img
+    //         width="45px"
+    //         height="40px"
+    //         alt="Accessible Routes logo"
+    //         src={require("./Logo.png")}
+    //       />
+    //       <Nav className="me-auto">
+    //         <Nav.Link as={NavLink} to="/" className={styles.navLink}>
+    //           Home
+    //         </Nav.Link>
+    //         <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
+    //           About
+    //         </Nav.Link>
+    //         <Nav.Link
+    //           as={NavLink}
+    //           to={CONFIG.report_issue_page_link}
+    //           className={styles.navLink}
+    //         >
+    //           Contact Us
+    //         </Nav.Link>
+    //       </Nav>
+    //     </Navbar.Collapse>
+    //     <Navbar.Toggle className="navbar-toggler">Toggle</Navbar.Toggle>
+    //   </Container>
+    // </Navbar>
   );
 }
 
diff --git a/Website/webb/src/common/components/CustomSideBar/CustomSideBar.js b/Website/webb/src/common/components/CustomSideBar/CustomSideBar.js
new file mode 100644
index 0000000..3efb61b
--- /dev/null
+++ b/Website/webb/src/common/components/CustomSideBar/CustomSideBar.js
@@ -0,0 +1,26 @@
+import React from "react";
+import "./styles.css";
+
+const SideBar = props => {
+  const sidebarClass = props.isOpen ? "sidebar open" : "sidebar";
+  return (
+    <div className={sidebarClass}>
+      <div> I slide into view </div>
+      <div> Me Too! </div>
+      <div> Me Three! </div>
+      <button onClick={props.toggleSidebar} className="sidebar-toggle">
+        Toggle Sidebar
+      </button>
+    </div>
+  );
+};
+
+const Header = props => {
+    return (
+      <header>
+        <button onClick={props.onClick}>Click Me!</button>
+      </header>
+    );
+  };
+
+export {Header, SideBar};
\ No newline at end of file
diff --git a/Website/webb/src/common/components/CustomSideBar/styles.css b/Website/webb/src/common/components/CustomSideBar/styles.css
new file mode 100644
index 0000000..7a230f3
--- /dev/null
+++ b/Website/webb/src/common/components/CustomSideBar/styles.css
@@ -0,0 +1,33 @@
+.sidebar {
+  position: absolute;
+  left: -15vw;
+  height: 100%;
+  width: 15vw;
+  transition: left 0.3s ease-in-out;
+  background-color: lightgray;
+  display: flex;
+}
+.sidebar-toggle {
+  position: absolute;
+  top: 20%;
+  right: -60px;
+  height: 60px;
+  width: 60px;
+  z-index: 1;
+}
+.content {
+  position: relative;
+  top: 60px;
+  left: 0;
+  right: 0;
+  height: 100%;
+  transition: left 0.3s ease-in-out;
+  background-color: lightgray;
+  z-index: -4;
+}
+.sidebar.open {
+  left: 0;
+}
+.content.open {
+  left: 15vw;
+}
diff --git a/Website/webb/src/pages/HomePage.js b/Website/webb/src/pages/HomePage.js
index 6dd511f..1bb0141 100644
--- a/Website/webb/src/pages/HomePage.js
+++ b/Website/webb/src/pages/HomePage.js
@@ -9,6 +9,8 @@ import Map from '../common/components/Map';
 import RouteStatusPanel from '../common/components/RouteStatusPanel.component';
 
 import CONFIG from '../config.json'
+import { Navbar } from 'react-bootstrap';
+import CustomNavBar from '../common/components/CustomNavBar.component';
 
 const HomePage = () => {
   // STATES
@@ -81,8 +83,11 @@ const HomePage = () => {
 
   // RENDERING
   return (
-    <div className="Home Page">
+    <div className="Page">
+      <CustomNavBar className="CustomBar"/>
+      
       <Map
+        className="Map"
         routeCordList={routeCordList}
         buildingLocations={buildingLocations} 
         stairCordList={stairCordList}
@@ -100,13 +105,13 @@ const HomePage = () => {
           setSelectedBuilding={setDestinationBuilding} />
         <Button title={"find route"} onPressIn={requestRoute} />
         <RouteStatusPanel displayPanel={displayingRoute} foundRoute={foundRoute} startingBuilding={startingBuilding} destinationBuilding={destinationBuilding} />
-        {/* TODO: replace with component: */}
+        
         {CONFIG.visible_display_stairs_option==="y" ? <FormControlLabel control={
         <Switch 
           onClick={() => {setDisplayStairCords(!displayStairCords)}}
         />} label="Display Stairs" /> : <></>}
         
-      </div>
+        </div>
     </div>
   );
 }
diff --git a/Website/webb/src/pages/page.css b/Website/webb/src/pages/page.css
index 07fd999..afa86be 100644
--- a/Website/webb/src/pages/page.css
+++ b/Website/webb/src/pages/page.css
@@ -9,16 +9,21 @@
   color: white;
 }
 
+.CustomBar {
+  width: 90%;
+  position: relative;
+  right: 50%;
+}
 
 .Page {
-  display: flex;  
+  display: flex;
+  flex-direction: row-reverse;
 }
 
 .MyMap {
   position: static;
 }
 
-
 .search-building-panel {
   width: 30%;
   border: 2px solid #c6c6c6;
@@ -28,4 +33,4 @@
   align-items: center;
   flex-direction: column;
   gap: 1rem;
-}
\ No newline at end of file
+}

From f23803e1dee01eee9a440bcac4b496e238af1742 Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Fri, 22 Mar 2024 17:34:45 -0400
Subject: [PATCH 05/14] added div sidebar

---
 Website/webb/src/pages/HomePage.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/Website/webb/src/pages/HomePage.js b/Website/webb/src/pages/HomePage.js
index 1bb0141..491bb24 100644
--- a/Website/webb/src/pages/HomePage.js
+++ b/Website/webb/src/pages/HomePage.js
@@ -84,7 +84,10 @@ const HomePage = () => {
   // RENDERING
   return (
     <div className="Page">
-      <CustomNavBar className="CustomBar"/>
+      <div>
+        <CustomNavBar className="CustomBar"/>
+      </div>
+      
       
       <Map
         className="Map"

From 1d0ac039b56637dcb03059d7bdf98af35e600a2b Mon Sep 17 00:00:00 2001
From: bcritika <58982008+bcritika@users.noreply.github.com>
Date: Fri, 22 Mar 2024 17:39:41 -0400
Subject: [PATCH 06/14] moved the search panel to the top

---
 Website/webb/src/pages/page.css | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/Website/webb/src/pages/page.css b/Website/webb/src/pages/page.css
index afa86be..c952945 100644
--- a/Website/webb/src/pages/page.css
+++ b/Website/webb/src/pages/page.css
@@ -9,28 +9,25 @@
   color: white;
 }
 
-.CustomBar {
-  width: 90%;
-  position: relative;
-  right: 50%;
-}
 
 .Page {
-  display: flex;
-  flex-direction: row-reverse;
+  display: flex;  
+  flex-direction: column-reverse;
 }
 
 .MyMap {
   position: static;
 }
 
+
 .search-building-panel {
-  width: 30%;
+  width: 100%;
+  
   border: 2px solid #c6c6c6;
   border-bottom-left-radius: 80px 80px;
   display: flex;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
-  flex-direction: column;
-  gap: 1rem;
-}
+  flex-direction: row;
+  gap: 2rem;
+}
\ No newline at end of file

From 46f905958233597d27ee6ae323a50ad57d4e0c3c Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Fri, 29 Mar 2024 17:30:53 -0400
Subject: [PATCH 07/14] some fixing of styling

---
 .../components/CustomNavBar.component.js      | 69 ++++++++++---------
 .../components/CustomSideBar/CustomSideBar.js |  8 +--
 Website/webb/src/common/components/Map.js     |  3 +-
 .../src/common/components/NavBar.module.css   |  1 -
 Website/webb/src/pages/HomePage.js            | 40 +++++++----
 Website/webb/src/pages/page.css               | 18 +++--
 6 files changed, 78 insertions(+), 61 deletions(-)

diff --git a/Website/webb/src/common/components/CustomNavBar.component.js b/Website/webb/src/common/components/CustomNavBar.component.js
index 43d6566..ea9ebd1 100644
--- a/Website/webb/src/common/components/CustomNavBar.component.js
+++ b/Website/webb/src/common/components/CustomNavBar.component.js
@@ -15,41 +15,42 @@ function CustomNavBar() {
   };
 
   return (
-    <>
-      <SideBar isOpen={sidebarOpen} toggleSidebar={handleViewSidebar} />
-    </>
-    // <Navbar bg="light" expand="lg" className={styles.navbar}>
-    //   <Container className={styles.navbarContainer}>
+    // <>
+    //   <div style={{flex:1}}>HEY OVE RHERE</div>
+    //   <SideBar isOpen={sidebarOpen} toggleSidebar={handleViewSidebar} />
+    // </>
+    <Navbar bg="light" expand="lg" className={styles.navbar}>
+      <Container className={styles.navbarContainer}>
         
-    //     <Navbar.Collapse>
-    //       <Navbar.Brand as={NavLink} to="/">
-    //         Accessible Routes
-    //       </Navbar.Brand>
-    //       <img
-    //         width="45px"
-    //         height="40px"
-    //         alt="Accessible Routes logo"
-    //         src={require("./Logo.png")}
-    //       />
-    //       <Nav className="me-auto">
-    //         <Nav.Link as={NavLink} to="/" className={styles.navLink}>
-    //           Home
-    //         </Nav.Link>
-    //         <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
-    //           About
-    //         </Nav.Link>
-    //         <Nav.Link
-    //           as={NavLink}
-    //           to={CONFIG.report_issue_page_link}
-    //           className={styles.navLink}
-    //         >
-    //           Contact Us
-    //         </Nav.Link>
-    //       </Nav>
-    //     </Navbar.Collapse>
-    //     <Navbar.Toggle className="navbar-toggler">Toggle</Navbar.Toggle>
-    //   </Container>
-    // </Navbar>
+        <Navbar.Collapse>
+          <Navbar.Brand as={NavLink} to="/">
+            Accessible Routes
+          </Navbar.Brand>
+          <img
+            width="45px"
+            height="40px"
+            alt="Accessible Routes logo"
+            src={require("./Logo.png")}
+          />
+          <Nav className="me-auto">
+            <Nav.Link as={NavLink} to="/" className={styles.navLink}>
+              Home
+            </Nav.Link>
+            <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
+              About
+            </Nav.Link>
+            <Nav.Link
+              as={NavLink}
+              to={CONFIG.report_issue_page_link}
+              className={styles.navLink}
+            >
+              Contact Us
+            </Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
+        <Navbar.Toggle className="navbar-toggler flex-row ml-md-auto d-md-flex">Toggle</Navbar.Toggle>
+      </Container>
+    </Navbar>
   );
 }
 
diff --git a/Website/webb/src/common/components/CustomSideBar/CustomSideBar.js b/Website/webb/src/common/components/CustomSideBar/CustomSideBar.js
index 3efb61b..3337a69 100644
--- a/Website/webb/src/common/components/CustomSideBar/CustomSideBar.js
+++ b/Website/webb/src/common/components/CustomSideBar/CustomSideBar.js
@@ -1,13 +1,13 @@
 import React from "react";
 import "./styles.css";
+import { Link } from "react-router-dom";
 
 const SideBar = props => {
   const sidebarClass = props.isOpen ? "sidebar open" : "sidebar";
   return (
-    <div className={sidebarClass}>
-      <div> I slide into view </div>
-      <div> Me Too! </div>
-      <div> Me Three! </div>
+    <div className={sidebarClass} style={{flex:1}}>
+      <Link to="/about">About</Link>
+      
       <button onClick={props.toggleSidebar} className="sidebar-toggle">
         Toggle Sidebar
       </button>
diff --git a/Website/webb/src/common/components/Map.js b/Website/webb/src/common/components/Map.js
index 8dd014c..9f52968 100644
--- a/Website/webb/src/common/components/Map.js
+++ b/Website/webb/src/common/components/Map.js
@@ -16,10 +16,11 @@ const Map = ({ buildingLocations, routeCordList, stairCordList, displayStairCord
     }
 
     return (
-        <MapContainer center={campus_center} zoom={17} style={{ width: "100%", height: "100vh" }}>
+        <MapContainer center={campus_center} zoom={17} style={{width:'100%', height: "100vh"}}>
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                 url="https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png"
+            
             />
 
             {/* Draw buildings */
diff --git a/Website/webb/src/common/components/NavBar.module.css b/Website/webb/src/common/components/NavBar.module.css
index fe4c3f6..103e5f9 100644
--- a/Website/webb/src/common/components/NavBar.module.css
+++ b/Website/webb/src/common/components/NavBar.module.css
@@ -12,7 +12,6 @@
 
 .navbar-toggler {
   border: #ff0000;
-  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/2048px-Hamburger_icon.svg.png");
 }
 
 .navLink {
diff --git a/Website/webb/src/pages/HomePage.js b/Website/webb/src/pages/HomePage.js
index 491bb24..56c2bc4 100644
--- a/Website/webb/src/pages/HomePage.js
+++ b/Website/webb/src/pages/HomePage.js
@@ -83,21 +83,16 @@ const HomePage = () => {
 
   // RENDERING
   return (
-    <div className="Page">
-      <div>
-        <CustomNavBar className="CustomBar"/>
-      </div>
+    <div style={{display:'flex', flexDirection:'row'}}>
+    
+      <CustomNavBar></CustomNavBar>
       
+
+      <div style={{flex:9, display:'flex', flexDirection:'column'}}>
       
-      <Map
-        className="Map"
-        routeCordList={routeCordList}
-        buildingLocations={buildingLocations} 
-        stairCordList={stairCordList}
-        displayStairCords={displayStairCords}
-        />
-      <div className="search-building-panel" >
-        <p class="h4">Find Route</p>
+      <div style={{display:'flex', flexDirection:'column'}}>
+        <p class="h4" style={{flex:1}}>Find Route</p>
+        <div style={{flex:1,display:'flex'}}>
         <BuildingDropdown
           place_holder_text={'select starting building'}
           building_options={allBuildings}
@@ -108,14 +103,31 @@ const HomePage = () => {
           setSelectedBuilding={setDestinationBuilding} />
         <Button title={"find route"} onPressIn={requestRoute} />
         <RouteStatusPanel displayPanel={displayingRoute} foundRoute={foundRoute} startingBuilding={startingBuilding} destinationBuilding={destinationBuilding} />
+        </div>
+        
         
         {CONFIG.visible_display_stairs_option==="y" ? <FormControlLabel control={
         <Switch 
           onClick={() => {setDisplayStairCords(!displayStairCords)}}
         />} label="Display Stairs" /> : <></>}
         
-        </div>
+      </div>
+
+    <div style={{flex:1}}>
+      <Map
+        routeCordList={routeCordList}
+        buildingLocations={buildingLocations}
+        stairCordList={stairCordList}
+        displayStairCords={displayStairCords}
+        />
+      
+        
+    </div>
+    
+    </div>
+
     </div>
+    
   );
 }
 
diff --git a/Website/webb/src/pages/page.css b/Website/webb/src/pages/page.css
index c952945..8fbabfa 100644
--- a/Website/webb/src/pages/page.css
+++ b/Website/webb/src/pages/page.css
@@ -9,25 +9,29 @@
   color: white;
 }
 
+.CustomBar {
+  width: 90%;
+  position: relative;
+  right: 50%;
+}
 
 .Page {
-  display: flex;  
+  display: flex;
   flex-direction: column-reverse;
 }
 
 .MyMap {
-  position: static;
+  position: relative;
+  width: 50%;
 }
 
-
 .search-building-panel {
   width: 100%;
-  
+
   border: 2px solid #c6c6c6;
   border-bottom-left-radius: 80px 80px;
-  display: flex;
   justify-content: center;
   align-items: center;
-  flex-direction: row;
   gap: 2rem;
-}
\ No newline at end of file
+  flex: 1;
+}

From bd778a39dbef0edf6b8dd5ebaa18b34fbee6acdd Mon Sep 17 00:00:00 2001
From: bcritika <58982008+bcritika@users.noreply.github.com>
Date: Fri, 29 Mar 2024 17:48:01 -0400
Subject: [PATCH 08/14] played around with fixing dropdown

---
 .../common/components/BuildingDropdown.component.js | 13 ++++++++++++-
 Website/webb/src/pages/page.css                     |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/Website/webb/src/common/components/BuildingDropdown.component.js b/Website/webb/src/common/components/BuildingDropdown.component.js
index 9633b53..ed55c92 100644
--- a/Website/webb/src/common/components/BuildingDropdown.component.js
+++ b/Website/webb/src/common/components/BuildingDropdown.component.js
@@ -7,14 +7,25 @@ const BuildingDropdown = ({ place_holder_text, building_options, setSelectedBuil
     setSelectedBuilding(selectedOption)
   }
 
+  // const customStyles = {
+  //   control: (provided, state) => ({
+  //     flex: 1, 
+  //     position: 'absolute',
+  //     ...provided, // Spread provided styles to retain default styles
+  //   }),
+  // };
+
+
   return (
     <div id={place_holder_text}>
       <Select
-        menuPortalTarget={document.body}
+        //menuPortalTarget={document.body}
+
         menuPosition={'fixed'}
         placeholder={place_holder_text}
         onChange={handleChange}
         options={building_options} />
+        {/* styles={customStyles}  */}
     </div>
   );
 }
diff --git a/Website/webb/src/pages/page.css b/Website/webb/src/pages/page.css
index c952945..aeb814b 100644
--- a/Website/webb/src/pages/page.css
+++ b/Website/webb/src/pages/page.css
@@ -28,6 +28,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow: visible;
   flex-direction: row;
   gap: 2rem;
 }
\ No newline at end of file

From d366eaaac6b853ae7998ff63116b6a853525f707 Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Tue, 2 Apr 2024 16:54:22 -0400
Subject: [PATCH 09/14] mid adjustments

---
 .../components/CustomNavBar.component.js      |  18 +-
 .../components/CustomSideBar/CustomSideBar.js |  26 ---
 .../components/CustomSideBar/styles.css       |  33 ----
 .../src/common/components/NavBar.module.css   |   7 +
 Website/webb/src/pages/HomePage.js            | 181 ++++++++++--------
 5 files changed, 117 insertions(+), 148 deletions(-)
 delete mode 100644 Website/webb/src/common/components/CustomSideBar/CustomSideBar.js
 delete mode 100644 Website/webb/src/common/components/CustomSideBar/styles.css

diff --git a/Website/webb/src/common/components/CustomNavBar.component.js b/Website/webb/src/common/components/CustomNavBar.component.js
index ea9ebd1..c1d1ab7 100644
--- a/Website/webb/src/common/components/CustomNavBar.component.js
+++ b/Website/webb/src/common/components/CustomNavBar.component.js
@@ -6,8 +6,6 @@ import CONFIG from "../../config.json";
 
 import styles from "./NavBar.module.css";
 
-import { Header, SideBar } from "./CustomSideBar/CustomSideBar";
-
 function CustomNavBar() {
   const [sidebarOpen, setSideBarOpen] = useState(false);
   const handleViewSidebar = () => {
@@ -15,14 +13,9 @@ function CustomNavBar() {
   };
 
   return (
-    // <>
-    //   <div style={{flex:1}}>HEY OVE RHERE</div>
-    //   <SideBar isOpen={sidebarOpen} toggleSidebar={handleViewSidebar} />
-    // </>
     <Navbar bg="light" expand="lg" className={styles.navbar}>
-      <Container className={styles.navbarContainer}>
-        
-        <Navbar.Collapse>
+      {sidebarOpen && (
+        <>
           <Navbar.Brand as={NavLink} to="/">
             Accessible Routes
           </Navbar.Brand>
@@ -47,9 +40,10 @@ function CustomNavBar() {
               Contact Us
             </Nav.Link>
           </Nav>
-        </Navbar.Collapse>
-        <Navbar.Toggle className="navbar-toggler flex-row ml-md-auto d-md-flex">Toggle</Navbar.Toggle>
-      </Container>
+        </>
+      )}
+
+      <button onClick={() => setSideBarOpen(!sidebarOpen)}></button>
     </Navbar>
   );
 }
diff --git a/Website/webb/src/common/components/CustomSideBar/CustomSideBar.js b/Website/webb/src/common/components/CustomSideBar/CustomSideBar.js
deleted file mode 100644
index 3337a69..0000000
--- a/Website/webb/src/common/components/CustomSideBar/CustomSideBar.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-import "./styles.css";
-import { Link } from "react-router-dom";
-
-const SideBar = props => {
-  const sidebarClass = props.isOpen ? "sidebar open" : "sidebar";
-  return (
-    <div className={sidebarClass} style={{flex:1}}>
-      <Link to="/about">About</Link>
-      
-      <button onClick={props.toggleSidebar} className="sidebar-toggle">
-        Toggle Sidebar
-      </button>
-    </div>
-  );
-};
-
-const Header = props => {
-    return (
-      <header>
-        <button onClick={props.onClick}>Click Me!</button>
-      </header>
-    );
-  };
-
-export {Header, SideBar};
\ No newline at end of file
diff --git a/Website/webb/src/common/components/CustomSideBar/styles.css b/Website/webb/src/common/components/CustomSideBar/styles.css
deleted file mode 100644
index 7a230f3..0000000
--- a/Website/webb/src/common/components/CustomSideBar/styles.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.sidebar {
-  position: absolute;
-  left: -15vw;
-  height: 100%;
-  width: 15vw;
-  transition: left 0.3s ease-in-out;
-  background-color: lightgray;
-  display: flex;
-}
-.sidebar-toggle {
-  position: absolute;
-  top: 20%;
-  right: -60px;
-  height: 60px;
-  width: 60px;
-  z-index: 1;
-}
-.content {
-  position: relative;
-  top: 60px;
-  left: 0;
-  right: 0;
-  height: 100%;
-  transition: left 0.3s ease-in-out;
-  background-color: lightgray;
-  z-index: -4;
-}
-.sidebar.open {
-  left: 0;
-}
-.content.open {
-  left: 15vw;
-}
diff --git a/Website/webb/src/common/components/NavBar.module.css b/Website/webb/src/common/components/NavBar.module.css
index 103e5f9..042c447 100644
--- a/Website/webb/src/common/components/NavBar.module.css
+++ b/Website/webb/src/common/components/NavBar.module.css
@@ -8,10 +8,13 @@
   margin-bottom: 0px;
   border: 2px solid #2397e9;
   border-radius: 0%;
+  display: flex;
+  flex-direction: column;
 }
 
 .navbar-toggler {
   border: #ff0000;
+  top: 100px;
 }
 
 .navLink {
@@ -37,3 +40,7 @@
   justify-content: flex-start;
   flex-direction: column;
 }
+
+button {
+  color: red;
+}
diff --git a/Website/webb/src/pages/HomePage.js b/Website/webb/src/pages/HomePage.js
index 56c2bc4..abcf895 100644
--- a/Website/webb/src/pages/HomePage.js
+++ b/Website/webb/src/pages/HomePage.js
@@ -1,16 +1,20 @@
-import './page.css';
-import { React, useState, useEffect } from 'react';
-import Button from '../common/components/Button.component';
-import Switch from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import BuildingDropdown from '../common/components/BuildingDropdown.component';
-import { requestAllBuildings, ParseLocationsAndRoute, parseArtifacts } from '../helpers/requestHelper';
-import Map from '../common/components/Map';
-import RouteStatusPanel from '../common/components/RouteStatusPanel.component';
-
-import CONFIG from '../config.json'
-import { Navbar } from 'react-bootstrap';
-import CustomNavBar from '../common/components/CustomNavBar.component';
+import "./page.css";
+import { React, useState, useEffect } from "react";
+import Button from "../common/components/Button.component";
+import Switch from "@mui/material/Switch";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import BuildingDropdown from "../common/components/BuildingDropdown.component";
+import {
+  requestAllBuildings,
+  ParseLocationsAndRoute,
+  parseArtifacts,
+} from "../helpers/requestHelper";
+import Map from "../common/components/Map";
+import RouteStatusPanel from "../common/components/RouteStatusPanel.component";
+
+import CONFIG from "../config.json";
+import { Navbar } from "react-bootstrap";
+import CustomNavBar from "../common/components/CustomNavBar.component";
 
 const HomePage = () => {
   // STATES
@@ -37,98 +41,121 @@ const HomePage = () => {
 
     // gather the name and UID of all the buildings from the backend
     requestAllBuildings(setAllBuildings).catch((err) => {
-      console.log('An error occurred. please contact developers and inform them of the following:');
-      console.log('site could not not retrieve all buildings from back-end.');
-      console.log('failed with the following error:');
-      console.log(err)
-    })
+      console.log(
+        "An error occurred. please contact developers and inform them of the following:"
+      );
+      console.log("site could not not retrieve all buildings from back-end.");
+      console.log("failed with the following error:");
+      console.log(err);
+    });
 
     // gather the location of all of the artifacts from the backend
     parseArtifacts(setStairCordList).catch((err) => {
-      console.log('An error occurred. please contact developers and inform them of the following:');
-      console.log('site could not not retrieve all stair locations from back-end.');
-      console.log('failed with the following error:');
-      console.log(err)
-    })
+      console.log(
+        "An error occurred. please contact developers and inform them of the following:"
+      );
+      console.log(
+        "site could not not retrieve all stair locations from back-end."
+      );
+      console.log("failed with the following error:");
+      console.log(err);
+    });
   }, []);
 
-
   const requestRoute = async () => {
-    const { buildings, route_details, route_found, error_found } = await ParseLocationsAndRoute(startingBuilding, destinationBuilding).catch((err) => { console.log('in the home page, the response from ParseLocationsAndRoute is: ', err) })
+    const { buildings, route_details, route_found, error_found } =
+      await ParseLocationsAndRoute(startingBuilding, destinationBuilding).catch(
+        (err) => {
+          console.log(
+            "in the home page, the response from ParseLocationsAndRoute is: ",
+            err
+          );
+        }
+      );
 
     if (!error_found) {
       if (route_found) {
-        setBuildingLocations(buildings)
-        setRouteCordList(route_details)
-        setFoundRoute(true)
+        setBuildingLocations(buildings);
+        setRouteCordList(route_details);
+        setFoundRoute(true);
       } else {
         // if there is not path route available, clear all markers and routes on map
-        setBuildingLocations([])
-        setRouteCordList([])
+        setBuildingLocations([]);
+        setRouteCordList([]);
         // display message to user that there was no route found between the buildings
       }
     }
 
     // inform user if no route was found
     if (error_found || route_found === false || !route_details?.length) {
-      setBuildingLocations([])
-      setRouteCordList([])
-      setFoundRoute(false)
+      setBuildingLocations([]);
+      setRouteCordList([]);
+      setFoundRoute(false);
     }
 
     // after a route has been selected, display the route status
     setDisplayingRoute(true);
-  }
-
+  };
 
   // RENDERING
   return (
-    <div style={{display:'flex', flexDirection:'row'}}>
-    
-      <CustomNavBar></CustomNavBar>
-      
-
-      <div style={{flex:9, display:'flex', flexDirection:'column'}}>
-      
-      <div style={{display:'flex', flexDirection:'column'}}>
-        <p class="h4" style={{flex:1}}>Find Route</p>
-        <div style={{flex:1,display:'flex'}}>
-        <BuildingDropdown
-          place_holder_text={'select starting building'}
-          building_options={allBuildings}
-          setSelectedBuilding={setStartingBuilding} />
-        <BuildingDropdown
-          place_holder_text={'select ending building'}
-          building_options={allBuildings}
-          setSelectedBuilding={setDestinationBuilding} />
-        <Button title={"find route"} onPressIn={requestRoute} />
-        <RouteStatusPanel displayPanel={displayingRoute} foundRoute={foundRoute} startingBuilding={startingBuilding} destinationBuilding={destinationBuilding} />
-        </div>
-        
-        
-        {CONFIG.visible_display_stairs_option==="y" ? <FormControlLabel control={
-        <Switch 
-          onClick={() => {setDisplayStairCords(!displayStairCords)}}
-        />} label="Display Stairs" /> : <></>}
-        
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      <div style={{ flex: 1 }}>
+        <CustomNavBar></CustomNavBar>
       </div>
 
-    <div style={{flex:1}}>
-      <Map
-        routeCordList={routeCordList}
-        buildingLocations={buildingLocations}
-        stairCordList={stairCordList}
-        displayStairCords={displayStairCords}
-        />
-      
-        
-    </div>
-    
-    </div>
+      <div style={{ flex: 8, display: "flex", flexDirection: "column" }}>
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <p class="h4" style={{ flex: 1 }}>
+            Find Route
+          </p>
+          <div style={{ flex: 1, display: "flex" }}>
+            <BuildingDropdown
+              place_holder_text={"select starting building"}
+              building_options={allBuildings}
+              setSelectedBuilding={setStartingBuilding}
+            />
+            <BuildingDropdown
+              place_holder_text={"select ending building"}
+              building_options={allBuildings}
+              setSelectedBuilding={setDestinationBuilding}
+            />
+            <Button title={"find route"} onPressIn={requestRoute} />
+            <RouteStatusPanel
+              displayPanel={displayingRoute}
+              foundRoute={foundRoute}
+              startingBuilding={startingBuilding}
+              destinationBuilding={destinationBuilding}
+            />
+          </div>
+
+          {CONFIG.visible_display_stairs_option === "y" ? (
+            <FormControlLabel
+              control={
+                <Switch
+                  onClick={() => {
+                    setDisplayStairCords(!displayStairCords);
+                  }}
+                />
+              }
+              label="Display Stairs"
+            />
+          ) : (
+            <></>
+          )}
+        </div>
 
+        <div style={{ flex: 1 }}>
+          <Map
+            routeCordList={routeCordList}
+            buildingLocations={buildingLocations}
+            stairCordList={stairCordList}
+            displayStairCords={displayStairCords}
+          />
+        </div>
+      </div>
     </div>
-    
   );
-}
+};
 
 export default HomePage;

From bf741b03e77ffc0606f339e4bd42ce0ab021bf83 Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Tue, 2 Apr 2024 17:50:06 -0400
Subject: [PATCH 10/14] Toggle button functional

---
 Website/webb/src/App.js                       |   2 +-
 .../{common/components => assets}/Logo.png    | Bin
 .../components/CustomNavBar.component.js      |  51 --------------
 .../{ => Navbars}/NavBar.module.css           |   5 --
 .../components/Navbars/VerticalNavbar.js      |  64 ++++++++++++++++++
 Website/webb/src/pages/HomePage.js            |  15 ++--
 Website/webb/src/pages/about.js               |   2 +-
 Website/webb/src/pages/page.css               |   9 +++
 8 files changed, 86 insertions(+), 62 deletions(-)
 rename Website/webb/src/{common/components => assets}/Logo.png (100%)
 delete mode 100644 Website/webb/src/common/components/CustomNavBar.component.js
 rename Website/webb/src/common/components/{ => Navbars}/NavBar.module.css (93%)
 create mode 100644 Website/webb/src/common/components/Navbars/VerticalNavbar.js

diff --git a/Website/webb/src/App.js b/Website/webb/src/App.js
index 1e9ca36..4ee8be0 100644
--- a/Website/webb/src/App.js
+++ b/Website/webb/src/App.js
@@ -1,6 +1,6 @@
 import { React } from 'react';
 import 'react-awesome-button/dist/styles.css';
-import CustomNavBar from './common/components/CustomNavBar.component.js';
+import CustomNavBar from './common/components/Navbars/VerticalNavbar.js';
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import HomePage from "./pages/HomePage.js";
 import About from "./pages/about.js";
diff --git a/Website/webb/src/common/components/Logo.png b/Website/webb/src/assets/Logo.png
similarity index 100%
rename from Website/webb/src/common/components/Logo.png
rename to Website/webb/src/assets/Logo.png
diff --git a/Website/webb/src/common/components/CustomNavBar.component.js b/Website/webb/src/common/components/CustomNavBar.component.js
deleted file mode 100644
index c1d1ab7..0000000
--- a/Website/webb/src/common/components/CustomNavBar.component.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import { useState } from "react";
-import { Navbar, Nav, Container } from "react-bootstrap";
-import { NavLink } from "react-router-dom";
-import CONFIG from "../../config.json";
-
-import styles from "./NavBar.module.css";
-
-function CustomNavBar() {
-  const [sidebarOpen, setSideBarOpen] = useState(false);
-  const handleViewSidebar = () => {
-    setSideBarOpen(!sidebarOpen);
-  };
-
-  return (
-    <Navbar bg="light" expand="lg" className={styles.navbar}>
-      {sidebarOpen && (
-        <>
-          <Navbar.Brand as={NavLink} to="/">
-            Accessible Routes
-          </Navbar.Brand>
-          <img
-            width="45px"
-            height="40px"
-            alt="Accessible Routes logo"
-            src={require("./Logo.png")}
-          />
-          <Nav className="me-auto">
-            <Nav.Link as={NavLink} to="/" className={styles.navLink}>
-              Home
-            </Nav.Link>
-            <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
-              About
-            </Nav.Link>
-            <Nav.Link
-              as={NavLink}
-              to={CONFIG.report_issue_page_link}
-              className={styles.navLink}
-            >
-              Contact Us
-            </Nav.Link>
-          </Nav>
-        </>
-      )}
-
-      <button onClick={() => setSideBarOpen(!sidebarOpen)}></button>
-    </Navbar>
-  );
-}
-
-export default CustomNavBar;
diff --git a/Website/webb/src/common/components/NavBar.module.css b/Website/webb/src/common/components/Navbars/NavBar.module.css
similarity index 93%
rename from Website/webb/src/common/components/NavBar.module.css
rename to Website/webb/src/common/components/Navbars/NavBar.module.css
index 042c447..3bc4060 100644
--- a/Website/webb/src/common/components/NavBar.module.css
+++ b/Website/webb/src/common/components/Navbars/NavBar.module.css
@@ -6,7 +6,6 @@
   text-align: center;
   align-items: center;
   margin-bottom: 0px;
-  border: 2px solid #2397e9;
   border-radius: 0%;
   display: flex;
   flex-direction: column;
@@ -40,7 +39,3 @@
   justify-content: flex-start;
   flex-direction: column;
 }
-
-button {
-  color: red;
-}
diff --git a/Website/webb/src/common/components/Navbars/VerticalNavbar.js b/Website/webb/src/common/components/Navbars/VerticalNavbar.js
new file mode 100644
index 0000000..e306bad
--- /dev/null
+++ b/Website/webb/src/common/components/Navbars/VerticalNavbar.js
@@ -0,0 +1,64 @@
+import React from "react";
+import { useState } from "react";
+import { Navbar, Nav, Container } from "react-bootstrap";
+import { NavLink } from "react-router-dom";
+import CONFIG from "../../../config.json";
+
+import styles from "./NavBar.module.css";
+import { flexbox } from "@mui/system";
+
+function CustomNavBar({ toggle }) {
+  const [sidebarOpen, setSideBarOpen] = useState(toggle);
+  const handleViewSidebar = () => {
+    setSideBarOpen(!sidebarOpen);
+  };
+
+  return (
+    <Navbar bg="light" expand="lg" className={styles.navbar}>
+      {sidebarOpen && (
+        <>
+          <Navbar.Brand as={NavLink} to="/">
+            Accessible Routes
+          </Navbar.Brand>
+          <img
+            width="45px"
+            height="40px"
+            alt="Accessible Routes logo"
+            src={require("../../../assets/Logo.png")}
+          />
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              flexWrap: "nowrap",
+              justifyContent: "space-between",
+
+            }}
+          >
+            <div style={{ flex: 1 }}>
+              <Nav.Link as={NavLink} to="/" className={styles.navLink}>
+                Home
+              </Nav.Link>
+            </div>
+            <div style={{ flex: 1 }}>
+              <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
+                About
+              </Nav.Link>
+            </div>
+            <div style={{ flex: 1 }}>
+              <Nav.Link
+                as={NavLink}
+                to={CONFIG.report_issue_page_link}
+                className={styles.navLink}
+              >
+                Contact Us
+              </Nav.Link>
+            </div>
+          </div>
+        </>
+      )}
+    </Navbar>
+  );
+}
+
+export default CustomNavBar;
diff --git a/Website/webb/src/pages/HomePage.js b/Website/webb/src/pages/HomePage.js
index abcf895..a9b78df 100644
--- a/Website/webb/src/pages/HomePage.js
+++ b/Website/webb/src/pages/HomePage.js
@@ -14,7 +14,7 @@ import RouteStatusPanel from "../common/components/RouteStatusPanel.component";
 
 import CONFIG from "../config.json";
 import { Navbar } from "react-bootstrap";
-import CustomNavBar from "../common/components/CustomNavBar.component";
+import CustomNavBar from "../common/components/Navbars/VerticalNavbar";
 
 const HomePage = () => {
   // STATES
@@ -35,6 +35,8 @@ const HomePage = () => {
   const [displayingRoute, setDisplayingRoute] = useState(false);
   const [foundRoute, setFoundRoute] = useState(false);
 
+  const [toggle, setToggle] = useState(false);
+
   // EFFECTS
   useEffect(() => {
     // on mount
@@ -100,9 +102,14 @@ const HomePage = () => {
   // RENDERING
   return (
     <div style={{ display: "flex", flexDirection: "row" }}>
-      <div style={{ flex: 1 }}>
-        <CustomNavBar></CustomNavBar>
-      </div>
+
+      <button className = {'toggleButton'} onClick={() => setToggle(!toggle)}>{toggle ? "<" : ">"}</button>
+      {
+        toggle && (<div style={{ flex: 1 }}>
+          <CustomNavBar toggle={toggle}></CustomNavBar>
+        </div>
+        )}
+      
 
       <div style={{ flex: 8, display: "flex", flexDirection: "column" }}>
         <div style={{ display: "flex", flexDirection: "column" }}>
diff --git a/Website/webb/src/pages/about.js b/Website/webb/src/pages/about.js
index d2a2af0..98eb91e 100644
--- a/Website/webb/src/pages/about.js
+++ b/Website/webb/src/pages/about.js
@@ -14,7 +14,7 @@ const About = () => {
       }}
     >
       <img
-        src={require('../common/components/Logo.png')}
+        src={require('../assets/Logo.png')}
         alt="Accessible Routes Logo"
         style={{ width: "300px", marginBottom: "20px" }} // Adjust width as needed
       />
diff --git a/Website/webb/src/pages/page.css b/Website/webb/src/pages/page.css
index d0ac8c6..0afe1d3 100644
--- a/Website/webb/src/pages/page.css
+++ b/Website/webb/src/pages/page.css
@@ -37,3 +37,12 @@
   gap: 2rem;
   flex: 1;
 }
+
+.toggleButton {
+  background-color: #aeccf1;
+  border: none;
+  color: white;
+  font-size: 40px;
+  width: 40px;
+  /* padding: 150px 32px; */
+}

From 46e0ae9e8a8799b7ba1174bd8441ebc7bb48c9b4 Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:01:07 -0400
Subject: [PATCH 11/14] separated vertical from horizontal bar

---
 .../Navbars/CustomNavBar.module.css           | 34 ++++++++++
 .../common/components/Navbars/CustomNavbar.js | 31 +++++++++
 ...r.module.css => VerticalNavBar.module.css} |  0
 .../components/Navbars/VerticalNavbar.js      | 13 ++--
 Website/webb/src/pages/about.js               | 65 ++++++++++++-------
 Website/webb/src/pages/page.css               |  1 -
 6 files changed, 114 insertions(+), 30 deletions(-)
 create mode 100644 Website/webb/src/common/components/Navbars/CustomNavBar.module.css
 create mode 100644 Website/webb/src/common/components/Navbars/CustomNavbar.js
 rename Website/webb/src/common/components/Navbars/{NavBar.module.css => VerticalNavBar.module.css} (100%)

diff --git a/Website/webb/src/common/components/Navbars/CustomNavBar.module.css b/Website/webb/src/common/components/Navbars/CustomNavBar.module.css
new file mode 100644
index 0000000..59f36f9
--- /dev/null
+++ b/Website/webb/src/common/components/Navbars/CustomNavBar.module.css
@@ -0,0 +1,34 @@
+/* NavBar.module.css */
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
+
+.navbar {
+  font-family: "Roboto", sans-serif;
+  text-align: center;
+  align-items: center;
+  margin-bottom: 0px;
+  border: 2px solid #2397e9;
+  border-radius: 0%;
+}
+
+.navLink {
+  color: #3f3b3b;
+  font-weight: 300;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  transition: color 0.3s, background-color 0.3s;
+  text-decoration: none;
+  border-radius: 5px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.navLink:hover {
+  background-color: #aeccf1;
+}
+
+.navbarContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: flex-start;
+}
diff --git a/Website/webb/src/common/components/Navbars/CustomNavbar.js b/Website/webb/src/common/components/Navbars/CustomNavbar.js
new file mode 100644
index 0000000..2c192bf
--- /dev/null
+++ b/Website/webb/src/common/components/Navbars/CustomNavbar.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Navbar, Nav, Container } from 'react-bootstrap';
+import { NavLink } from 'react-router-dom';
+import CONFIG from '../../../config.json'
+
+import styles from './CustomNavBar.module.css';
+
+function CustomNavBar() {
+  return (
+    <Navbar bg="light" expand="lg" className={styles.navbar}>
+      <Container className={styles.navbarContainer}>
+        <Navbar.Brand as={NavLink} to="/">Accessible Routes</Navbar.Brand>
+        <img width="45px" height="40px" alt="Accessible Routes logo" src={require('../../../assets/Logo.png')} />
+          <Nav className="me-auto">
+            <Nav.Link as={NavLink} to="/" className={styles.navLink}>
+              Home
+            </Nav.Link>
+            <Nav.Link as={NavLink} to="/about" className={styles.navLink}>
+              About
+            </Nav.Link>
+            <Nav.Link as={NavLink} to={CONFIG.report_issue_page_link} className={styles.navLink}>
+              Contact Us
+            </Nav.Link>
+          </Nav>
+        
+      </Container>
+    </Navbar>
+  );
+}
+
+export default CustomNavBar;
\ No newline at end of file
diff --git a/Website/webb/src/common/components/Navbars/NavBar.module.css b/Website/webb/src/common/components/Navbars/VerticalNavBar.module.css
similarity index 100%
rename from Website/webb/src/common/components/Navbars/NavBar.module.css
rename to Website/webb/src/common/components/Navbars/VerticalNavBar.module.css
diff --git a/Website/webb/src/common/components/Navbars/VerticalNavbar.js b/Website/webb/src/common/components/Navbars/VerticalNavbar.js
index e306bad..f9ca19d 100644
--- a/Website/webb/src/common/components/Navbars/VerticalNavbar.js
+++ b/Website/webb/src/common/components/Navbars/VerticalNavbar.js
@@ -4,10 +4,10 @@ import { Navbar, Nav, Container } from "react-bootstrap";
 import { NavLink } from "react-router-dom";
 import CONFIG from "../../../config.json";
 
-import styles from "./NavBar.module.css";
+import styles from "./VerticalNavBar.module.css";
 import { flexbox } from "@mui/system";
 
-function CustomNavBar({ toggle }) {
+function VerticalNavBar({ toggle }) {
   const [sidebarOpen, setSideBarOpen] = useState(toggle);
   const handleViewSidebar = () => {
     setSideBarOpen(!sidebarOpen);
@@ -17,6 +17,7 @@ function CustomNavBar({ toggle }) {
     <Navbar bg="light" expand="lg" className={styles.navbar}>
       {sidebarOpen && (
         <>
+          <div>
           <Navbar.Brand as={NavLink} to="/">
             Accessible Routes
           </Navbar.Brand>
@@ -26,12 +27,14 @@ function CustomNavBar({ toggle }) {
             alt="Accessible Routes logo"
             src={require("../../../assets/Logo.png")}
           />
+          </div>
+          
           <div
             style={{
               display: "flex",
               flexDirection: "column",
-              flexWrap: "nowrap",
-              justifyContent: "space-between",
+              
+              justifyContent:"space-around"
 
             }}
           >
@@ -61,4 +64,4 @@ function CustomNavBar({ toggle }) {
   );
 }
 
-export default CustomNavBar;
+export default VerticalNavBar;
diff --git a/Website/webb/src/pages/about.js b/Website/webb/src/pages/about.js
index 98eb91e..aa4bc62 100644
--- a/Website/webb/src/pages/about.js
+++ b/Website/webb/src/pages/about.js
@@ -1,32 +1,49 @@
 import React from "react";
+import CustomNavBar from "../common/components/Navbars/CustomNavbar";
 
 const About = () => {
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column", // Stack items vertically
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100vh",
-        padding: "0 20px", // Add padding for better readability
-        textAlign: "center", // Center-align text
-      }}
-    >
-      <img
-        src={require('../assets/Logo.png')}
-        alt="Accessible Routes Logo"
-        style={{ width: "300px", marginBottom: "20px" }} // Adjust width as needed
-      />
-      <div style={{ maxWidth: "600px", margin: "auto" }}> {/* Center content horizontally */}
-        <h1 style={{ fontSize: "24px", fontWeight: "bold", marginBottom: "20px" }}>
-          About Accessible Routes
-        </h1>
-        <p style={{ fontSize: "18px", lineHeight: "1.5" }}>
-          Accessible Routes was created during the summer semester of 2023 as a project in the Rensselaer Center for Open Source Software (RCOS). The goal of Accessible Routes is to help physically disabled students, staff, and faculty at RPI navigate our historic campus on a hill efficiently. This project would not be possible without the support of the Disabled Students at Rensselaer club (DSR).
-        </p>
+    <>
+      <CustomNavBar />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column", // Stack items vertically
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+          padding: "0 20px", // Add padding for better readability
+          textAlign: "center", // Center-align text
+        }}
+      >
+        <img
+          src={require("../assets/Logo.png")}
+          alt="Accessible Routes Logo"
+          style={{ width: "300px", marginBottom: "20px" }} // Adjust width as needed
+        />
+        <div style={{ maxWidth: "600px", margin: "auto" }}>
+          {" "}
+          {/* Center content horizontally */}
+          <h1
+            style={{
+              fontSize: "24px",
+              fontWeight: "bold",
+              marginBottom: "20px",
+            }}
+          >
+            About Accessible Routes
+          </h1>
+          <p style={{ fontSize: "18px", lineHeight: "1.5" }}>
+            Accessible Routes was created during the summer semester of 2023 as
+            a project in the Rensselaer Center for Open Source Software (RCOS).
+            The goal of Accessible Routes is to help physically disabled
+            students, staff, and faculty at RPI navigate our historic campus on
+            a hill efficiently. This project would not be possible without the
+            support of the Disabled Students at Rensselaer club (DSR).
+          </p>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/Website/webb/src/pages/page.css b/Website/webb/src/pages/page.css
index 0afe1d3..70c3220 100644
--- a/Website/webb/src/pages/page.css
+++ b/Website/webb/src/pages/page.css
@@ -44,5 +44,4 @@
   color: white;
   font-size: 40px;
   width: 40px;
-  /* padding: 150px 32px; */
 }

From 0b43e99f3a974c072414bf638281b1ae9633fd31 Mon Sep 17 00:00:00 2001
From: bcritika <58982008+bcritika@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:06:45 -0400
Subject: [PATCH 12/14] drop down now works

---
 .../components/BuildingDropdown.component.js  | 31 +++++++------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/Website/webb/src/common/components/BuildingDropdown.component.js b/Website/webb/src/common/components/BuildingDropdown.component.js
index ed55c92..b443adf 100644
--- a/Website/webb/src/common/components/BuildingDropdown.component.js
+++ b/Website/webb/src/common/components/BuildingDropdown.component.js
@@ -1,33 +1,26 @@
 import Select from 'react-select';
 
 const BuildingDropdown = ({ place_holder_text, building_options, setSelectedBuilding }) => {
-  // component for allowing a user to select a building from building options
-
   const handleChange = (selectedOption) => {
-    setSelectedBuilding(selectedOption)
-  }
-
-  // const customStyles = {
-  //   control: (provided, state) => ({
-  //     flex: 1, 
-  //     position: 'absolute',
-  //     ...provided, // Spread provided styles to retain default styles
-  //   }),
-  // };
-
+    setSelectedBuilding(selectedOption);
+  };
 
   return (
     <div id={place_holder_text}>
       <Select
-        //menuPortalTarget={document.body}
-
+        menuPortalTarget={document.body}
         menuPosition={'fixed'}
         placeholder={place_holder_text}
         onChange={handleChange}
-        options={building_options} />
-        {/* styles={customStyles}  */}
+        options={building_options}
+        styles={{
+          menuPortal: base => ({ ...base, zIndex: 9999 }), // Apply high z-index to the menu
+          menu: provided => ({ ...provided, zIndex: 9999 }), // Apply high z-index to the dropdown menu
+          option: provided => ({ ...provided, zIndex: 9999 }) // Apply high z-index to the dropdown options
+        }}
+      />
     </div>
   );
-}
+};
 
-export default BuildingDropdown;
\ No newline at end of file
+export default BuildingDropdown;

From c14be37c769a9f584875402df7811ccb9880787d Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:08:53 -0400
Subject: [PATCH 13/14] renamed components

---
 Website/webb/src/pages/HomePage.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/Website/webb/src/pages/HomePage.js b/Website/webb/src/pages/HomePage.js
index a9b78df..b3b5e59 100644
--- a/Website/webb/src/pages/HomePage.js
+++ b/Website/webb/src/pages/HomePage.js
@@ -13,8 +13,7 @@ import Map from "../common/components/Map";
 import RouteStatusPanel from "../common/components/RouteStatusPanel.component";
 
 import CONFIG from "../config.json";
-import { Navbar } from "react-bootstrap";
-import CustomNavBar from "../common/components/Navbars/VerticalNavbar";
+import VerticalNavBar from "../common/components/Navbars/VerticalNavbar";
 
 const HomePage = () => {
   // STATES
@@ -106,7 +105,7 @@ const HomePage = () => {
       <button className = {'toggleButton'} onClick={() => setToggle(!toggle)}>{toggle ? "<" : ">"}</button>
       {
         toggle && (<div style={{ flex: 1 }}>
-          <CustomNavBar toggle={toggle}></CustomNavBar>
+          <VerticalNavBar toggle={toggle}></VerticalNavBar>
         </div>
         )}
       

From f038ac4136e33a422bf05034de09e78424ed868f Mon Sep 17 00:00:00 2001
From: Tyler Du <35591950+Vicguin65@users.noreply.github.com>
Date: Fri, 5 Apr 2024 17:36:44 -0400
Subject: [PATCH 14/14] changed to percentage

---
 Website/webb/src/common/components/Navbars/VerticalNavbar.js | 5 +----
 Website/webb/src/pages/page.css                              | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/Website/webb/src/common/components/Navbars/VerticalNavbar.js b/Website/webb/src/common/components/Navbars/VerticalNavbar.js
index f9ca19d..b784812 100644
--- a/Website/webb/src/common/components/Navbars/VerticalNavbar.js
+++ b/Website/webb/src/common/components/Navbars/VerticalNavbar.js
@@ -9,10 +9,7 @@ import { flexbox } from "@mui/system";
 
 function VerticalNavBar({ toggle }) {
   const [sidebarOpen, setSideBarOpen] = useState(toggle);
-  const handleViewSidebar = () => {
-    setSideBarOpen(!sidebarOpen);
-  };
-
+  
   return (
     <Navbar bg="light" expand="lg" className={styles.navbar}>
       {sidebarOpen && (
diff --git a/Website/webb/src/pages/page.css b/Website/webb/src/pages/page.css
index 70c3220..16976f0 100644
--- a/Website/webb/src/pages/page.css
+++ b/Website/webb/src/pages/page.css
@@ -43,5 +43,5 @@
   border: none;
   color: white;
   font-size: 40px;
-  width: 40px;
+  width: 2.4%;
 }