DesktopTocRail

Static shell for the xl+ sticky article TOC rail. It is always expanded; its localized navigation name is accessible without a visible kicker or collapse control.

Navigation

Active section

No active section

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Static shell story for the permanently expanded desktop TOC rail. The real // island scans the article document, so this fixture deliberately mirrors only // its rendered rail markup and leaves DOM scanning to the focused DOM tests. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { isTocItemActive, RAIL_LABEL_JA } from './desktop-toc-rail'; import type { TocItem } from './floating-toc'; const meta: StoryMeta = { title: 'DesktopTocRail', category: 'Navigation', description: 'Static shell for the xl+ sticky article TOC rail. It is always expanded; its localized navigation name is accessible without a visible kicker or collapse control.', usage: `import DesktopTocRail from '@/src/components/islands/desktop-toc-rail';\n\n<DesktopTocRail />`, }; export default meta; const demoItems: TocItem[] = [ { href: '#section-1', text: 'はじめに' }, { href: '#section-2', text: 'モジュールの選び方' }, { href: '#section-3', text: 'パッチの組み方' }, { href: '#section-4', text: 'まとめ' }, ]; function RailShell({ activeId }: { activeId: string | null }) { return ( <div className="grid min-h-[520px] grid-cols-[minmax(0,1fr)_auto]"> <div className="border-r border-zd-gray2 p-hgap-md text-zd-subtext">記事本文の主カラム</div> <aside> <div className="zd-desktop-toc-rail"> <nav className="zd-desktop-toc-rail-scroller" aria-label={RAIL_LABEL_JA}> <ul className="zd-desktop-toc-rail-list"> {demoItems.map((item) => { const active = isTocItemActive(item.href, activeId); return ( <li key={item.href} className="zd-desktop-toc-rail-item"> <a href={item.href} className={ active ? 'zd-desktop-toc-rail-link is-active' : 'zd-desktop-toc-rail-link' } aria-current={active ? 'true' : undefined} > {item.text} </a> </li> ); })} </ul> </nav> </div> </aside> </div> ); } export const ActiveSection = defineStory({ name: 'Active section', render: () => <RailShell activeId="section-2" />, }); export const NoActiveSection = defineStory({ name: 'No active section', render: () => <RailShell activeId={null} />, });