Top navigation

import {SearchIcon} from '@earendil-works/elanor-icons-react';
import {Link, TopNavigation} from '@earendil-works/elanor-react';

import styles from './top-navigation.module.css';

export default function TopNavigationDemo() {
  return (
    <TopNavigation.Root>
      <TopNavigation.Identity>
        <Link href="#">Acme</Link>
      </TopNavigation.Identity>
      <TopNavigation.Navigation>
        <nav aria-label="Main" className={styles.links}>
          <TopNavigation.Link href="#">Product</TopNavigation.Link>
          <TopNavigation.Link href="#">Pricing</TopNavigation.Link>
          <TopNavigation.Link href="#" active>
            Docs
          </TopNavigation.Link>
        </nav>
      </TopNavigation.Navigation>
      <TopNavigation.Actions>
        <TopNavigation.ActionButton aria-label="Search">
          <SearchIcon aria-hidden />
        </TopNavigation.ActionButton>
        <Link href="#">Sign in</Link>
      </TopNavigation.Actions>
    </TopNavigation.Root>
  );
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--semantic-dimension-space-gap-medium);
}

import {Link, TopNavigation} from '@earendil-works/elanor-react';

import styles from './centered.module.css';

export default function TopNavigationCentered() {
  return (
    <div className={styles.frame}>
      <TopNavigation.Root className={styles.header}>
        <TopNavigation.Identity>
          <Link href="#">Acme</Link>
        </TopNavigation.Identity>
        <TopNavigation.Navigation className={styles.navigation}>
          <nav aria-label="Main" className={styles.links}>
            <TopNavigation.Link href="#">Product</TopNavigation.Link>
            <TopNavigation.Link href="#">Pricing</TopNavigation.Link>
            <TopNavigation.Link href="#" active>
              Docs
            </TopNavigation.Link>
          </nav>
        </TopNavigation.Navigation>
        <TopNavigation.Actions className={styles.actions}>
          <Link href="#">Contact sales</Link>
          <Link href="#">Sign in</Link>
        </TopNavigation.Actions>
      </TopNavigation.Root>
    </div>
  );
}

.frame {
  container: navigation / inline-size;
}

.header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Two rows in narrow containers: opt out of the bar's fixed height. */
  block-size: auto;
  padding-block: var(--semantic-dimension-space-padding-xx-large);
}

.navigation {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: center;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--semantic-dimension-space-gap-medium);
}

.actions {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

/* Container queries can't use var(), so the threshold is the token's resolved value. */
@container navigation (width >= 40rem /* token: semantic.dimension.breakpoint.xSmall */) {
  .header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    block-size: var(--semantic-dimension-size-top-navigation);
    padding-block: 0;
  }

  .navigation {
    grid-column: 2;
    grid-row: 1;
  }

  .actions {
    grid-column: 3;
  }
}

import {Link, TopNavigation} from '@earendil-works/elanor-react';

import styles from './stacked.module.css';

export default function TopNavigationStacked() {
  return (
    <TopNavigation.Root className={styles.header}>
      <TopNavigation.Identity>
        <Link href="#">Acme</Link>
      </TopNavigation.Identity>
      <TopNavigation.Actions className={styles.actions}>
        <Link href="#">Sign in</Link>
      </TopNavigation.Actions>
      <TopNavigation.Navigation className={styles.navigation}>
        <nav aria-label="Main" className={styles.links}>
          <TopNavigation.Link href="#">Product</TopNavigation.Link>
          <TopNavigation.Link href="#">Pricing</TopNavigation.Link>
          <TopNavigation.Link href="#" active>
            Docs
          </TopNavigation.Link>
        </nav>
      </TopNavigation.Navigation>
    </TopNavigation.Root>
  );
}

.header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Two rows: opt out of the bar's fixed height. */
  block-size: auto;
  padding-block: var(--semantic-dimension-space-padding-xx-large);
}

.actions {
  justify-self: end;
}

.navigation {
  grid-column: 1 / -1;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--semantic-dimension-space-gap-medium);
}

import {Link, Text, TopNavigation} from '@earendil-works/elanor-react';
import {useRef} from 'react';

import styles from './menu.module.css';

const start = ['Introduction', 'Installation'];
const guides = ['Deploying a project', 'Rollbacks'];
const reference = ['Command-line tool', 'Configuration file'];

export default function TopNavigationMenuDemo() {
  const frameRef = useRef<HTMLDivElement>(null);
  return (
    <div ref={frameRef} className={styles.frame}>
      <TopNavigation.Root className={styles.header}>
        <TopNavigation.Identity>
          <Link href="#">Acme</Link>
        </TopNavigation.Identity>
        <TopNavigation.Actions>
          <TopNavigation.Menu defaultPanel="main">
            <TopNavigation.MenuTrigger aria-label="Navigation menu" />
            <TopNavigation.MenuPopup aria-label="Navigation menu" container={frameRef}>
              <nav aria-label="Main">
                <TopNavigation.MenuPanel panel="main">
                  <TopNavigation.MenuList>
                    <TopNavigation.MenuItem>
                      <TopNavigation.MenuPanelTrigger panel="docs" active>
                        Docs
                      </TopNavigation.MenuPanelTrigger>
                    </TopNavigation.MenuItem>
                    <TopNavigation.MenuItem>
                      <TopNavigation.MenuLink href="#">Packages</TopNavigation.MenuLink>
                    </TopNavigation.MenuItem>
                    <TopNavigation.MenuItem>
                      <TopNavigation.MenuLink href="#">News</TopNavigation.MenuLink>
                    </TopNavigation.MenuItem>
                  </TopNavigation.MenuList>
                </TopNavigation.MenuPanel>
                <TopNavigation.MenuPanel panel="docs" parent="main" backLabel="Main menu">
                  <TopNavigation.MenuGroup>
                    <TopNavigation.MenuGroupLabel>Get started</TopNavigation.MenuGroupLabel>
                    <TopNavigation.MenuList>
                      {start.map((page) => (
                        <TopNavigation.MenuItem key={page}>
                          <TopNavigation.MenuLink href="#">{page}</TopNavigation.MenuLink>
                        </TopNavigation.MenuItem>
                      ))}
                    </TopNavigation.MenuList>
                  </TopNavigation.MenuGroup>
                  <TopNavigation.MenuGroup>
                    <TopNavigation.MenuGroupLabel>Learn</TopNavigation.MenuGroupLabel>
                    <TopNavigation.MenuList>
                      <TopNavigation.MenuItem>
                        <TopNavigation.MenuCollapsible defaultOpen>
                          <TopNavigation.MenuCollapsibleTrigger>
                            Guides
                          </TopNavigation.MenuCollapsibleTrigger>
                          <TopNavigation.MenuCollapsiblePanel>
                            <TopNavigation.MenuList>
                              {guides.map((page) => (
                                <TopNavigation.MenuItem key={page}>
                                  <TopNavigation.MenuLink href="#" active={page === 'Rollbacks'}>
                                    {page}
                                  </TopNavigation.MenuLink>
                                </TopNavigation.MenuItem>
                              ))}
                            </TopNavigation.MenuList>
                          </TopNavigation.MenuCollapsiblePanel>
                        </TopNavigation.MenuCollapsible>
                      </TopNavigation.MenuItem>
                      <TopNavigation.MenuItem>
                        <TopNavigation.MenuCollapsible>
                          <TopNavigation.MenuCollapsibleTrigger>
                            Reference
                          </TopNavigation.MenuCollapsibleTrigger>
                          <TopNavigation.MenuCollapsiblePanel>
                            <TopNavigation.MenuList>
                              {reference.map((page) => (
                                <TopNavigation.MenuItem key={page}>
                                  <TopNavigation.MenuLink href="#">{page}</TopNavigation.MenuLink>
                                </TopNavigation.MenuItem>
                              ))}
                            </TopNavigation.MenuList>
                          </TopNavigation.MenuCollapsiblePanel>
                        </TopNavigation.MenuCollapsible>
                      </TopNavigation.MenuItem>
                    </TopNavigation.MenuList>
                  </TopNavigation.MenuGroup>
                </TopNavigation.MenuPanel>
              </nav>
            </TopNavigation.MenuPopup>
          </TopNavigation.Menu>
        </TopNavigation.Actions>
      </TopNavigation.Root>
      <div className={styles.content}>
        <Text>Open the menu, then open Docs.</Text>
      </div>
    </div>
  );
}

.frame {
  /* Demo only: the fixed menu is placed within the frame. Layout containment only: with paint
     containment, WebKit misses clicks on the menu's panels. */
  contain: layout;
  /* stylelint-disable-next-line design-tokens/no-hardcoded-token-values -- Demo frame size. */
  block-size: 28rem;
  border: var(--semantic-dimension-border-width-default) solid
    var(--semantic-color-border-secondary);
}

.header {
  padding-inline: var(--semantic-dimension-space-padding-x-large);
  border-block-end: var(--semantic-dimension-border-width-small) solid
    var(--semantic-color-border-secondary);
}

.content {
  padding: var(--semantic-dimension-space-padding-x-large);
}

import {CloseIcon, MenuIcon} from '@earendil-works/elanor-icons-react';
import {
  Drawer,
  Heading,
  IconButton,
  Layout,
  Link,
  SideNavigation,
  Sidebar,
  Stack,
  Text,
  TopNavigation,
  type DrawerRootActions,
} from '@earendil-works/elanor-react';
import {useEffect, useRef, useState} from 'react';

import styles from './responsive.module.css';

const pages = ['Overview', 'Projects', 'Activity', 'Members', 'Usage', 'Billing', 'Settings'];

function Destinations({
  active,
  collapsed = false,
  onSelect,
}: {
  readonly active: string;
  readonly collapsed?: boolean;
  readonly onSelect: (page: string) => void;
}) {
  return (
    <SideNavigation.Root aria-label="Workspace" variant={collapsed ? 'compact' : 'default'}>
      <SideNavigation.List>
        {pages.map((page) => (
          <SideNavigation.Item key={page}>
            <SideNavigation.Link
              href="#"
              active={active === page}
              compactContent={page.slice(0, 2)}
              onClick={(event) => {
                // This demo selects local content; real applications supply their router links.
                event.preventDefault();
                onSelect(page);
              }}
            >
              {page}
            </SideNavigation.Link>
          </SideNavigation.Item>
        ))}
      </SideNavigation.List>
    </SideNavigation.Root>
  );
}

function Resources({onNavigate}: {readonly onNavigate?: () => void}) {
  return (
    <nav aria-label="Resources" className={styles.links}>
      <Link href="#" onClick={onNavigate}>
        Docs
      </Link>
      <Link href="#" onClick={onNavigate}>
        Support
      </Link>
    </nav>
  );
}

export default function TopNavigationResponsive() {
  const [active, setActive] = useState('Overview');
  const [collapsed, setCollapsed] = useState(false);
  const actionsRef = useRef<DrawerRootActions>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const contentRef = useRef<HTMLElement>(null);
  // Only for this demo: the drawer opens inside the application frame, not over the docs page.
  const applicationRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // CSS owns presentation. Only release the modal when its trigger becomes unavailable.
    const breakpoint = getComputedStyle(document.documentElement)
      .getPropertyValue('--semantic-dimension-breakpoint-medium')
      .trim();
    const desktop = window.matchMedia(`(min-width: ${breakpoint})`);
    const close = () => actionsRef.current?.close();
    const onBreakpointChange = () => {
      if (desktop.matches) close();
    };
    desktop.addEventListener('change', onBreakpointChange);
    return () => desktop.removeEventListener('change', onBreakpointChange);
  }, []);

  return (
    <Drawer.Root actionsRef={actionsRef} swipeDirection="left">
      <Layout.Root
        ref={applicationRef}
        render={<section aria-label="Acme workspace" />}
        className={styles.application}
      >
        <Layout.Header render={<TopNavigation.Root />} className={styles.header}>
          <TopNavigation.Identity>
            <Link href="#">Acme workspace</Link>
          </TopNavigation.Identity>
          <TopNavigation.Navigation className={styles.desktopOnly}>
            <Resources />
          </TopNavigation.Navigation>
          <TopNavigation.Actions className={styles.mobileOnly}>
            <Drawer.Trigger
              ref={triggerRef}
              render={<IconButton aria-label="Open workspace navigation" />}
            >
              <MenuIcon />
            </Drawer.Trigger>
          </TopNavigation.Actions>
        </Layout.Header>
        <Layout.Body className={styles.body}>
          <Sidebar.Root
            collapsed={collapsed}
            onCollapsedChange={setCollapsed}
            render={<Layout.Aside aria-label="Workspace sidebar" />}
            className={`${styles.desktopOnly} ${styles.sidebar}`}
          >
            <Sidebar.Header>
              <Sidebar.Trigger />
            </Sidebar.Header>
            <Sidebar.Content>
              <Destinations active={active} collapsed={collapsed} onSelect={setActive} />
            </Sidebar.Content>
          </Sidebar.Root>
          <Layout.Main render={<div />} ref={contentRef} tabIndex={-1} className={styles.content}>
            <Heading level={3}>{active}</Heading>
            <Text>Select a destination, or resize the window with the drawer open.</Text>
          </Layout.Main>
        </Layout.Body>
      </Layout.Root>
      <Drawer.Portal container={applicationRef} className={styles.overlay}>
        <Drawer.Backdrop />
        <Drawer.Viewport>
          <Drawer.Popup
            finalFocus={() =>
              triggerRef.current?.getClientRects().length ? triggerRef.current : contentRef.current
            }
          >
            <Drawer.Content>
              <Stack align="stretch" gap="large">
                <Stack direction="row" align="center" gap="auto">
                  <Drawer.Title>Workspace navigation</Drawer.Title>
                  <Drawer.Close render={<IconButton aria-label="Close workspace navigation" />}>
                    <CloseIcon />
                  </Drawer.Close>
                </Stack>
                <Destinations
                  active={active}
                  onSelect={(page) => {
                    setActive(page);
                    actionsRef.current?.close();
                  }}
                />
                <Resources onNavigate={() => actionsRef.current?.close()} />
              </Stack>
            </Drawer.Content>
          </Drawer.Popup>
        </Drawer.Viewport>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

.application {
  /* Demo only: fixed-position drawer parts are placed and clipped within the frame. */
  contain: layout paint;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  /* stylelint-disable-next-line design-tokens/no-hardcoded-token-values -- Demo frame size. */
  block-size: 30rem;
  min-block-size: 0;
  border: var(--semantic-dimension-border-width-default) solid
    var(--semantic-color-border-secondary);
}

.header {
  padding: var(--semantic-dimension-space-padding-large);
  border-block-end: var(--semantic-dimension-border-width-default) solid
    var(--semantic-color-border-secondary);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--semantic-dimension-space-gap-medium);
}

.body {
  min-block-size: 0;
}

.content {
  overflow: auto;
  padding: var(--semantic-dimension-space-padding-x-large);
}

/* Anchor the Drawer to the viewport above the application. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--semantic-number-layer-overlay);
}

.desktopOnly {
  display: none;
}

/* Media queries can't use var(), so the threshold is the token's resolved value. */
@media (width >= 64rem /* token: semantic.dimension.breakpoint.medium */) {
  .desktopOnly {
    display: flex;
  }

  .sidebar {
    position: static;
    block-size: 100%;
    max-block-size: 100%;
  }

  .mobileOnly {
    display: none;
  }
}