SidebarProvider

The SidebarProvider manages the expand/collapse state of the sidebar. It provides keyboard shortcuts and persists user preferences to a cookie for SSR compatibility.

Features

• Keyboard shortcut (Cmd/Ctrl + B) for toggling
• Cookie-based persistence for SSR compatibility
• Programmatic control via context
• Mobile-responsive behavior

Usage

import { SidebarProvider, useSidebar } from '@/components/features/sidebar';

// Wrap your app with the provider
<SidebarProvider>
  <App />
</SidebarProvider>

// Use the hook in components
function MyComponent() {
  const { state, toggle, setOpen } = useSidebar();
  
  return (
    <button onClick={toggle}>
      {state === 'expanded' ? 'Collapse' : 'Expand'}
    </button>
  );
}

Context Values

Property	Type	Description
state	"expanded" | "collapsed"	Current sidebar state
open	boolean	Whether sidebar is open (mobile)
isMobile	boolean	Whether on mobile breakpoint
toggle	() => void	Toggle expand/collapse
setOpen	(open: boolean) => void	Set open state (mobile)

SidebarTrigger Component

Use the provided trigger button for consistent UI:

import { SidebarTrigger } from '@/components/features/sidebar';

<SidebarTrigger />  // Renders collapse/expand button