17 make the website mobile friendly

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";
@@ -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 />} />

Website/webb/src/common/components/BuildingDropdown.component.js

@@ -1,11 +1,9 @@
 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)
-  }
+    setSelectedBuilding(selectedOption);
+  };
 
   return (
     <div id={place_holder_text}>
@@ -14,9 +12,15 @@ const BuildingDropdown = ({ place_holder_text, building_options, setSelectedBuil
         menuPosition={'fixed'}
         placeholder={place_holder_text}
         onChange={handleChange}
-        options={building_options} />
+        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;
+export default BuildingDropdown;

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 */

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;
+}

Website/webb/src/common/components/CustomNavBar.component.js → Website/webb/src/common/components/Navbars/CustomNavbar.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { Navbar, Nav, Container } from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
-import CONFIG from '../../config.json'
+import CONFIG from '../../../config.json'
 
-import styles from './NavBar.module.css';
+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('./Logo.png')} />
+        <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

Website/webb/src/common/components/Navbars/VerticalNavBar.module.css

@@ -0,0 +1,41 @@
+/* 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-radius: 0%;
+  display: flex;
+  flex-direction: column;
+}
+
+.navbar-toggler {
+  border: #ff0000;
+  top: 100px;
+}
+
+.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;
+  flex-direction: column;
+}

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 "./VerticalNavBar.module.css";
+import { flexbox } from "@mui/system";
+
+function VerticalNavBar({ toggle }) {
+  const [sidebarOpen, setSideBarOpen] = useState(toggle);
+
+  return (
+    <Navbar bg="light" expand="lg" className={styles.navbar}>
+      {sidebarOpen && (
+        <>
+          <div>
+          <Navbar.Brand as={NavLink} to="/">
+            Accessible Routes
+          </Navbar.Brand>
+          <img
+            width="45px"
+            height="40px"
+            alt="Accessible Routes logo"
+            src={require("../../../assets/Logo.png")}
+          />
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+
+              justifyContent:"space-around"
+
+            }}
+          >
+            <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 VerticalNavBar;