Nav dropdown mobile

client/src/App.css

@@ -48,7 +48,7 @@ li {
 }
 
 header {
-  position: sticky;
+  position: flex;
   top: 0;
   width: 100%;
   box-sizing: border-box;
@@ -61,12 +61,64 @@ header {
   z-index: 1000;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   gap: 10px;
 }
 
+header .title-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: auto;
+}
+
+header .title-logo {
+  height: 40px;
+  width: auto;
+}
+
+/* Dropdown container - hidden on desktop, shown on mobile */
+.dropmenu-container {
+  display: none;
+}
+
 @media (max-width: 1024px) {
   /* mobile mode*/
+  @import url('https://fonts.googleapis.com/css2?family=KoHo:wght@400;500;600;700;800&display=swap');
+
+  :root {
+    --header-color: #578FCA;
+  }
+
+  header {
+    position: fixed;
+    border-bottom-left-radius: 50px;
+    max-height: 60px;
+    justify-content: flex-start;
+    align-items: center;
+    z-index:1000;
+  }
+
+  header .title {
+    font-family: 'KoHo', sans-serif;
+    font-weight: 700;
+    /* font-size: 0.8em; */
+  }
+
+
+  header .title-containers {
+    margin-left: auto;
+  }
+
+  .dropdown-item a {
+    color: white;
+    text-decoration: none;
+    font-weight: 500;
+    display: block;
+    width: 100%;
+    padding: 0.5rem 1rem;
+    transition: color 0.2s ease, background-color 0.2s ease;
+  }
+
   .big {
     display: none;
   }
@@ -76,7 +128,33 @@ header {
   }
 
   footer {
-    border-radius: 20px 20px 0 0;
+    display: none;
+  }
+
+  .big footer {
+    display: none;
+  }
+
+
+  /* Show dropdown container on mobile */
+  .dropmenu-container {
+    display: block;
+    position: absolute;  /* Change from 'fixed' to 'absolute' */
+    top: 10px;
+    left: 10px;
+    z-index: 999;
+  }
+
+
+  .dropdown-content {
+    position: fixed;
+    top: 60px;
+    left: 10px;
+    z-index: 500;
+  }
+
+  .feedback-container{
+    display:none;
   }
 }
 
@@ -86,13 +164,18 @@ header {
 
 @media (min-width: 1024px) {
   /* desktop mode*/
+  .dropmenu-container {
+    display: none;
+  }
+
   .schedule {
     display: block;
   }
 
   footer {
     border-radius: 0;
   }
+
 }
 
 li a {
@@ -153,7 +236,6 @@ footer {
   margin: 0;
 }
 
-
 .banner a {
   color: #ffffff;
   text-decoration: underline;

client/src/components/Dropdown/Dropdown.css

@@ -0,0 +1,5 @@
+.dropdown {
+    position: relative;
+    display: inline-block;
+    z-index: 1001;  /* Add this */
+}

client/src/components/Dropdown/Dropdown.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import DropdownButton from "../DropdownButton/DropdownButton";
+import DropdownContent from "../DropdownContent/DropdownContent";
+import "./Dropdown.css";
+
+const Dropdown = ({ buttonText, content }) => {
+  const [open, setOpen] = useState(false);
+  const toggleDropdown = () => setOpen(!open);
+  const closeDropdown = () => setOpen(false);
+
+  return (
+    <div className="dropdown">
+      <DropdownButton toggle={toggleDropdown} open={open}>
+        {buttonText}
+      </DropdownButton>
+
+      <DropdownContent open={open}>
+        {/* ✅ Wrap the content with a click handler */}
+        <div
+          onClick={(e) => {
+            // only close when clicking a link, not when toggling dropdown
+            if (e.target.tagName === "A") {
+              closeDropdown();
+            }
+          }}
+        >
+          {content}
+        </div>
+      </DropdownContent>
+    </div>
+  );
+};
+
+export default Dropdown;

client/src/components/DropdownButton/DropdownButton.css

@@ -0,0 +1,40 @@
+/* .dropdown-btn{
+    display:flex;
+    align-items:center;
+    width:fit-content;
+    padding:1rem;
+    background-color:white;
+    border-radius: 0.5rem;
+    cursor:pointer;
+}
+
+.toggle-icon {
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    margin-left:1rem;
+}
+
+.button-open {
+    border: #578FCA 2px solid;
+
+} */
+
+.dropdownbtn {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  margin-top: -20px;
+  margin-left: 20px;
+  padding: 0.15rem;
+  background-color: #578FCA;
+  border: 2px solid transparent;   /* Always has same thickness */
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+  box-sizing: border-box;          /* Ensures borders don’t change size */
+}
+
+.button-open {
+  border-color: #578FCA;           /* Only the color changes */
+}

client/src/components/DropdownButton/DropdownButton.jsx

@@ -0,0 +1,20 @@
+import "./DropdownButton.css"
+// import {FaChevronDown} from "react-icons/fa"
+
+const DropdownButton = ({children, open, toggle}) => {
+    return (
+        <div onClick={toggle}
+        className={`dropdownbtn ${open ? 
+            "button-open":null}`}
+            >
+
+            {children}
+            <span className="toggle-icon">
+                {/* <FaChevronDown /> */}
+            </span>
+        </div>
+    )
+
+};
+
+export default DropdownButton; 

client/src/components/DropdownContent/DropdownContent.css

@@ -0,0 +1,39 @@
+.dropdown-content {
+position: fixed;  
+    top: 55px; 
+    left: 10px; 
+    z-index: 500; 
+    width: 220px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 1rem;
+    margin-top: 0.5rem;
+    background-color: #124170;
+    border-radius: 0.5rem;
+    border: 1px solid #578FCA;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    max-height: 40vh;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    /* Hidden by default */
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
+    pointer-events: none;
+}
+
+.dropdown-content::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+
+.content-open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    pointer-events: auto;
+}

client/src/components/DropdownContent/DropdownContent.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import "./DropdownContent.css";
+
+const DropdownContent = ({ children, open }) => {
+  return (
+    <div className={`dropdown-content ${open ? "content-open" : ""}`}>
+      {children}
+    </div>
+  );
+};
+
+export default DropdownContent;

client/src/components/DropdownItem/DropdownItem.css

@@ -0,0 +1,11 @@
+.dropdown-item {
+    /* padding: 0.5rem; */
+    /* margin:0.1rem; */
+    padding-top:28px;
+    width:100%;
+    border-radius:0.5rem;
+    cursor:pointer;
+
+}
+/* .dropdown-item:hover {
+    background-color: rgba(87, 143, 202, 0.3); /* Semi-transparent blue */

client/src/components/DropdownItem/DropdownItem.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import "./DropdownItem.css"
+
+const DropdownItem = ({ children, onClick }) => {
+  return (
+    <div className="dropdown-item" onClick = 
+    {onClick}>
+      {children}
+    </div>
+  );
+};
+
+export default DropdownItem;

client/src/components/LoopToggle.jsx

@@ -0,0 +1,26 @@
+import { useState, useEffect, useLayoutEffect } from 'react';
+import '../styles/LoopToggle.css';
+import scheduleData from '../data/schedule.json';
+import routeData from '../data/routes.json';
+import { aggregatedSchedule } from '../data/parseSchedule';
+ import "../styles/LoopToggle.css";
+export default function LoopToggle() {
+
+   const [active, setActive] = useState("north");
+   return(
+      <div class="toggle-div">
+         <button 
+            className={active ==="north" ? "north-on" : "north-off"}
+            onClick={() => setActive("north")}
+         >
+            North
+         </button>
+         <button
+            className={active === "west" ? "west-on" : "west-off"}
+            onClick={() => setActive("west")}
+         >
+            West
+         </button>
+      </div>
+   );
+}