frontend-svelte/src/shared/ui/SidebarContainer/SidebarContainer.stories.svelte

<script module>
import { Providers } from '$shared/lib/storybook';
import { defineMeta } from '@storybook/addon-svelte-csf';
import SidebarContainer from './SidebarContainer.svelte';

const { Story } = defineMeta({
    title: 'Shared/SidebarContainer',
    component: SidebarContainer,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Responsive sidebar container. On desktop it collapses to zero width with a CSS transition. On mobile it renders as a slide-in drawer over a backdrop overlay. The `sidebar` prop is a snippet that receives `{ onClose }` so the sidebar content can dismiss itself.',
            },
            story: { inline: false },
        },
        layout: 'fullscreen',
    },
    argTypes: {
        isOpen: {
            control: 'boolean',
            description: 'Whether the sidebar is open (bindable)',
        },
        class: {
            control: 'text',
            description: 'Additional CSS classes applied to the desktop wrapper element',
        },
    },
});
</script>

<Story name="Desktop Open">
    {#snippet template()}
        <Providers>
            <div class="h-64 flex relative overflow-hidden">
                <SidebarContainer isOpen={true}>
                    {#snippet sidebar({ onClose })}
                        <div class="w-80 h-full bg-white p-4 border-r border-neutral-200 flex flex-col gap-3">
                            <button
                                onclick={onClose}
                                class="self-start text-sm text-neutral-500 hover:text-neutral-900"
                            >
                                Close
                            </button>
                            <p class="text-sm text-neutral-700">Sidebar Content</p>
                        </div>
                    {/snippet}
                </SidebarContainer>
                <div class="flex-1 p-4 bg-neutral-50 text-sm text-neutral-500">Main content</div>
            </div>
        </Providers>
    {/snippet}
</Story>

<Story name="Desktop Closed">
    {#snippet template()}
        <Providers>
            <div class="h-64 flex relative overflow-hidden">
                <SidebarContainer isOpen={false}>
                    {#snippet sidebar({ onClose })}
                        <div class="w-80 h-full bg-white p-4 border-r border-neutral-200 flex flex-col gap-3">
                            <button
                                onclick={onClose}
                                class="self-start text-sm text-neutral-500 hover:text-neutral-900"
                            >
                                Close
                            </button>
                            <p class="text-sm text-neutral-700">Sidebar Content</p>
                        </div>
                    {/snippet}
                </SidebarContainer>
                <div class="flex-1 p-4 bg-neutral-50 text-sm text-neutral-500">
                    Main content — sidebar is collapsed to zero width
                </div>
            </div>
        </Providers>
    {/snippet}
</Story>

<Story name="Mobile Open">
    {#snippet template()}
        <Providers>
            <div class="h-64 relative overflow-hidden">
                <SidebarContainer isOpen={true}>
                    {#snippet sidebar({ onClose })}
                        <div class="w-80 h-full bg-white p-4 flex flex-col gap-3">
                            <button
                                onclick={onClose}
                                class="self-start text-sm text-neutral-500 hover:text-neutral-900"
                            >
                                Close
                            </button>
                            <p class="text-sm text-neutral-700">Sidebar Content</p>
                        </div>
                    {/snippet}
                </SidebarContainer>
                <div class="p-4 bg-neutral-50 text-sm text-neutral-500">Main content</div>
            </div>
        </Providers>
    {/snippet}
</Story>