SiteHeader() — ui Function Reference

Architecture documentation for the SiteHeader() function in site-header.tsx from the ui codebase.

Function tsx Internationalization RTLLayout

Entity Profile

Internationalization→ RTLLayout→ SiteHeader() — ui Function Reference

Dependency Diagram

graph TD
  0f226bb8_1e07_a7f8_d520_a258faed510d["SiteHeader()"]
  5f2ab82e_047f_13f5_6e49_18f330670d61["site-header.tsx"]
  0f226bb8_1e07_a7f8_d520_a258faed510d -->|defined in| 5f2ab82e_047f_13f5_6e49_18f330670d61
  style 0f226bb8_1e07_a7f8_d520_a258faed510d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/site-header.tsx lines 19–83

export function SiteHeader() {
  const colors = getColors()
  const pageTree = source.pageTree

  return (
    <header className="bg-background sticky top-0 z-50 w-full">
      <div className="container-wrapper 3xl:fixed:px-0 px-6">
        <div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:!h-4">
          <MobileNav
            tree={pageTree}
            items={siteConfig.navItems}
            className="flex lg:hidden"
          />
          <Button
            asChild
            variant="ghost"
            size="icon"
            className="hidden size-8 lg:flex"
          >
            <Link href="/">
              <Icons.logo className="size-5" />
              <span className="sr-only">{siteConfig.name}</span>
            </Link>
          </Button>
          <MainNav items={siteConfig.navItems} className="hidden lg:flex" />
          <div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
            <div className="hidden w-full flex-1 md:flex md:w-auto md:flex-none">
              <CommandMenu
                tree={pageTree}
                colors={colors}
                navItems={siteConfig.navItems}
              />
            </div>
            <Separator
              orientation="vertical"
              className="ml-2 hidden lg:block"
            />
            <GitHubLink />
            <Separator orientation="vertical" className="3xl:flex hidden" />
            <SiteConfig className="3xl:flex hidden" />
            <Separator orientation="vertical" />
            <ModeSwitcher />
            <Separator orientation="vertical" className="mr-2" />
            <Button
              asChild
              size="sm"
              className="hidden h-[31px] rounded-lg sm:flex"
            >
              <Link href="/create">
                <HugeiconsIcon icon={PlusSignIcon} />
                New Project
              </Link>
            </Button>
            <Button asChild size="sm" className="h-[31px] rounded-lg sm:hidden">
              <Link href="/create">
                <HugeiconsIcon icon={PlusSignIcon} />
                New
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </header>
  )
}