Prism Docs

import { NavigationMenu } from '@mylighthouse/prism-react';
import { useEffect, useState } from 'react';

export default function NavigationMenuExample(): React.JSX.Element {
  const [section, setSection] = useState('overview');

  useEffect(() => {
    const sync = (): void =>
      setSection(window.location.hash.slice(1) || 'overview');

    sync();
    window.addEventListener('hashchange', sync);
    return (): void => {
      window.removeEventListener('hashchange', sync);
    };
  }, []);

  return (
    <NavigationMenu>
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Link
            active={section === 'overview'}
            href="components/navigation-menu/#overview"
          >
            Overview
          </NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item
          active={['daily', 'weekly', 'monthly'].includes(section)}
        >
          <NavigationMenu.Trigger>Reports</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.Content.Item
              active={section === 'daily'}
              href="components/navigation-menu/#daily"
            >
              Daily
            </NavigationMenu.Content.Item>
            <NavigationMenu.Content.Item
              active={section === 'weekly'}
              href="components/navigation-menu/#weekly"
            >
              Weekly
            </NavigationMenu.Content.Item>
            <NavigationMenu.Content.Item
              active={section === 'monthly'}
              href="components/navigation-menu/#monthly"
            >
              Monthly
            </NavigationMenu.Content.Item>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link
            active={section === 'settings'}
            href="components/navigation-menu/#settings"
          >
            Settings
          </NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu>
  );
}