nav-header.tsx — ui Source File

Architecture documentation for nav-header.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx Internationalization RTLLayout 3 imports 1 functions

Entity Profile

Internationalization→ RTLLayout→ nav-header.tsx — ui Source File

Dependency Diagram

graph LR
  2b65316c_ee0a_cf8b_8c6d_0ead98a6c083["nav-header.tsx"]
  ba3d44f3_7b34_f9cc_6283_44817785c0df["link"]
  2b65316c_ee0a_cf8b_8c6d_0ead98a6c083 --> ba3d44f3_7b34_f9cc_6283_44817785c0df
  f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb["navigation"]
  2b65316c_ee0a_cf8b_8c6d_0ead98a6c083 --> f5b0b1d9_de2f_9c31_0bcd_4adbd07581cb
  661dda96_0e3f_9023_7403_2265c890b5e7["navigation-menu"]
  2b65316c_ee0a_cf8b_8c6d_0ead98a6c083 --> 661dda96_0e3f_9023_7403_2265c890b5e7
  style 2b65316c_ee0a_cf8b_8c6d_0ead98a6c083 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
} from "@/registry/new-york-v4/ui/navigation-menu"

export function NavHeader() {
  const pathname = usePathname()

  return (
    <NavigationMenu className="hidden sm:flex">
      <NavigationMenuList className="gap-2 *:data-[slot=navigation-menu-item]:h-7 **:data-[slot=navigation-menu-link]:py-1 **:data-[slot=navigation-menu-link]:font-medium">
        <NavigationMenuItem>
          <NavigationMenuLink asChild data-active={pathname === "/"}>
            <Link href="/">Home</Link>
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink asChild data-active={pathname === "/charts"}>
            <Link href="/charts">Charts</Link>
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink asChild data-active={pathname === "/forms"}>
            <Link href="/forms">Forms</Link>
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}