Navbar

import type { ComponentProps } from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { NavigationMenu } from "@/components/ui/navigation-menu"

const navbarVariants = cva(
  "grid min-h-21 grid-cols-[auto_1fr] items-center gap-x-4 gap-y-3 py-3 @max-xs/navbar:grid-cols-1",
  {
    variants: {
      /**
       * How the bar arranges its parts once it is 64rem wide: `left` (the
       * default) puts the links after the logo, `centered-links` centers the
       * links, and `centered-logo` centers the logo with the links on its
       * left. A narrower bar hides the links whatever the variant.
       */
      variant: {
        left: "@5xl/navbar:grid-cols-[auto_1fr_auto] @5xl/navbar:gap-x-12",
        "centered-links": "@5xl/navbar:grid-cols-[1fr_auto_1fr]",
        "centered-logo": "@5xl/navbar:grid-cols-[1fr_auto_1fr]",
      },
    },
    defaultVariants: { variant: "left" },
  }
)

/**
 * The site header bar, as a `header`. Holds `NavbarLogo`, `NavbarLinks` and
 * `NavbarActions`, and sets them in a centered `NavbarContainer`.
 *
 * Its layout follows its own width. Below 64rem it shows the logo and the
 * actions and hides the links, so give narrow screens their own menu, for
 * example in `NavbarActions`. From 64rem `variant` arranges all three: `left`
 * (the default) puts the links after the logo, `centered-links` centers the
 * links, and `centered-logo` centers the logo with the links on its left.
 * Below 20rem the actions drop under the logo. `className` lands on the
 * outer `header`.
 */
function Navbar({
  className,
  variant = "left",
  children,
  ...props
}: ComponentProps<"header"> & VariantProps<typeof navbarVariants>) {
  return (
    <header
      data-slot="navbar"
      data-variant={variant}
      className={cn(
        "group/navbar @container/navbar relative isolate bg-background text-foreground",
        className
      )}
      {...props}
    >
      <NavbarContainer className={navbarVariants({ variant })}>
        {children}
      </NavbarContainer>
    </header>
  )
}

/**
 * A layer for art or a fill behind the bar's content. Place it as a child of
 * `Navbar`: it covers the whole bar and is hidden from assistive tech and the
 * pointer.
 */
function NavbarBackground({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="navbar-background"
      aria-hidden="true"
      className={cn("pointer-events-none absolute inset-0 -z-10", className)}
      {...props}
    />
  )
}

/**
 * The centered column that holds the bar's content, with side padding. Its
 * width steps with the viewport: 42rem, 48rem from `md`, and 80rem from `lg`.
 * `Navbar` already renders one around its children.
 */
function NavbarContainer({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="navbar-container"
      className={cn(
        "mx-auto w-full max-w-2xl px-6 md:max-w-3xl lg:max-w-7xl lg:px-10",
        className
      )}
      {...props}
    />
  )
}

/**
 * The brand link at the start of the bar, an `a` by default. Pass
 * `render={<Link href="/" />}` to use your router's link. In the
 * `centered-logo` variant it moves to the center from 64rem.
 */
function NavbarLogo({
  className,
  render,
  ...props
}: useRender.ComponentProps<"a">) {
  return useRender({
    defaultTagName: "a",
    props: mergeProps<"a">(
      {
        className: cn(
          "col-start-1 row-start-1 inline-flex w-fit min-w-0 items-center gap-2 rounded-sm text-xl font-semibold focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring @5xl/navbar:group-data-[variant=centered-logo]/navbar:col-start-2 @5xl/navbar:group-data-[variant=centered-logo]/navbar:justify-self-center",
          className
        ),
      },
      props
    ),
    render,
    state: { slot: "navbar-logo" },
  })
}

/**
 * The main links, built on `NavigationMenu`. Put a `NavigationMenuList` of
 * `NavigationMenuItem` entries inside, each holding a `NavbarLink` or a menu
 * trigger. It is hidden until the navbar is 64rem wide.
 *
 * `className` takes a string only: it is merged with `cn`, so Base UI's
 * function form for `className` is not supported here.
 */
function NavbarLinks({
  className,
  ...props
}: Omit<ComponentProps<typeof NavigationMenu>, "className"> & {
  /**
   * Extra classes for the `NavigationMenu` root, as a string only: Base UI's
   * function form is not accepted.
   */
  className?: string
}) {
  return (
    <NavigationMenu
      data-slot="navbar-links"
      className={cn(
        "col-start-2 row-start-1 hidden min-w-0 @5xl/navbar:flex @5xl/navbar:group-data-[variant=centered-logo]/navbar:col-start-1",
        className
      )}
      {...props}
    />
  )
}

/**
 * A text link for `NavbarLinks`, underlined on hover and while `active` is
 * set. It is the plain Base UI navigation menu link with its own style, not
 * the filled menu link. Pass `render={<Link href="/pricing" />}` for a router
 * link.
 *
 * `className` takes a string only.
 */
function NavbarLink({
  className,
  ...props
}: Omit<NavigationMenuPrimitive.Link.Props, "className"> & {
  /**
   * Extra classes for the link, as a string only: Base UI's function form
   * is not accepted.
   */
  className?: string
}) {
  return (
    <NavigationMenuPrimitive.Link
      data-slot="navbar-link"
      className={cn(
        "inline-flex h-9 w-max items-center justify-center gap-1.5 rounded-sm text-sm font-medium underline-offset-4 transition-colors outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/30 focus-visible:outline-1 data-active:underline",
        className
      )}
      {...props}
    />
  )
}

/**
 * The buttons at the end of the bar, such as sign-in or a menu for narrow
 * screens, right-aligned with 16px gaps. Below 20rem they drop to their own
 * row under the logo and wrap.
 */
function NavbarActions({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="navbar-actions"
      className={cn(
        "col-start-2 row-start-1 flex min-w-0 items-center justify-end gap-4 justify-self-end @max-xs/navbar:col-start-1 @max-xs/navbar:row-start-2 @max-xs/navbar:flex-wrap @max-xs/navbar:justify-start @max-xs/navbar:justify-self-start @5xl/navbar:col-start-3",
        className
      )}
      {...props}
    />
  )
}

export {
  Navbar,
  NavbarBackground,
  NavbarContainer,
  NavbarLogo,
  NavbarLinks,
  NavbarLink,
  NavbarActions,
  navbarVariants,
}

pnpm dlx shadcn add @01orbital/navbar

npx shadcn add @01orbital/navbar

yarn shadcn add @01orbital/navbar

bunx --bun shadcn add @01orbital/navbar

pnpm dlx shadcn add @01orbital/button @01orbital/separator @01orbital/sheet

npx shadcn add @01orbital/button @01orbital/separator @01orbital/sheet

yarn shadcn add @01orbital/button @01orbital/separator @01orbital/sheet

bunx --bun shadcn add @01orbital/button @01orbital/separator @01orbital/sheet