From 3c1f49df49bf40a6f6a93b071a28031bf2358d38 Mon Sep 17 00:00:00 2001
From: Iskander <iskandervdh@gmail.com>
Date: Sat, 26 Jul 2025 17:27:59 +0200
Subject: [PATCH 1/2] Implement responsive navbar menu for smaller widths

---
 frontend/src/sections/navbar.tsx | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/frontend/src/sections/navbar.tsx b/frontend/src/sections/navbar.tsx
index 4aad34f..aa6a13c 100644
--- a/frontend/src/sections/navbar.tsx
+++ b/frontend/src/sections/navbar.tsx
@@ -1,4 +1,6 @@
+import { Bars3BottomLeftIcon, XMarkIcon } from '@heroicons/react/20/solid';
 import { Link, useRouterState } from '@tanstack/react-router';
+import { useState } from 'react';
 import icon from '~/assets/images/icon-transparent.png';
 import { Button } from '~/components/button';
 import { cn } from '~/utils/helpers';
@@ -31,6 +33,12 @@ function NavbarItem({ page, route }: { page: NavPage; route: NavRoute }) {
 }
 
 export function Navbar() {
+  const [showMenu, setShowMenu] = useState(false);
+
+  const toggleMenu = () => {
+    setShowMenu((prev) => !prev);
+  };
+
   return (
     <div className="flex items-center h-20 gap-8 px-4 border-b shadow-sm select-none shadow-primary-dark/50 min-h-20 border-primary/80 overflow-clip">
       <Link
@@ -40,11 +48,31 @@ export function Navbar() {
         <img src={icon} id="logo" alt="logo" className="cursor-pointer w-14 h-14" draggable={false} />
       </Link>
 
-      <ul className="flex gap-8">
+      <ul className="hidden gap-8 md:flex">
         {Object.entries(NAV_PAGES).map(([page, route]) => (
           <NavbarItem key={page} page={page as keyof typeof NAV_PAGES} route={route} />
         ))}
       </ul>
+
+      <div className="flex justify-end flex-1 md:hidden">
+        <Button
+          className="px-2 py-1 text-lg rounded-lg cursor-pointer text-primary hover:bg-black/10"
+          variant="ghost"
+          onClick={toggleMenu}
+        >
+          {showMenu ? <XMarkIcon width={24} height={24} /> : <Bars3BottomLeftIcon width={24} height={24} />}
+        </Button>
+
+        <div>
+          {showMenu && (
+            <ul className="absolute flex flex-col gap-2 p-4 border rounded-lg shadow-lg bg-background top-16 right-4 md:hidden border-primary/40">
+              {Object.entries(NAV_PAGES).map(([page, route]) => (
+                <NavbarItem key={page} page={page as keyof typeof NAV_PAGES} route={route} />
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
     </div>
   );
 }

From 7dd7781bd90b5dd7a9c5d8e078ab9f8c01dcdfb0 Mon Sep 17 00:00:00 2001
From: Iskander <iskandervdh@gmail.com>
Date: Sat, 26 Jul 2025 17:30:42 +0200
Subject: [PATCH 2/2] Adjust navbar item spacing

---
 frontend/src/sections/navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/sections/navbar.tsx b/frontend/src/sections/navbar.tsx
index aa6a13c..d28be58 100644
--- a/frontend/src/sections/navbar.tsx
+++ b/frontend/src/sections/navbar.tsx
@@ -48,7 +48,7 @@ export function Navbar() {
         <img src={icon} id="logo" alt="logo" className="cursor-pointer w-14 h-14" draggable={false} />
       </Link>
 
-      <ul className="hidden gap-8 md:flex">
+      <ul className="hidden gap-4 overflow-x-auto md:flex">
         {Object.entries(NAV_PAGES).map(([page, route]) => (
           <NavbarItem key={page} page={page as keyof typeof NAV_PAGES} route={route} />
         ))}