App shell

const sidebarId = useId();
const navButton = useRef<HTMLButtonElement>(null);

<div className="shell">
  <Stack.Root as="header" direction="row" align="center" gap="condensed">
    <VisuallyHidden.Root focusable>
      <Link.Root href="#main">Skip to content</Link.Root>
    </VisuallyHidden.Root>
    <Button.Root ref={navButton} variant="ghost" aria-label="Navigation">
      …
    </Button.Root>
    <Text.Root as="span" weight="bold">
      Atlas
    </Text.Root>
    <Toolbar.Root aria-label="Account">…</Toolbar.Root>
  </Stack.Root>
  <Splitter.Root value={width} onValueChange={setWidth} min={180} max={360} collapsible>
    <Splitter.Panel id={sidebarId}>…</Splitter.Panel>
    <Splitter.Handle aria-label="Resize navigation" />
    <Splitter.Panel>
      <main id="main" tabIndex={-1}>
        …
      </main>
    </Splitter.Panel>
  </Splitter.Root>
</div>

.shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  block-size: 100dvh;
}

const [width, setWidth] = useState(240);
const [lastWidth, setLastWidth] = useState(240);
const resize = (next: number) => {
  if (next > 0) setLastWidth(next);
  setWidth(next);
};
const toggleSidebar = () => setWidth(width === 0 ? lastWidth : 0);

import { MenuIcon, PanelLeft } from 'lucide-react';

const WIDE = '(min-width: 48rem)';

function subscribe(onChange: () => void) {
  const query = window.matchMedia(WIDE);
  query.addEventListener('change', onChange);
  return () => query.removeEventListener('change', onChange);
}

function useWide() {
  return useSyncExternalStore(subscribe, () => window.matchMedia(WIDE).matches, () => false);
}

const wide = useWide();
const sidebarId = useId();
const navButton = useRef<HTMLButtonElement>(null);
const handle = useRef<HTMLDivElement>(null);
const sidebarHandoff = useFocusHandoff({ to: navButton });
// A window that widens shows the sidebar, so the drawer closes, and Drawer puts focus back on the button.
if (wide && drawerOpen) setDrawerOpen(false);
// `show` takes the handle out of the layout, so focus on it moves to the button.
useLayoutEffect(() => {
  if (!wide && handle.current === handle.current?.ownerDocument.activeElement) navButton.current?.focus();
}, [wide]);

<Button.Root
  ref={navButton}
  variant="ghost"
  aria-label="Navigation"
  {...(wide ? { 'aria-controls': sidebarId, 'aria-expanded': width > 0 } : { 'aria-haspopup': 'dialog' as const })}
  onClick={wide ? toggleSidebar : openDrawer}
>
  {wide ? (
    <Button.Icon>
      <PanelLeft />
    </Button.Icon>
  ) : (
    <Button.Icon>
      <MenuIcon />
    </Button.Icon>
  )}
</Button.Root>

<Splitter.Root show={wide ? 'both' : 'end'} value={width} onValueChange={resize} min={180} max={360} collapsible>
  <Splitter.Panel id={sidebarId}>{wide && <div ref={sidebarHandoff}>{nav}</div>}</Splitter.Panel>
  <Splitter.Handle ref={handle} aria-label="Resize navigation" />
  <Splitter.Panel>…</Splitter.Panel>
</Splitter.Root>

const heading = useRef<HTMLElement>(null);
const [navigated, setNavigated] = useState(false);
// `url` comes from your router's location hook: the path, the query string and the hash.
const [shownUrl, setShownUrl] = useState(url);
if (url !== shownUrl) {
  setShownUrl(url);
  setNavigated(drawerOpen && !wide);
  setDrawerOpen(false);
}
const openDrawer = () => {
  setNavigated(false);
  setDrawerOpen(true);
};

<Drawer.Root open={drawerOpen} onOpenChange={setDrawerOpen} side="start" restoreFocusRef={navigated ? heading : navButton}>
  <Drawer.Header>
    <Drawer.Title>Navigation</Drawer.Title>
    <Drawer.Close />
  </Drawer.Header>
  <Drawer.Body
    onClick={(event) => {
      const elsewhere = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
      if (!elsewhere && (event.target as Element).closest('a[aria-current="page"]')) setDrawerOpen(false);
    }}
  >
    {!wide && nav}
  </Drawer.Body>
</Drawer.Root>

<Text.Root as="h1" ref={heading} tabIndex={-1}>
  {page.title}
</Text.Root>