Merge pull request #27 from iskandervdh/small-width-nav

Small width nav

Author: iskandervdh

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-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} />
         ))}
       </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>
   );
 }