103 lines
4.0 KiB
Svelte
103 lines
4.0 KiB
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 initialWidth={375}>
|
||
|
|
<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>
|