[taskboard] fix active navigation state

2026-03-07 13:23:27 -08:00
parent 77e7fbd860
commit 430dcd209b
3 changed files with 8 additions and 25 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import { headers } from "next/headers";

 import "@/app/globals.css";
 import { AppShell } from "@/components/app-shell";
@@ -14,9 +13,6 @@ export default async function RootLayout({
 }: Readonly<{
  children: React.ReactNode;
 }>) {
-  const headerList = await headers();
-  const pathname = headerList.get("x-pathname") || "/tasks";
-
  return (
    <html lang="en">
      <head>
@@ -28,7 +24,7 @@ export default async function RootLayout({
        />
      </head>
      <body>
-        <AppShell pathname={pathname}>{children}</AppShell>
+        <AppShell>{children}</AppShell>
      </body>
    </html>
  );
--- a/components/app-shell.tsx
+++ b/components/app-shell.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { Network, NotebookTabs, PanelsTopLeft, ScrollText, Send, Settings2, ShieldEllipsis, UsersRound } from "lucide-react";

 import { cn } from "@/lib/utils";
@@ -16,12 +19,12 @@ const navItems = [
 ];

 export function AppShell({
-  pathname,
  children,
 }: {
-  pathname: string;
  children: React.ReactNode;
 }) {
+  const pathname = usePathname();
+
  return (
    <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.18),_transparent_30%),radial-gradient(circle_at_top_right,_rgba(245,158,11,0.14),_transparent_28%),linear-gradient(180deg,#07111f_0%,#091321_44%,#0f172a_100%)] text-foreground">
      <header className="border-b border-white/10 bg-slate-950/60 backdrop-blur-xl">
@@ -44,7 +47,8 @@ export function AppShell({
        <nav className="space-y-2 lg:sticky lg:top-8 lg:self-start">
          {navItems.map((item) => {
            const Icon = item.icon;
-            const isActive = pathname === item.href;
+            const isActive =
+              pathname === item.href || (item.href !== "/tasks" && pathname.startsWith(`${item.href}/`));
            return (
              <Link
                className={cn(
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,17 +0,0 @@
-import type { NextRequest } from "next/server";
-import { NextResponse } from "next/server";
-
-export function middleware(request: NextRequest) {
-  const requestHeaders = new Headers(request.headers);
-  requestHeaders.set("x-pathname", request.nextUrl.pathname);
-
-  return NextResponse.next({
-    request: {
-      headers: requestHeaders,
-    },
-  });
-}
-
-export const config = {
-  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
-};