Merge pull request #1501 from Tria-plc/fix-portal-hamburger

fix

apps/edr-freight-web/portal/src/components/PublicNavbar.tsx

@@ -1,4 +1,5 @@
-import { ArrowRight, Menu, TrainFront } from "lucide-react";
+import { useDisclosure } from "@mantine/hooks";
+import { ArrowRight, Menu, TrainFront, X } from "lucide-react";
 import { Link } from "react-router-dom";
 
 /**
@@ -25,10 +26,52 @@ export const navLinks = [
  * same-page anchors that would go nowhere.
  */
 export function PublicNavbar({ onLanding = false }: { onLanding?: boolean }) {
+  const [menuOpen, { toggle: toggleMenu, close: closeMenu }] =
+    useDisclosure(false);
+
+  // A route always navigates. An anchor only works on the landing page;
+  // elsewhere it has to go home first, or clicking it does nothing at all.
+  // Rendered twice — once for the desktop bar, once inside the mobile panel —
+  // so the branching lives in one place.
+  const renderLink = (link: (typeof navLinks)[number], className: string) => {
+    if (link.href.startsWith("/")) {
+      return (
+        <Link
+          key={link.href}
+          to={link.href}
+          className={className}
+          onClick={closeMenu}
+        >
+          {link.label}
+        </Link>
+      );
+    }
+
+    return onLanding ? (
+      <a
+        key={link.href}
+        href={link.href}
+        className={className}
+        onClick={closeMenu}
+      >
+        {link.label}
+      </a>
+    ) : (
+      <Link
+        key={link.href}
+        to={`/${link.href}`}
+        className={className}
+        onClick={closeMenu}
+      >
+        {link.label}
+      </Link>
+    );
+  };
+
   return (
     <header className="sticky top-0 z-50 border-b border-white/10 bg-edr-ink/90 backdrop-blur-xl">
       <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-6">
-        <Link to="/" className="flex items-center gap-3">
+        <Link to="/" className="flex items-center gap-3" onClick={closeMenu}>
           <span className="flex size-10 items-center justify-center rounded-xl bg-edr-primary text-white shadow-lg shadow-emerald-500/25">
             <TrainFront className="size-5" />
           </span>
@@ -42,31 +85,12 @@ export function PublicNavbar({ onLanding = false }: { onLanding?: boolean }) {
         </Link>
 
         <nav className="hidden items-center gap-9 lg:flex">
-          {navLinks.map((link) => {
-            const className =
-              "text-sm font-medium text-slate-300 transition hover:text-white";
-
-            // A route always navigates. An anchor only works on the landing
-            // page; elsewhere it has to go home first, or clicking it does
-            // nothing at all.
-            if (link.href.startsWith("/")) {
-              return (
-                <Link key={link.href} to={link.href} className={className}>
-                  {link.label}
-                </Link>
-              );
-            }
-
-            return onLanding ? (
-              <a key={link.href} href={link.href} className={className}>
-                {link.label}
-              </a>
-            ) : (
-              <Link key={link.href} to={`/${link.href}`} className={className}>
-                {link.label}
-              </Link>
-            );
-          })}
+          {navLinks.map((link) =>
+            renderLink(
+              link,
+              "text-sm font-medium text-slate-300 transition hover:text-white",
+            ),
+          )}
         </nav>
 
         <div className="flex items-center gap-3">
@@ -87,13 +111,52 @@ export function PublicNavbar({ onLanding = false }: { onLanding?: boolean }) {
 
           <button
             type="button"
-            aria-label="Open menu"
+            aria-label={menuOpen ? "Close menu" : "Open menu"}
+            aria-expanded={menuOpen}
+            aria-controls="public-nav-menu"
+            onClick={toggleMenu}
             className="rounded-lg border border-white/20 p-2 text-white lg:hidden"
           >
-            <Menu className="size-5" />
+            {menuOpen ? <X className="size-5" /> : <Menu className="size-5" />}
           </button>
         </div>
       </div>
+
+      {menuOpen && (
+        <div
+          id="public-nav-menu"
+          className="border-t border-white/10 bg-edr-ink/95 px-6 pb-6 pt-4 lg:hidden"
+        >
+          <nav className="flex flex-col">
+            {navLinks.map((link) =>
+              renderLink(
+                link,
+                "rounded-lg px-2 py-3 text-base font-medium text-slate-300 transition hover:bg-white/5 hover:text-white",
+              ),
+            )}
+          </nav>
+
+          {/* Only below md — from md up these two are already in the bar above. */}
+          <div className="mt-4 flex flex-col gap-2 border-t border-white/10 pt-4 md:hidden">
+            <Link
+              to="/login"
+              onClick={closeMenu}
+              className="rounded-lg border border-white/20 px-5 py-2.5 text-center text-sm font-medium text-white transition hover:bg-white/10"
+            >
+              Log in
+            </Link>
+
+            <Link
+              to="/signup"
+              onClick={closeMenu}
+              className="flex items-center justify-center gap-2 rounded-lg bg-edr-primary px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 transition hover:bg-edr-primary-dark"
+            >
+              Get started
+              <ArrowRight className="size-4" />
+            </Link>
+          </div>
+        </div>
+      )}
     </header>
   );
 }