close drawer before transitining

This commit is contained in:
DaKheera47 2026-01-18 01:00:42 +00:00
parent 5bb4c67d10
commit 562131910e
3 changed files with 44 additions and 18 deletions

View File

@ -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}
onClick={() => setNavOpen(false)}
type="button"
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>

View File

@ -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}
onClick={() => setNavOpen(false)}
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 ${
type="button"
onClick={() => {
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>

View File

@ -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}
onClick={() => setNavOpen(false)}
type="button"
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>