[🚧 WIP] ✨ feat: responsive collapse and drawer behavior for Sidebar

[futjesus]

Summary

Makes the Sidebar fully responsive with three viewport-driven modes:

Viewport	Mode	Behavior
>= 1024px	expanded	Current behavior — labels and group titles visible.
640 – 1023px	collapsed	Icon-only, group titles hidden, NavigationSeparator auto-injected between groups.
< 640px	drawer	The <aside> is replaced by a hamburger trigger that opens the sidebar content inside a left Drawer in expanded form.

Design reference (Figma):

• 1024px
• 768px
• 640px

What changed

New public API

• useMediaQuery(query) — SSR-safe hook, exported from the library.
• <Sidebar.Label> — auto-hides in collapsed mode, replacing the manual hidden md:block pattern consumers had to repeat on every label.
• mode?: 'auto' | 'expanded' | 'collapsed' | 'drawer' prop on Sidebar (default auto = viewport-driven; the others are manual overrides for tests, stories, or forced layouts).

Internal additions

• SidebarContext + useSidebarContext for distributing the active mode to descendants.
• useSidebarMode hook that resolves the mode from the viewport or the mode prop.
• HamburgerTrigger component for the drawer mode.

Behavior changes on existing components

• NavigationGroup hides its title when collapsed.
• Navigation auto-injects a NavigationSeparator between NavigationGroup siblings when collapsed (without duplicating separators the consumer added manually).
• Wrapper now resolves the mode and renders either <aside> or HamburgerTrigger + Drawer accordingly.

Styling (minimal and targeted)

• NavigationSeparator.variants.ts: updated to match the thin horizontal line in the Figma designs (only stylistic change in this PR).
• Logo.variants.ts and NavigationOption.variants.ts: the padding rules previously tied to the md: viewport breakpoint now use group-data-[mode=expanded]/sidebar:* selectors. Values are unchanged — they just follow the sidebar's mode instead of the viewport, which fixes an alignment bug where the 768–1023px range applied desktop padding inside the collapsed (w-18) aside.
• Sidebar.variants.ts: width moved from w-18 md:w-64 to a mode CVA variant (w-18 / w-64).

Story

• Sidebar.stories.tsx refactored to use <Sidebar.Label> and group-data-[mode=expanded]/sidebar:* selectors. Added CollapsedMode and DrawerMode stories for manual inspection.

Tests

• tests/setup.ts: added a default window.matchMedia mock (required by the new hook).
• Sidebar.test.tsx: new coverage for the three modes — labels/titles visibility, auto-injected separators, hamburger trigger, drawer opening with expanded content.

Test plan

• npm run check:types passes.
• npm run lint passes.
• npm test passes (426 tests).
• npm run build succeeds.
• Storybook story In Review/Sidebar → Sidebar:
  • At >= 1024px viewport: sidebar is expanded, labels and group titles visible.
  • At 640–1023px: sidebar collapses to icons only, a thin line separates groups, no group titles.
  • At < 640px: the <aside> disappears, a hamburger button shows in the top-left.
• Storybook Sidebar at < 640px: click the hamburger → a Drawer opens from the left with labels and group titles visible. Escape / overlay click / X close it.
• Storybook CollapsedMode story: icons only, separators between groups.
• Storybook DrawerMode story: only the hamburger trigger is visible; clicking it opens the drawer.