Sections with panels, and a plain link

// apps/docs/examples/ui/navigation-menu.tsx'use client';
import {  NavigationMenu,  NavigationMenuContent,  NavigationMenuItem,  NavigationMenuLink,  NavigationMenuList,  NavigationMenuTrigger,} from '@workspace/active-ui/components/primitives/navigation-menu';
// Invented sections; the links point to anchors, nothing navigates.const SECTIONS = [  {    trigger: 'Pension',    links: [      {title: 'Participants', description: 'Active and deferred members.'},      {title: 'Schemes', description: 'Accrual rules per scheme.'},      {title: 'Calculations', description: 'Batches and their results.'},    ],  },  {    trigger: 'Relations',    links: [      {title: 'Persons', description: 'The register of people.'},      {title: 'Organisations', description: 'Employers and providers.'},    ],  },] as const;
const anchor = (title: string) =>  `#nav-${title.toLowerCase().replaceAll(' ', '-')}`;
/** * The main navigation of a site: sections whose links open in a panel below * the bar, and a plain link beside them. Moving from one section to the * next keeps the panel open and slides it to the new content. */export default function NavigationMenuExample() {  return (    <NavigationMenu aria-label="Main">      <NavigationMenuList>        {SECTIONS.map((section) => (          <NavigationMenuItem key={section.trigger}>            <NavigationMenuTrigger>{section.trigger}</NavigationMenuTrigger>            <NavigationMenuContent>              <ul className="grid w-72 gap-1">                {section.links.map((link) => (                  <li key={link.title}>                    <NavigationMenuLink                      href={anchor(link.title)}                      className="flex-col items-start gap-0.5"                    >                      <span className="font-medium">{link.title}</span>                      <span className="text-muted-foreground">                        {link.description}                      </span>                    </NavigationMenuLink>                  </li>                ))}              </ul>            </NavigationMenuContent>          </NavigationMenuItem>        ))}        <NavigationMenuItem>          <NavigationMenuLink href={anchor('Reports')}>            Reports          </NavigationMenuLink>        </NavigationMenuItem>      </NavigationMenuList>    </NavigationMenu>  );}