@keboola/design 1.0.0

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,812 @@
+import { useState } from 'react';
+import type { ComponentProps } from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react-vite';
+import type { InputType } from 'storybook/internal/types';
+
+import { cn } from '../../utils';
+import { Button } from '../Button';
+import { ButtonGroup } from '../ButtonGroup';
+import { DropdownMenu } from '../DropdownMenu';
+import { Icon } from '../Icon';
+import { Link } from '../Link';
+import { Modal } from '../Modal';
+
+import { Sidebar } from './Sidebar';
+import { SidebarProvider, useSidebar } from './SidebarProvider';
+import type { SidebarCollapsible, SidebarMode, SidebarSide, SidebarVariant } from './types';
+
+type SidebarProviderDecorator = Decorator<ComponentProps<typeof SidebarProvider>>;
+
+const AppContent = ({
+  className,
+  side,
+  ...props
+}: ComponentProps<'main'> & { side?: SidebarSide | 'both' }) => {
+  const isBoth = side === 'both';
+  const isLeft = side === 'left' || isBoth;
+  const isRight = side === 'right' || isBoth;
+
+  return (
+    <main
+      {...props}
+      className={cn(
+        'tw-w-full tw-gap-4 tw-flex tw-flex-col tw-items-center tw-mx-auto tw-p-8 tw-my-2 tw-bg-white tw-rounded-xl tw-shadow-lg',
+        className,
+      )}
+    >
+      <h1>Keboola App</h1>
+      <div className="tw-flex tw-w-full tw-flex-1 tw-justify-between tw-gap-2">
+        {isLeft && (
+          <div>
+            <h3>Left Controls</h3>
+            <ButtonGroup space="compact">
+              <Sidebar.Trigger side="left">
+                <Button argo icon="sidebar" variant="primary">
+                  Toggle
+                </Button>
+              </Sidebar.Trigger>
+
+              <Sidebar.FillTrigger side="left">
+                <Button argo icon="sidebar" variant="secondary">
+                  Fill
+                </Button>
+              </Sidebar.FillTrigger>
+            </ButtonGroup>
+          </div>
+        )}
+
+        {isRight && (
+          <div>
+            <h3>Right Controls</h3>
+            <ButtonGroup space="compact">
+              <Sidebar.FillTrigger side="right">
+                <Button argo icon="sidebar" variant="secondary">
+                  Fill
+                </Button>
+              </Sidebar.FillTrigger>
+
+              <Sidebar.Trigger side="right">
+                <Button argo icon="sidebar" variant="primary">
+                  Toggle
+                </Button>
+              </Sidebar.Trigger>
+            </ButtonGroup>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+};
+
+const leftLayoutDecorator: SidebarProviderDecorator = (StoryFn) => (
+  <div className="tw-flex tw-flex-1">
+    <StoryFn />
+    <AppContent side="left" />
+  </div>
+);
+
+const rightLayoutDecorator: SidebarProviderDecorator = (StoryFn) => (
+  <div className="tw-flex tw-flex-1">
+    <AppContent side="right" />
+    <StoryFn />
+  </div>
+);
+
+const collapsibleControl: InputType = {
+  control: { type: 'radio' },
+  options: ['icon', 'off-canvas'] satisfies SidebarCollapsible[],
+};
+
+const variantControl: InputType = {
+  control: { type: 'radio' },
+  options: ['sided-floating', 'inset', 'floating'] satisfies SidebarVariant[],
+};
+
+export default {
+  component: SidebarProvider,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    defaultLeftMode: 'expanded',
+    leftVariant: 'sided-floating',
+    leftCollapsible: 'icon',
+    rightVariant: 'floating',
+    rightCollapsible: 'off-canvas',
+  },
+  argTypes: {
+    leftCollapsible: collapsibleControl,
+    leftVariant: variantControl,
+    rightCollapsible: collapsibleControl,
+    rightVariant: variantControl,
+  },
+  decorators: [
+    (StoryFn, context) => (
+      <SidebarProvider {...context.args}>
+        <div className="tailwindcss-preflight tw-flex tw-h-svh tw-w-svw tw-flex-col tw-bg-neutral-50">
+          <StoryFn />
+        </div>
+      </SidebarProvider>
+    ),
+  ],
+} satisfies Meta<typeof SidebarProvider>;
+
+const SidebarFillControlMenuButton = ({ side }: { side?: SidebarSide }) => (
+  <Sidebar.FillTrigger side={side}>
+    <Sidebar.MenuButton
+      tooltip="Sidebar Fill Control"
+      icon="expand-alt"
+      className="!tw-flex-none [&_svg]:tw-text-sidebar-foreground"
+    >
+      <span className="tw-sr-only">Sidebar Fill Control</span>
+    </Sidebar.MenuButton>
+  </Sidebar.FillTrigger>
+);
+
+const SidebarModeControlMenuButton = ({ side }: { side?: SidebarSide }) => {
+  const { mode, setMode } = useSidebar(side);
+
+  return (
+    <DropdownMenu variant="argo">
+      <DropdownMenu.Trigger asChild>
+        <Sidebar.MenuButton
+          tooltip="Sidebar State Control"
+          icon={['far', 'sidebar']}
+          className="!tw-flex-none [&_svg]:tw-text-sidebar-foreground"
+        >
+          <span className="tw-sr-only">Sidebar State Control</span>
+        </Sidebar.MenuButton>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.RadioGroup value={mode} onValueChange={setMode}>
+          <DropdownMenu.RadioItem closeOnSelect value="collapsed">
+            Collapsed
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem closeOnSelect value="expanded">
+            Expanded
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem closeOnSelect value="expand-on-hover">
+            Expand on Hover
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};
+
+type Story = StoryObj<typeof SidebarProvider>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="tw-flex tw-flex-1">
+      <Sidebar side="left">
+        <Sidebar.Header>
+          <Sidebar.Menu>
+            <Sidebar.MenuItem>
+              <Sidebar.MenuIcon
+                icon={['fak', 'keboola']}
+                className="!tw-size-8 tw-text-secondary-500"
+              />
+              Sticky Header
+            </Sidebar.MenuItem>
+          </Sidebar.Menu>
+
+          <Sidebar.SearchInput placeholder="Search" />
+        </Sidebar.Header>
+
+        <Sidebar.Content>
+          <Sidebar.Menu>
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton tooltip="Dashboard" asChild>
+                <Link href="#">
+                  <Sidebar.MenuIcon icon={['far', 'gauge']} />
+                  Dashboard
+                </Link>
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton tooltip="AI Assistant" asChild>
+                <Link href="#">
+                  <Sidebar.MenuIcon icon={['far', 'sparkles']} />
+                  AI Assistant
+                </Link>
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton tooltip="Flows" asChild>
+                <Link href="#">
+                  <Sidebar.MenuIcon icon={['far', 'bars-staggered']} />
+                  Flows
+                </Link>
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton tooltip="Components" icon={['far', 'layer-group']}>
+                Components
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton tooltip="Templates" icon={['far', 'book-open']}>
+                Templates
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton tooltip="Data Catalog" icon={['far', 'database']}>
+                Data Catalog
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton
+                tooltip="Storage"
+                icon={['far', 'warehouse']}
+                aria-selected={true}
+              >
+                Storage
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton tooltip="Transformations" icon={['far', 'window-restore']}>
+                Transformations
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton tooltip="Workspaces" icon={['far', 'box']}>
+                Workspaces
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton tooltip="Jobs" icon={['far', 'key']}>
+                Jobs
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+          </Sidebar.Menu>
+        </Sidebar.Content>
+
+        <Sidebar.Footer>
+          <Sidebar.Menu>
+            <Sidebar.MenuItem>
+              <Sidebar.MenuCard
+                icon="clock"
+                title="Whats New"
+                className="tw-flex tw-flex-col tw-gap-2"
+              >
+                Our arbitrary content
+                <Button>Our Button</Button>
+              </Sidebar.MenuCard>
+              <Sidebar.MenuBadge>8</Sidebar.MenuBadge>
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <Sidebar.MenuButton tooltip="Support & Feedback" icon={['far', 'key']}>
+                Support & Feedback
+              </Sidebar.MenuButton>
+            </Sidebar.MenuItem>
+
+            <Sidebar.Separator />
+            <Sidebar.MenuItem>
+              <SidebarFillControlMenuButton side="left" />
+            </Sidebar.MenuItem>
+
+            <Sidebar.MenuItem>
+              <SidebarModeControlMenuButton side="left" />
+            </Sidebar.MenuItem>
+          </Sidebar.Menu>
+        </Sidebar.Footer>
+      </Sidebar>
+
+      <AppContent side="both" />
+
+      <Sidebar container side="right">
+        <div className="tw-flex tw-flex-col tw-items-center tw-p-4">
+          <h1>KAI</h1>
+          <Sidebar.FillTrigger side="right">
+            <Button block argo icon="sidebar" variant="secondary">
+              Fill
+            </Button>
+          </Sidebar.FillTrigger>
+        </div>
+      </Sidebar>
+    </div>
+  ),
+};
+
+export const Resizable: Story = {
+  render: () => {
+    const [rightWidth, setRightWidth] = useState(384);
+
+    return (
+      <SidebarProvider
+        rightVariant="floating"
+        rightCollapsible="off-canvas"
+        defaultRightMode="expanded"
+        rightWidth={rightWidth}
+        onRightWidthChange={setRightWidth}
+      >
+        <div className="tailwindcss-preflight tw-flex tw-h-svh tw-w-svw tw-bg-neutral-50">
+          <AppContent side="right" />
+
+          <Sidebar container side="right" resizable>
+            <div className="tw-flex tw-flex-col tw-items-center tw-gap-4 tw-p-4">
+              <h2>Resizable Sidebar</h2>
+              <p className="tw-text-sm tw-text-neutral-400">
+                Width: {rightWidth}px — Drag left edge to resize
+              </p>
+              <Sidebar.FillTrigger side="right">
+                <Button block argo icon="expand-alt" variant="secondary">
+                  Fullscreen
+                </Button>
+              </Sidebar.FillTrigger>
+              <Sidebar.Trigger side="right">
+                <Button block argo icon="sidebar" variant="outline">
+                  Collapse
+                </Button>
+              </Sidebar.Trigger>
+            </div>
+          </Sidebar>
+        </div>
+      </SidebarProvider>
+    );
+  },
+  decorators: [],
+};
+
+export const SidebarInSidebar: Story = {
+  args: {
+    rightWidth: 384,
+    leftVariant: 'none',
+  },
+  decorators: [rightLayoutDecorator],
+  render: () => {
+    const { isFill } = useSidebar('right');
+    const [innerMode, setInnerMode] = useState<SidebarMode>('collapsed');
+
+    const handleOnModeChange = (mode: SidebarMode) => {
+      setInnerMode(mode);
+    };
+
+    return (
+      <Sidebar container side="right">
+        <SidebarProvider
+          leftVariant="sided-floating"
+          leftMode={isFill ? innerMode : 'collapsed'}
+          leftCollapsible={isFill ? 'icon' : 'off-canvas'}
+          onLeftModeChange={handleOnModeChange}
+        >
+          <div className="tw-flex tw-flex-1">
+            <Sidebar className="tw-absolute">
+              <Sidebar.Content>
+                <Sidebar.SearchInput placeholder="Search" />
+
+                <Sidebar.Menu>
+                  <Sidebar.MenuItem>
+                    <Sidebar.MenuButton tooltip="Simple" icon={['far', 'rectangle-terminal']}>
+                      Action
+                    </Sidebar.MenuButton>
+                  </Sidebar.MenuItem>
+
+                  <Sidebar.MenuItem>
+                    <Sidebar.MenuCard icon="clock" title="Card">
+                      Content
+                    </Sidebar.MenuCard>
+                  </Sidebar.MenuItem>
+
+                  <Sidebar.MenuItem>
+                    <SidebarModeControlMenuButton side="left" />
+                  </Sidebar.MenuItem>
+                </Sidebar.Menu>
+              </Sidebar.Content>
+            </Sidebar>
+            <main className="tw-m-2 tw-flex tw-flex-1 tw-justify-center tw-rounded-xl tw-bg-neutral-50">
+              <h1>KAI</h1>
+            </main>
+          </div>
+        </SidebarProvider>
+      </Sidebar>
+    );
+  },
+};
+
+export const MenuItems: Story = {
+  decorators: [leftLayoutDecorator],
+  render: () => (
+    <Sidebar>
+      <Sidebar.Content>
+        <Sidebar.Menu>
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton tooltip="Simple" icon={['far', 'rectangle-terminal']}>
+              Simple
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton
+              tooltip="Active"
+              icon={['far', 'rectangle-terminal']}
+              aria-selected={true}
+            >
+              Active
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton tooltip="Disabled" icon={['far', 'rectangle-terminal']} disabled>
+              Disabled
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton tooltip="Simple Anchor" asChild>
+              <a href="https://www.keboole.com">
+                <Sidebar.MenuIcon icon={['far', 'rectangle-terminal']} />
+                Simple Anchor
+              </a>
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton
+              tooltip="Simple Anchor - Active"
+              asChild
+              icon={['far', 'rectangle-terminal']}
+            >
+              {/*use react-router based on spec*/}
+              {/*https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current*/}
+              <a aria-current="page" href="https://www.keboola.com">
+                Simple Anchor - Active
+              </a>
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton
+              tooltip="This will be very long text hidden with ellipsis"
+              icon={['far', 'rectangle-terminal']}
+            >
+              <span className="tw-truncate">This will be very long text hidden with ellipsis</span>
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.MenuCard icon="clock" title="Card Item">
+              Content
+            </Sidebar.MenuCard>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.SubMenu icon={['far', 'layer-group']} label="Sub Menu" defaultOpen>
+              <Sidebar.SubItem>Plain Sub Item</Sidebar.SubItem>
+              <Sidebar.SubItem aria-selected>Active Sub Item</Sidebar.SubItem>
+              <Sidebar.SubItem asChild>
+                {/* oxlint-disable-next-line jsx-a11y/anchor-is-valid */}
+                <a href="#">Anchor Sub Item</a>
+              </Sidebar.SubItem>
+              <Sidebar.SubItem disabled>Disabled Sub Item</Sidebar.SubItem>
+            </Sidebar.SubMenu>
+          </Sidebar.MenuItem>
+        </Sidebar.Menu>
+      </Sidebar.Content>
+    </Sidebar>
+  ),
+};
+
+/**
+ * The SidebarMenuAction component is used to render a menu action within a SidebarMenuItem.
+ *
+ * This button works independently of the SidebarMenuButton i.e you can have the `<SidebarMenuButton />` as a clickable link and the `<SidebarMenuAction />` as a button.
+ */
+export const MenuAction: Story = {
+  decorators: [leftLayoutDecorator],
+  render: () => (
+    <Sidebar>
+      <Sidebar.Content>
+        <Sidebar.Menu>
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton
+              tooltip="Dropdown Action With very very long text"
+              icon={['far', 'rectangle-terminal']}
+            >
+              <span className="tw-truncate">Dropdown Action With very very long text</span>
+            </Sidebar.MenuButton>
+            <DropdownMenu>
+              <DropdownMenu.Trigger asChild>
+                <Sidebar.MenuAction showOnHover>
+                  <Icon icon={['far', 'ellipsis']} />
+                  <span className="tw-sr-only">Actions</span>
+                </Sidebar.MenuAction>
+              </DropdownMenu.Trigger>
+
+              <DropdownMenu.Content side="right" align="start">
+                <DropdownMenu.Group>
+                  <DropdownMenu.Item icon="pen">Edit </DropdownMenu.Item>
+                  <DropdownMenu.Item icon="trash">Delete </DropdownMenu.Item>
+                </DropdownMenu.Group>
+              </DropdownMenu.Content>
+            </DropdownMenu>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton tooltip="As Non-actionable" icon="code">
+              <span className="tw-truncate">As Non-actionable</span>
+            </Sidebar.MenuButton>
+
+            <Sidebar.MenuAction asChild>
+              <Icon icon="triangle-exclamation" className="tw-text-warning-600" />
+            </Sidebar.MenuAction>
+          </Sidebar.MenuItem>
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton tooltip="As Non-actionable with Very long text" icon="code">
+              <span className="tw-truncate">As Non-actionable with Very long text</span>
+            </Sidebar.MenuButton>
+            <Sidebar.MenuAction asChild>
+              <Icon icon="triangle-exclamation" className="tw-text-warning-600" />
+            </Sidebar.MenuAction>
+          </Sidebar.MenuItem>
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton tooltip="As Link" asChild icon={['far', 'code-branch']}>
+              {/* oxlint-disable-next-line jsx-a11y/anchor-is-valid */}
+              <a href="#">As Link</a>
+            </Sidebar.MenuButton>
+            <Sidebar.MenuAction asChild>
+              <Link href="#">
+                <Icon icon={['far', 'gauge']} className="tw-text-warning-600" />
+                <span className="tw-sr-only">Dashboard</span>
+              </Link>
+            </Sidebar.MenuAction>
+          </Sidebar.MenuItem>
+        </Sidebar.Menu>
+      </Sidebar.Content>
+    </Sidebar>
+  ),
+};
+
+/**
+ * The `Sidebar.MenuBadge` component is used to display notification counts, status indicators,
+ * or other small pieces of information on menu buttons.
+ *
+ * The badge is positioned absolutely in the top-right corner of the menu button and automatically
+ * adapts its color based on button state (hover, active). It's hidden when the sidebar is collapsed
+ * to icon-only mode.
+ */
+export const MenuBadge: Story = {
+  decorators: [leftLayoutDecorator],
+  render: () => (
+    <Sidebar>
+      <Sidebar.Content>
+        <Sidebar.Menu>
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton tooltip="Messages" icon={['far', 'rectangle-terminal']}>
+              Messages
+            </Sidebar.MenuButton>
+            <Sidebar.MenuBadge>5</Sidebar.MenuBadge>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton tooltip="Storage" icon={['far', 'warehouse']} aria-selected={true}>
+              Storage
+            </Sidebar.MenuButton>
+            <Sidebar.MenuBadge>3</Sidebar.MenuBadge>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton
+              tooltip="Link"
+              icon={['far', 'warehouse']}
+              aria-selected={true}
+              asChild
+            >
+              <Link href="#">Link</Link>
+            </Sidebar.MenuButton>
+            <Sidebar.MenuBadge>3</Sidebar.MenuBadge>
+          </Sidebar.MenuItem>
+
+          <Sidebar.MenuItem>
+            <Sidebar.MenuCard icon="clock" title="Card With Badge">
+              Content
+            </Sidebar.MenuCard>
+            <Sidebar.MenuBadge>8</Sidebar.MenuBadge>
+          </Sidebar.MenuItem>
+        </Sidebar.Menu>
+      </Sidebar.Content>
+    </Sidebar>
+  ),
+};
+
+/**
+ * Use the `Sidebar.Group` component to create a section within the sidebar.
+ *
+ * A `Sidebar.Group` has a `Sidebar.GroupLabel`, a `Sidebar.GroupContent` and an optional `Sidebar.GroupAction`.
+ */
+export const Group: Story = {
+  decorators: [leftLayoutDecorator],
+  render: () => (
+    <Sidebar>
+      <Sidebar.Content>
+        <Sidebar.Group>
+          <Sidebar.GroupLabel>Group A</Sidebar.GroupLabel>
+          <Sidebar.GroupAction icon="plus" />
+          <Sidebar.GroupContent>
+            <Sidebar.Menu>
+              <Sidebar.MenuItem>
+                <Sidebar.MenuButton tooltip="Group A Item" icon="gauge">
+                  Group A Item
+                </Sidebar.MenuButton>
+              </Sidebar.MenuItem>
+            </Sidebar.Menu>
+          </Sidebar.GroupContent>
+        </Sidebar.Group>
+
+        <Sidebar.Group>
+          <Sidebar.GroupLabel>Group B</Sidebar.GroupLabel>
+          <Sidebar.GroupAction icon="minus" />
+          <Sidebar.GroupContent>
+            <Sidebar.Menu>
+              <Sidebar.MenuItem>
+                <Sidebar.MenuButton tooltip="Group B Item" icon="gauge">
+                  Group B Item
+                </Sidebar.MenuButton>
+              </Sidebar.MenuItem>
+            </Sidebar.Menu>
+          </Sidebar.GroupContent>
+        </Sidebar.Group>
+      </Sidebar.Content>
+    </Sidebar>
+  ),
+};
+
+/**
+ * The `SidebarSeparator` component is used to render a separator within a `Sidebar`.
+ */
+export const Separator: Story = {
+  decorators: [leftLayoutDecorator],
+  render: () => (
+    <Sidebar>
+      <Sidebar.Content>
+        <Sidebar.Menu>
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton tooltip="Menu & Menu" icon="folder-open">
+              Menu & Menu
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+        </Sidebar.Menu>
+
+        <Sidebar.Separator />
+
+        <Sidebar.Menu>
+          <Sidebar.MenuItem>
+            <Sidebar.MenuButton tooltip="Menu & Group" icon="folder-open">
+              Menu & Group
+            </Sidebar.MenuButton>
+          </Sidebar.MenuItem>
+        </Sidebar.Menu>
+
+        <Sidebar.Separator />
+
+        <Sidebar.Group>
+          <Sidebar.GroupLabel>Group A</Sidebar.GroupLabel>
+          <Sidebar.GroupContent>
+            <Sidebar.Menu>
+              <Sidebar.MenuItem>
+                <Sidebar.MenuButton tooltip="MenuItem * MenuItem" icon="folder-open">
+                  MenuItem * MenuItem
+                </Sidebar.MenuButton>
+              </Sidebar.MenuItem>
+
+              <Sidebar.Separator />
+
+              <Sidebar.MenuItem>
+                <Sidebar.MenuButton tooltip="Item E" icon="folder-open">
+                  Item E
+                </Sidebar.MenuButton>
+              </Sidebar.MenuItem>
+            </Sidebar.Menu>
+          </Sidebar.GroupContent>
+        </Sidebar.Group>
+      </Sidebar.Content>
+    </Sidebar>
+  ),
+};
+
+/*
+ * Use the `Sidebar` component inside a `Modal` or `Popover` to create a modal sidebar.
+ */
+export const InsideModal: Story = {
+  render: () => (
+    <Modal>
+      <Modal.Trigger asChild>
+        <Button>Open Modal</Button>
+      </Modal.Trigger>
+
+      <Modal.Content className="tw-size-[800px] !tw-flex-row tw-gap-0 tw-overflow-hidden tw-bg-neutral-50 tw-p-0">
+        <Modal.Header title="Story for Sidebar inside Modal" className="tw-sr-only" />
+        <SidebarProvider leftVariant="floating" leftCollapsible="icon">
+          <div className="tw-flex tw-flex-1">
+            <Sidebar side="left">
+              <Sidebar.Header>
+                <Sidebar.Menu>
+                  <Sidebar.MenuItem>
+                    <Sidebar.Trigger>
+                      <Sidebar.MenuButton tooltip="Collapse" icon={['far', 'sidebar']}>
+                        Collapse
+                      </Sidebar.MenuButton>
+                    </Sidebar.Trigger>
+                  </Sidebar.MenuItem>
+                </Sidebar.Menu>
+              </Sidebar.Header>
+            </Sidebar>
+
+            <AppContent>Keboola Content</AppContent>
+          </div>
+        </SidebarProvider>
+      </Modal.Content>
+    </Modal>
+  ),
+};
+
+export const StaticSiteMenu: Story = {
+  render: () => {
+    const HEADER_HEIGHT = '40px'; // Adjust based on your header height
+
+    return (
+      <>
+        <header
+          className="tw-top tw-static tw-flex tw-items-center tw-justify-center tw-border-b tw-border-neutral-150 tw-bg-white"
+          style={{
+            height: HEADER_HEIGHT,
+          }}
+        >
+          Static Site header
+        </header>
+
+        <div className="tw-flex tw-flex-1">
+          <Sidebar
+            style={{
+              top: HEADER_HEIGHT,
+            }}
+          >
+            <Sidebar.Header>
+              <Sidebar.Menu>
+                <Sidebar.MenuItem>
+                  <Sidebar.Trigger>
+                    <Sidebar.MenuButton tooltip="Hello" icon="bolt">
+                      Hello
+                    </Sidebar.MenuButton>
+                  </Sidebar.Trigger>
+                </Sidebar.MenuItem>
+              </Sidebar.Menu>
+            </Sidebar.Header>
+          </Sidebar>
+
+          <AppContent side="both" />
+
+          <Sidebar
+            side="right"
+            style={{
+              top: HEADER_HEIGHT,
+            }}
+          >
+            <Sidebar.Header>
+              <Sidebar.Menu>
+                <Sidebar.MenuItem>
+                  <Sidebar.Trigger side="right">
+                    <Sidebar.MenuButton tooltip="Hello" icon="bolt">
+                      Hello
+                    </Sidebar.MenuButton>
+                  </Sidebar.Trigger>
+                </Sidebar.MenuItem>
+              </Sidebar.Menu>
+            </Sidebar.Header>
+          </Sidebar>
+        </div>
+      </>
+    );
+  },
+};