Navigation menu

"use client"

import { NavigationMenu } from "@base-ui/react/navigation-menu"
import type { DemoProps } from "@/components/demos/props"

/* Base UI splits the navigation menu differently from Radix: the shared popup
 * is positioned outside the list, and the Viewport inside it is what the active
 * Content renders into. The animated element is therefore the Popup, not the
 * Content. */
export function BaseUiNavigationMenu({ motion }: DemoProps) {
  return (
    <NavigationMenu.Root className="navmenu">
      <NavigationMenu.List className="navmenu__list">
        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="tab">Products</NavigationMenu.Trigger>
          <NavigationMenu.Content className="navmenu__content">
            <NavigationMenu.Link className="navmenu__link" href="#products">
              Motion presets
            </NavigationMenu.Link>
            <NavigationMenu.Link className="navmenu__link" href="#products">
              Host adapters
            </NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="tab">Company</NavigationMenu.Trigger>
          <NavigationMenu.Content className="navmenu__content">
            <NavigationMenu.Link className="navmenu__link" href="#company">
              About
            </NavigationMenu.Link>
            <NavigationMenu.Link className="navmenu__link" href="#company">
              Changelog
            </NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
      </NavigationMenu.List>
      <NavigationMenu.Portal>
        <NavigationMenu.Positioner sideOffset={8} collisionPadding={16}>
          <NavigationMenu.Popup className="navmenu__popup" data-motion={motion}>
            <NavigationMenu.Viewport />
          </NavigationMenu.Popup>
        </NavigationMenu.Positioner>
      </NavigationMenu.Portal>
    </NavigationMenu.Root>
  )
}