From ddbab269817572b5f962fe806817497350207655 Mon Sep 17 00:00:00 2001
From: Helene Lotsberg <helenul@stud.ntnu.no>
Date: Fri, 2 Oct 2026 14:45:52 +0200
Subject: [PATCH 1/2] add button in header for mobile responsiveness

---
 frontend/src/App.tsx                        | 14 ++++++++---
 frontend/src/components/header/Header.css   | 24 ++++++++++++++++++
 frontend/src/components/header/Header.tsx   | 18 ++++++++++++--
 frontend/src/components/sidebar/Sidebar.tsx | 27 +++++++++++++++++----
 frontend/src/hooks/useSessionState.ts       |  4 +--
 5 files changed, 75 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4fbd05e8..b72cb664 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,12 +5,20 @@ import Header from "./components/header/Header";
 import AppRoutes from "./AppRoutes.tsx";
 
 function App() {
-  const [isSidebarOpen] = useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const openSidebar = () => {
+    setIsSidebarOpen(true);
+  };
+
+  const closeSidebar = () => {
+    setIsSidebarOpen(false);
+  };
 
   return (
     <>
-      <Sidebar isOpen={isSidebarOpen} />
-      <Header />
+      <Sidebar isOpen={isSidebarOpen} onCloseSidebar={closeSidebar} />
+      <Header isSidebarOpen={isSidebarOpen} onOpenSidebar={openSidebar} />
       <AppRoutes />
     </>
   );
diff --git a/frontend/src/components/header/Header.css b/frontend/src/components/header/Header.css
index 472fbeb1..4109c1f2 100644
--- a/frontend/src/components/header/Header.css
+++ b/frontend/src/components/header/Header.css
@@ -24,9 +24,33 @@
   letter-spacing: -0.3px;
 }
 
+.menu-button {
+  display: none;
+}
+
 @media (max-width: 767px) {
   .header {
+    height: 70px;
     margin-left: 0;
     width: 100%;
   }
+
+  .header[data-sidebar-open="true"] {
+    display: none;
+  }
+
+  .header h1 {
+    font-size: 37px;
+  }
+
+  .menu-button {
+    display: block;
+    position: absolute;
+    left: 20px;
+    background: none;
+    border: none;
+    font-size: 40px;
+    cursor: pointer;
+    color: var(--text-dark);
+  }
 }
diff --git a/frontend/src/components/header/Header.tsx b/frontend/src/components/header/Header.tsx
index 75cf9c43..da90960c 100644
--- a/frontend/src/components/header/Header.tsx
+++ b/frontend/src/components/header/Header.tsx
@@ -3,6 +3,11 @@ import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { ROUTES } from "../../AppRoutes";
 
+type HeaderProps = {
+  isSidebarOpen: boolean;
+  onOpenSidebar: () => void;
+};
+
 // Maps each route path to the translation key used for its title
 const pageTitles: Record<string, string> = {
   [ROUTES.plantMatch]: "sidebar.plantMatch",
@@ -11,13 +16,22 @@ const pageTitles: Record<string, string> = {
   [ROUTES.profile]: "sidebar.profile",
 };
 
-export default function Header() {
+export default function Header({ isSidebarOpen, onOpenSidebar }: HeaderProps) {
   const { t } = useTranslation();
   const { pathname } = useLocation();
+
   const titleKey = pageTitles[pathname] ?? "sidebar.plantMatch";
 
   return (
-    <header className="header">
+    <header className="header" data-sidebar-open={isSidebarOpen}>
+      <button
+        className="menu-button"
+        onClick={onOpenSidebar}
+        aria-label="Open sidebar"
+      >
+        ☰
+      </button>
+
       <h1>{t(titleKey)}</h1>
     </header>
   );
diff --git a/frontend/src/components/sidebar/Sidebar.tsx b/frontend/src/components/sidebar/Sidebar.tsx
index 03af4072..df666a07 100644
--- a/frontend/src/components/sidebar/Sidebar.tsx
+++ b/frontend/src/components/sidebar/Sidebar.tsx
@@ -7,9 +7,10 @@ import "./Sidebar.css";
 
 type SidebarProps = {
   isOpen: boolean;
+  onCloseSidebar: () => void;
 };
 
-export default function Sidebar({ isOpen }: SidebarProps) {
+export default function Sidebar({ isOpen, onCloseSidebar }: SidebarProps) {
   const { t } = useTranslation();
 
   return (
@@ -18,25 +19,41 @@ export default function Sidebar({ isOpen }: SidebarProps) {
       <nav className="sidebar__nav" aria-label="Sidebar navigation">
         <ul>
           <li>
-            <NavLink to={ROUTES.plantMatch} className="sidebar__link">
+            <NavLink
+              to={ROUTES.plantMatch}
+              className="sidebar__link"
+              onClick={onCloseSidebar}
+            >
               {t("sidebar.plantMatch")}
             </NavLink>
           </li>
 
           <li>
-            <NavLink to={ROUTES.explore} className="sidebar__link">
+            <NavLink
+              to={ROUTES.explore}
+              className="sidebar__link"
+              onClick={onCloseSidebar}
+            >
               {t("sidebar.explorePlants")}
             </NavLink>
           </li>
 
           <li>
-            <NavLink to={ROUTES.myMatches} className="sidebar__link">
+            <NavLink
+              to={ROUTES.myMatches}
+              className="sidebar__link"
+              onClick={onCloseSidebar}
+            >
               {t("sidebar.myMatches")}
             </NavLink>
           </li>
 
           <li>
-            <NavLink to={ROUTES.profile} className="sidebar__link">
+            <NavLink
+              to={ROUTES.profile}
+              className="sidebar__link"
+              onClick={onCloseSidebar}
+            >
               {t("sidebar.profile")}
             </NavLink>
           </li>
diff --git a/frontend/src/hooks/useSessionState.ts b/frontend/src/hooks/useSessionState.ts
index 6200f6e1..41a8013e 100644
--- a/frontend/src/hooks/useSessionState.ts
+++ b/frontend/src/hooks/useSessionState.ts
@@ -13,8 +13,8 @@ export function useSessionState(key: string, initialValue = "") {
     try {
       sessionStorage.setItem(key, value);
     } catch {
-        // Storage can fail (private mode, full quota). The app still works,
-        // the value just won't be remembered.
+      // Storage can fail (private mode, full quota). The app still works,
+      // the value just won't be remembered.
     }
   }, [key, value]);
 

From 45a01981d75463b2c98987448a886c1174d1ef92 Mon Sep 17 00:00:00 2001
From: Helene Lotsberg <helenul@stud.ntnu.no>
Date: Fri, 2 Oct 2026 21:55:02 +0200
Subject: [PATCH 2/2] add button to esc sidebar and return to original tab on
 mobile

---
 frontend/src/components/sidebar/Sidebar.css | 16 ++++++++++++++++
 frontend/src/components/sidebar/Sidebar.tsx |  8 ++++++++
 2 files changed, 24 insertions(+)

diff --git a/frontend/src/components/sidebar/Sidebar.css b/frontend/src/components/sidebar/Sidebar.css
index 09b329c2..8ef32d4b 100644
--- a/frontend/src/components/sidebar/Sidebar.css
+++ b/frontend/src/components/sidebar/Sidebar.css
@@ -72,6 +72,10 @@
   text-align: center;
 }
 
+.close-button {
+  display: none;
+}
+
 @media (max-width: 767px) {
   .sidebar {
     width: 100%;
@@ -82,4 +86,16 @@
   .sidebar[data-open="true"] {
     transform: translateX(0);
   }
+
+  .close-button {
+    display: block;
+    position: absolute;
+    top: 15px;
+    right: 20px;
+    background: none;
+    border: none;
+    font-size: 32px;
+    color: var(--text-dark);
+    cursor: pointer;
+  }
 }
diff --git a/frontend/src/components/sidebar/Sidebar.tsx b/frontend/src/components/sidebar/Sidebar.tsx
index df666a07..e7fd748f 100644
--- a/frontend/src/components/sidebar/Sidebar.tsx
+++ b/frontend/src/components/sidebar/Sidebar.tsx
@@ -15,6 +15,14 @@ export default function Sidebar({ isOpen, onCloseSidebar }: SidebarProps) {
 
   return (
     <aside className="sidebar" id="sidebar" data-open={isOpen}>
+      <button
+        className="close-button"
+        onClick={onCloseSidebar}
+        aria-label="Close menu"
+      >
+        ×
+      </button>
+
       <p className="sidebar_title">{t("sidebar.title")}</p>
       <nav className="sidebar__nav" aria-label="Sidebar navigation">
         <ul>