From 9bc129f80d59a7df704f002429847f30a730c8f1 Mon Sep 17 00:00:00 2001 From: Polo Date: Wed, 20 May 2026 19:01:53 +0200 Subject: [PATCH 1/3] Redesign site header and navigation components for improved layout and styling --- src/components/mobile-nav.tsx | 129 ++++++++++++++++++++------------- src/components/search.tsx | 22 ++---- src/components/site-header.tsx | 89 ++++++++++++----------- 3 files changed, 133 insertions(+), 107 deletions(-) diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx index e81ff14..6fedd99 100644 --- a/src/components/mobile-nav.tsx +++ b/src/components/mobile-nav.tsx @@ -3,10 +3,10 @@ import * as React from "react" import Link from "next/link" import { usePathname } from "next/navigation" -import { Menu } from "lucide-react" +import { Github, Menu } from "lucide-react" +import { docsConfig } from "@/config/docs" import { Button } from "@/components/ui/button" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" -import { docsConfig } from "@/config/docs" import { cn } from "@/lib/utils" export function MobileNav() { @@ -18,28 +18,51 @@ export function MobileNav() { - - - NeuroLab - -
-
- {docsConfig.mainNav?.map( + +
+ setOpen(false)} + className="block" + > +
+ NeuroLab Docs +
+
+ Platform documentation +
+ +
+ +
+
+ setOpen(false)} + className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-zinc-600 transition-colors hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-zinc-900 dark:hover:text-zinc-50" + > + + View code + + {docsConfig.mainNav.map( (item) => item.href && ( {item.title} @@ -47,32 +70,35 @@ export function MobileNav() { ) )}
-
- {docsConfig.sidebarNav.map((item, index) => ( -
-

{item.title}

- {item?.items?.length && - item.items.map((item) => ( - - {!item.disabled && - (item.href ? ( - - {item.title} - - ) : ( - item.title - ))} - - ))} -
- ))} + +
+
+ Documentation +
+
+ {docsConfig.sidebarNav.map((section) => ( +
+
+ {section.title} +
+
+ {section.items.map((item) => + item.href ? ( + + {item.title} + + ) : null + )} +
+
+ ))} +
@@ -82,6 +108,7 @@ export function MobileNav() { interface MobileLinkProps { href: string + pathname: string onOpenChange?: (open: boolean) => void children: React.ReactNode className?: string @@ -89,24 +116,24 @@ interface MobileLinkProps { function MobileLink({ href, + pathname, onOpenChange, - className, children, - ...props + className, }: MobileLinkProps) { - const pathname = usePathname() + const active = pathname === href || (href !== "/" && pathname.startsWith(href)) + return ( { - onOpenChange?.(false) - }} + onClick={() => onOpenChange?.(false)} className={cn( - "text-foreground/70 transition-colors hover:text-foreground", - pathname === href && "text-foreground", + "block rounded-lg px-3 py-2 text-sm transition-colors", + active + ? "bg-zinc-100 font-medium text-zinc-950 dark:bg-zinc-900 dark:text-zinc-50" + : "hover:bg-zinc-100 hover:text-zinc-950 dark:hover:bg-zinc-900 dark:hover:text-zinc-50", className )} - {...props} > {children} diff --git a/src/components/search.tsx b/src/components/search.tsx index 3f44ac6..39058dc 100644 --- a/src/components/search.tsx +++ b/src/components/search.tsx @@ -1,24 +1,16 @@ 'use client' +import Link from 'next/link' import { Search as SearchIcon } from 'lucide-react' -import { Button } from '@/components/ui/button' export function Search() { return ( - + + Search documentation + ) } diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx index b69ecc5..0df1d89 100644 --- a/src/components/site-header.tsx +++ b/src/components/site-header.tsx @@ -2,58 +2,65 @@ import Link from 'next/link' import { usePathname } from 'next/navigation' -import { cn } from '@/lib/utils' +import { Github } from 'lucide-react' import { docsConfig } from '@/config/docs' import { MobileNav } from '@/components/mobile-nav' -import { ThemeToggle } from '@/components/theme-toggle' import { Search } from '@/components/search' -import { LucideGithub } from 'lucide-react' +import { ThemeToggle } from '@/components/theme-toggle' +import { cn } from '@/lib/utils' export function SiteHeader() { const pathname = usePathname() return ( -
-
+
+
-
- - - NeuroLab + + + + + NeuroLab Docs - - + + + + + +
+
-
-
- -
-
- -
-
- -
+ + + + View code + + +
+
From 5d5a781d64c35b126d2466b0d48e63b26d71e512 Mon Sep 17 00:00:00 2001 From: Polo Date: Wed, 20 May 2026 19:49:15 +0200 Subject: [PATCH 2/3] Improve navigation active-link matching logic and update header UI with star count --- src/components/mobile-nav.tsx | 14 ++++++++- src/components/site-header.tsx | 53 ++++++++++++++++++++++------------ 2 files changed, 47 insertions(+), 20 deletions(-) diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx index 6fedd99..5d7a28f 100644 --- a/src/components/mobile-nav.tsx +++ b/src/components/mobile-nav.tsx @@ -121,7 +121,19 @@ function MobileLink({ children, className, }: MobileLinkProps) { - const active = pathname === href || (href !== "/" && pathname.startsWith(href)) + const allHrefs = [ + ...docsConfig.mainNav.map((n) => n.href), + ...docsConfig.sidebarNav.flatMap((s) => s.items.map((i) => i.href)), + ].filter(Boolean) as string[] + + const active = + pathname === href || + (href !== "/" && + pathname.startsWith(href) && + !allHrefs.some( + (other) => + other !== href && pathname.startsWith(other) && other.length > href.length + )) return (
@@ -56,7 +70,8 @@ export function SiteHeader() { className='hidden items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-600 transition-colors hover:border-zinc-300 hover:text-zinc-950 md:flex dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-300 dark:hover:border-zinc-700 dark:hover:text-zinc-50' > - View code + 221K{' '} +
From 185c50144572a625b5f3aef0a2763580ef738805 Mon Sep 17 00:00:00 2001 From: Polo Date: Wed, 20 May 2026 19:53:18 +0200 Subject: [PATCH 3/3] Refactor sidebar and mobile navigation components with updated typography and layout styles --- src/components/docs-sidebar.tsx | 16 ++++++++-------- src/components/mobile-nav.tsx | 8 ++++---- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/docs-sidebar.tsx b/src/components/docs-sidebar.tsx index 96a79c9..1e1458d 100644 --- a/src/components/docs-sidebar.tsx +++ b/src/components/docs-sidebar.tsx @@ -13,8 +13,8 @@ export function DocsSidebar() {
{docsConfig.sidebarNav.map((section, index) => ( -
-

+
+

{section.title}

{section.items?.length ? ( @@ -35,18 +35,18 @@ interface DocsSidebarNavItemsProps { function DocsSidebarNavItems({ items, pathname }: DocsSidebarNavItemsProps) { return items.length ? ( -
+
{items.map((item, index) => item.href ? ( {item.title} {item.label ? ( - + {item.label} ) : null} diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx index 5d7a28f..d4b0ec2 100644 --- a/src/components/mobile-nav.tsx +++ b/src/components/mobile-nav.tsx @@ -75,13 +75,13 @@ export function MobileNav() {
Documentation
-
+
{docsConfig.sidebarNav.map((section) => (
-
+
{section.title}
-
+
{section.items.map((item) => item.href ? ( {item.title}