close drawer before transitining

orchestrator/src/client/components/layout.tsx

@@ -3,7 +3,7 @@
  */
 
 import React, { useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Briefcase, Home, LucideIcon, Menu, Settings, Shield } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
@@ -46,8 +46,18 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
   actions,
 }) => {
   const location = useLocation();
+  const navigate = useNavigate();
   const [navOpen, setNavOpen] = useState(false);
 
+  const handleNavClick = (to: string) => {
+    if (location.pathname === to) {
+      setNavOpen(false);
+      return;
+    }
+    setNavOpen(false);
+    setTimeout(() => navigate(to), 150);
+  };
+
   return (
     <header className="sticky top-0 z-40 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-4">
@@ -65,12 +75,12 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
               </SheetHeader>
               <nav className="mt-6 flex flex-col gap-2">
                 {navLinks.map(({ to, label, icon: NavIcon }) => (
-                  <Link
+                  <button
                     key={to}
-                    to={to}
+                    type="button"
-                    onClick={() => setNavOpen(false)}
+                    onClick={() => handleNavClick(to)}
                     className={cn(
-                      "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
+                      "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-left",
                       location.pathname === to
                         ? "bg-accent text-accent-foreground"
                         : "text-muted-foreground"
@@ -78,7 +88,7 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
                   >
                     <NavIcon className="h-4 w-4" />
                     {label}
-                  </Link>
+                  </button>
                 ))}
               </nav>
             </SheetContent>

orchestrator/src/client/pages/OrchestratorPage.tsx

@@ -29,7 +29,7 @@ import {
   Sparkles,
   XCircle,
 } from "lucide-react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { toast } from "sonner";
@@ -304,6 +304,7 @@ const ScoreMeter: React.FC<{ score: number | null }> = ({ score }) => {
 
 export const OrchestratorPage: React.FC = () => {
   const location = useLocation();
+  const navigate = useNavigate();
   const [navOpen, setNavOpen] = useState(false);
   const [jobs, setJobs] = useState<Job[]>([]);
   const [stats, setStats] = useState<Record<JobStatus, number>>({
@@ -1078,11 +1079,18 @@ export const OrchestratorPage: React.FC = () => {
                 </SheetHeader>
                 <nav className="mt-6 flex flex-col gap-2">
                   {navLinks.map(({ to, label, icon: Icon }) => (
-                    <Link
+                    <button
                       key={to}
-                      to={to}
+                      type="button"
-                      onClick={() => setNavOpen(false)}
+                      onClick={() => {
-                      className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground ${
+                        if (location.pathname === to) {
+                          setNavOpen(false);
+                          return;
+                        }
+                        setNavOpen(false);
+                        setTimeout(() => navigate(to), 150);
+                      }}
+                      className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-left ${
                         location.pathname === to
                           ? "bg-accent text-accent-foreground"
                           : "text-muted-foreground"
@@ -1090,7 +1098,7 @@ export const OrchestratorPage: React.FC = () => {
                     >
                       <Icon className="h-4 w-4" />
                       {label}
-                    </Link>
+                    </button>
                   ))}
                 </nav>
               </SheetContent>

orchestrator/src/client/pages/UkVisaJobsPage.tsx

@@ -21,7 +21,7 @@ import {
   Settings,
   Shield,
 } from "lucide-react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
 import { Badge } from "@/components/ui/badge";
@@ -90,6 +90,7 @@ const navLinks = [
 
 export const UkVisaJobsPage: React.FC = () => {
   const location = useLocation();
+  const navigate = useNavigate();
   const [navOpen, setNavOpen] = useState(false);
   const [searchTermInput, setSearchTermInput] = useState("");
   const [activeSearchTerm, setActiveSearchTerm] = useState<string | null>(null);
@@ -366,12 +367,19 @@ export const UkVisaJobsPage: React.FC = () => {
                 </SheetHeader>
                 <nav className="mt-6 flex flex-col gap-2">
                   {navLinks.map(({ to, label, icon: Icon }) => (
-                    <Link
+                    <button
                       key={to}
-                      to={to}
+                      type="button"
-                      onClick={() => setNavOpen(false)}
+                      onClick={() => {
+                        if (location.pathname === to) {
+                          setNavOpen(false);
+                          return;
+                        }
+                        setNavOpen(false);
+                        setTimeout(() => navigate(to), 150);
+                      }}
                       className={cn(
-                        "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
+                        "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground text-left",
                         location.pathname === to
                           ? "bg-accent text-accent-foreground"
                           : "text-muted-foreground"
@@ -379,7 +387,7 @@ export const UkVisaJobsPage: React.FC = () => {
                     >
                       <Icon className="h-4 w-4" />
                       {label}
-                    </Link>
+                    </button>
                   ))}
                 </nav>
               </SheetContent>