Navigation rail

import { useState } from 'react';
import {
  Icon,
  IconButton,
  type NavigationDestination,
  WideNavigationRail,
} from '@kyralabs/m3exp-web/react';

const ITEMS: NavigationDestination[] = [
  { key: 'home', icon: 'home', label: 'Home' },
  { key: 'search', icon: 'search', label: 'Search' },
  { key: 'mail', icon: 'mail', label: 'Mail', badge: 3 },
  { key: 'settings', icon: 'settings', label: 'Settings' },
];

export default function Wide() {
  const [expanded, setExpanded] = useState(false);
  return (
    <div style={{ display: 'flex', blockSize: 'var(--m3e-sys-window-height-medium)' }}>
      <WideNavigationRail
        aria-label="Main, wide"
        isExpanded={expanded}
        items={ITEMS}
        defaultSelectedKey="home"
        header={
          <IconButton
            aria-label={expanded ? 'Collapse navigation' : 'Expand navigation'}
            aria-expanded={expanded}
            onPress={() => {
              setExpanded((e) => !e);
            }}
          >
            <Icon name={expanded ? 'menu_open' : 'menu'} />
          </IconButton>
        }
      />
    </div>
  );
}

<div style="display: flex; block-size: var(--m3e-sys-window-height-medium)">
  <m3e-wide-navigation-rail id="rail" label="Main, wide" selected="home">
    <button
      type="button"
      class="m3e-icon-button m3e-icon-button--standard"
      aria-label="Expand navigation"
      aria-expanded="false"
    >
      <span class="m3e-icon" aria-hidden="true">menu</span>
    </button>
    <m3e-navigation-item value="home" icon="home">Home</m3e-navigation-item>
    <m3e-navigation-item value="search" icon="search">Search</m3e-navigation-item>
    <m3e-navigation-item value="mail" icon="mail" badge="3">Mail</m3e-navigation-item>
    <m3e-navigation-item value="settings" icon="settings">Settings</m3e-navigation-item>
  </m3e-wide-navigation-rail>
</div>
<script>
  const rail = document.getElementById('rail');
  const menu = rail.querySelector('button');
  menu.addEventListener('click', () => rail.toggle());
  rail.addEventListener('expanded-change', (event) => {
    if (event.target !== rail) return; // state events bubble in 1.x (D25)
    const { expanded } = event.detail;
    menu.setAttribute('aria-expanded', String(expanded));
    menu.setAttribute('aria-label', expanded ? 'Collapse navigation' : 'Expand navigation');
    menu.querySelector('.m3e-icon').textContent = expanded ? 'menu_open' : 'menu';
  });
</script>

import { useState } from 'react';
import {
  Icon,
  IconButton,
  ModalWideNavigationRail,
  type NavigationDestination,
} from '@kyralabs/m3exp-web/react';

const ITEMS: NavigationDestination[] = [
  { key: 'home', icon: 'home', label: 'Home' },
  { key: 'search', icon: 'search', label: 'Search' },
  { key: 'mail', icon: 'mail', label: 'Mail' },
  { key: 'settings', icon: 'settings', label: 'Settings' },
];

/** Collapsed it is a rail; the menu button opens it as a modal window over the page. */
export default function Modal() {
  const [expanded, setExpanded] = useState(false);
  return (
    <div style={{ display: 'flex', blockSize: 'var(--m3e-sys-window-height-medium)' }}>
      <ModalWideNavigationRail
        aria-label="Main, modal"
        items={ITEMS}
        defaultSelectedKey="home"
        isExpanded={expanded}
        onExpandedChange={setExpanded}
        header={
          <IconButton
            aria-label={expanded ? 'Close navigation' : 'Open navigation'}
            aria-expanded={expanded}
            onPress={() => {
              setExpanded((e) => !e);
            }}
          >
            <Icon name={expanded ? 'menu_open' : 'menu'} />
          </IconButton>
        }
      />
    </div>
  );
}

<div style="display: flex; block-size: var(--m3e-sys-window-height-medium)">
  <m3e-modal-wide-navigation-rail id="modal-rail" label="Main, modal" selected="home">
    <button
      type="button"
      class="m3e-icon-button m3e-icon-button--standard"
      aria-label="Open navigation"
      aria-expanded="false"
    >
      <span class="m3e-icon" aria-hidden="true">menu</span>
    </button>
    <m3e-navigation-item value="home" icon="home">Home</m3e-navigation-item>
    <m3e-navigation-item value="search" icon="search">Search</m3e-navigation-item>
    <m3e-navigation-item value="mail" icon="mail">Mail</m3e-navigation-item>
    <m3e-navigation-item value="settings" icon="settings">Settings</m3e-navigation-item>
  </m3e-modal-wide-navigation-rail>
</div>
<script>
  const rail = document.getElementById('modal-rail');
  const menu = rail.querySelector('button');
  menu.addEventListener('click', () => rail.toggle());
  rail.addEventListener('expanded-change', (event) => {
    if (event.target !== rail) return; // state events bubble in 1.x (D25)
    const { expanded } = event.detail;
    menu.setAttribute('aria-expanded', String(expanded));
    menu.setAttribute('aria-label', expanded ? 'Close navigation' : 'Open navigation');
    menu.querySelector('.m3e-icon').textContent = expanded ? 'menu_open' : 'menu';
  });
</script>

import { type NavigationDestination, NavigationRail } from '@kyralabs/m3exp-web/react';

const ITEMS: NavigationDestination[] = [
  { key: 'home', icon: 'home', label: 'Home' },
  { key: 'search', icon: 'search', label: 'Search' },
  { key: 'settings', icon: 'settings', label: 'Settings' },
];

/** Deprecated (D4): use WideNavigationRail. */
export default function LegacyNavigationRail() {
  return (
    <div style={{ display: 'flex', blockSize: 'var(--m3e-sys-window-height-medium)' }}>
      <NavigationRail aria-label="Main, legacy" items={ITEMS} defaultSelectedKey="home" />
    </div>
  );
}

<!-- Deprecated (D4). The CSS classes only lay the rail out: selection and focus are yours
     (m3e-react's <NavigationRail> handles them). -->
<div style="display: flex; block-size: var(--m3e-sys-window-height-medium)">
  <nav class="m3e-navigation-rail" aria-label="Main, legacy">
    <button type="button" class="m3e-navigation-item" aria-current="page">
      <span class="m3e-navigation-item__content">
        <span class="m3e-navigation-item__indicator" aria-hidden="true"></span>
        <span class="m3e-navigation-item__state" aria-hidden="true"></span>
        <span class="m3e-icon m3e-navigation-item__icon" aria-hidden="true">home</span>
        <span class="m3e-navigation-item__label">Home</span>
      </span>
    </button>
    <button type="button" class="m3e-navigation-item">
      <span class="m3e-navigation-item__content">
        <span class="m3e-navigation-item__indicator" aria-hidden="true"></span>
        <span class="m3e-navigation-item__state" aria-hidden="true"></span>
        <span class="m3e-icon m3e-navigation-item__icon" aria-hidden="true">search</span>
        <span class="m3e-navigation-item__label">Search</span>
      </span>
    </button>
    <button type="button" class="m3e-navigation-item">
      <span class="m3e-navigation-item__content">
        <span class="m3e-navigation-item__indicator" aria-hidden="true"></span>
        <span class="m3e-navigation-item__state" aria-hidden="true"></span>
        <span class="m3e-icon m3e-navigation-item__icon" aria-hidden="true">settings</span>
        <span class="m3e-navigation-item__label">Settings</span>
      </span>
    </button>
  </nav>
</div>