Chneemann/flowstate
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(nav): correctly highlight "Add Task" active state on task creation and edit routes

Browse source
This commit is contained in:
Chneemann 2026-08-14 11:54:42 +02:00
parent f18427c4ab
commit 76d239df7b
No known key found for this signature in database
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/components/layout/Navbar.tsx
View file

@ -18,7 +18,7 @@ const fetcher = (url: string) => fetch(url).then((res) => res.json());
const navItems = [ const navItems = [
{ name: "Summary", href: "/summary", icon: FileText }, { name: "Summary", href: "/summary", icon: FileText },
{ name: "Dashboard", href: "/dashboard", icon: LayoutDashboard }, { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
{ name: "Add Task", href: "/tasks?task=new", icon: FilePenLine }, { name: "Add Task", href: "/tasks", icon: FilePenLine },
{ name: "Trash", href: "/trash", icon: Trash2 }, { name: "Trash", href: "/trash", icon: Trash2 },
]; ];
@ -38,7 +38,7 @@ export default function Navbar() {
const trashCount = data?.count || 0; const trashCount = data?.count || 0;
// Shared function to render navigation links to avoid code duplication // Shared function to render navigation links
const renderNavLinks = (isMobile = false) => const renderNavLinks = (isMobile = false) =>
navItems.map((item) => { navItems.map((item) => {
const Icon = item.icon; const Icon = item.icon;
@ -50,13 +50,13 @@ export default function Navbar() {
return ( return (
<Link <Link
key={item.href} key={item.href}
href={item.href} href={item.href === "/tasks" ? "/tasks?task=new" : item.href}
aria-current={isActive ? "page" : undefined} aria-current={isActive ? "page" : undefined}
className={ className={
isMobile isMobile
? `flex flex-col items-center justify-center gap-1 transition-colors ${ ? `flex flex-col items-center justify-center gap-1 transition-colors ${
isActive isActive
? " cursor-default pointer-events-none" ? "cursor-default pointer-events-none"
: "text-foreground-muted hover:text-foreground" : "text-foreground-muted hover:text-foreground"
}` }`
: `flex items-center gap-3 px-3 py-2 rounded-lg font-medium transition-colors ${ : `flex items-center gap-3 px-3 py-2 rounded-lg font-medium transition-colors ${