MobileMenuDrawer

Full-screen mobile navigation drawer: slide-in panel with nav items, social links, and the JA/EN language switcher.

Navigation

Open (JA)

Open (EN)

Closed

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for MobileMenuDrawer — new gap story (epic #1647 Wave 6, #1663). // Pairs with the already-storied MobileMenuToggle (mobile-menu-toggle.stories.tsx). // // MobileMenuDrawer reads `useDictionary()`/`useLocale()` (throws outside a // LocaleProvider — see lib/i18n/locale-context.tsx) and portals into // `document.body` unconditionally (unlike BaseDialog/NotifyMeDialog, it takes // no `portalContainer` prop). That's safe here: each story variant renders // inside its OWN isolated preview iframe (variant-frame.tsx), so `document.body` // IS the iframe's own body — no local DialogStoryContainer needed. // // The drawer is `position: fixed; inset: 0` (`h-full w-full`), which does NOT // contribute to `document.body.scrollHeight` — the signal the catalog's // preview iframe uses to size itself (preview-app.tsx). `DrawerDemo`'s wrapper // below carries an explicit `min-h-[480px]` for exactly this reason: without // it, the iframe stays at its ~180px default and clips the drawer's own // content (nav items, social links, language switcher). See // module-dialog.stories.tsx for the same fix on a portaled-fixed component. import { useState } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { LocaleProvider } from '@/lib/i18n/locale-context'; import { getDictionary } from '@/lib/i18n/get-dictionary'; import type { Locale } from '@/lib/i18n/types'; import MobileMenuDrawer from './mobile-menu-drawer'; import { ActionButton } from '@takazudo-modular/ui-preact/action-button'; const meta: StoryMeta = { title: 'MobileMenuDrawer', category: 'Navigation', description: 'Full-screen mobile navigation drawer: slide-in panel with nav items, social links, and the JA/EN language switcher.', usage: `import MobileMenuDrawer from '@/components/shared/mobile-menu-drawer';\n\n<MobileMenuDrawer isOpen={isOpen} onClose={close} navigationItems={items} logoNavInfo={logos} currentPath="/" searchHref="/search/" />`, }; export default meta; const NAV_ITEMS = [ { key: 1, label: '製品一覧', href: '/products/' }, { key: 2, label: 'ブランド', href: '/brands/' }, { key: 3, label: 'お知らせ', href: '/notes/' }, { key: 4, label: 'サポート', href: '/support/' }, ]; const LOGO_NAV_INFO = [ { logo: <span aria-hidden="true">M</span>, href: 'https://jp.mercari.com/shops/' }, { logo: <span aria-hidden="true">D</span>, href: 'https://discord.gg/example' }, ]; /** Trigger button + drawer, so the story shows a real open/close interaction. */ const DrawerDemo = ({ locale, initialOpen = true }: { locale: Locale; initialOpen?: boolean }) => { const [isOpen, setIsOpen] = useState(initialOpen); return ( <LocaleProvider locale={locale} dictionary={getDictionary(locale)}> <div className="relative min-h-[480px] bg-zd-black"> <div className="p-hgap-sm"> <ActionButton onClick={() => setIsOpen(true)}>メニューを開く</ActionButton> </div> <MobileMenuDrawer isOpen={isOpen} onClose={() => setIsOpen(false)} navigationItems={NAV_ITEMS} logoNavInfo={LOGO_NAV_INFO} currentPath="/products/" searchHref="/search/" /> </div> </LocaleProvider> ); }; export const Open = defineStory({ name: 'Open (JA)', render: () => <DrawerDemo locale="ja" initialOpen={true} />, }); export const OpenEnglish = defineStory({ name: 'Open (EN)', render: () => <DrawerDemo locale="en" initialOpen={true} />, }); export const Closed = defineStory({ name: 'Closed', render: () => <DrawerDemo locale="ja" initialOpen={false} />, });