TopherMayor/openclaw-taskboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[taskboard] fix active navigation state

Browse Source
This commit is contained in:
Christopher Mayor
2026-03-07 13:23:27 -08:00
parent 77e7fbd860
commit 430dcd209b
3 changed files with 8 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/layout.tsx
View File

@@ -1,5 +1,4 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { headers } from "next/headers";
import "@/app/globals.css"; import "@/app/globals.css";
import { AppShell } from "@/components/app-shell"; import { AppShell } from "@/components/app-shell";
@@ -14,9 +13,6 @@ export default async function RootLayout({
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const headerList = await headers();
const pathname = headerList.get("x-pathname") || "/tasks";
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
@@ -28,7 +24,7 @@ export default async function RootLayout({
/> />
</head> </head>
<body> <body>
<AppShell pathname={pathname}>{children}</AppShell> <AppShell>{children}</AppShell>
</body> </body>
</html> </html>
); );

10
components/app-shell.tsx
View File

@@ -1,4 +1,7 @@
"use client";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation";
import { Network, NotebookTabs, PanelsTopLeft, ScrollText, Send, Settings2, ShieldEllipsis, UsersRound } from "lucide-react"; import { Network, NotebookTabs, PanelsTopLeft, ScrollText, Send, Settings2, ShieldEllipsis, UsersRound } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@@ -16,12 +19,12 @@ const navItems = [
]; ];
export function AppShell({ export function AppShell({
pathname,
children, children,
}: { }: {
pathname: string;
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const pathname = usePathname();
return ( 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"> <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"> <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"> <nav className="space-y-2 lg:sticky lg:top-8 lg:self-start">
{navItems.map((item) => { {navItems.map((item) => {
const Icon = item.icon; const Icon = item.icon;
const isActive = pathname === item.href; const isActive =
pathname === item.href || (item.href !== "/tasks" && pathname.startsWith(`${item.href}/`));
return ( return (
<Link <Link
className={cn( className={cn(

17
middleware.ts
View File

@@ -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).*)"],
};