shadcn-resizable-sidebar

To prevent layout shift and ensure a smooth user experience, you can restore the sidebar's width and collapse state on the server using cookies.

By default, the provider writes to sidebar:state and sidebar:width. You can pass a custom cookieKey to SidebarProvider to manage multiple independent sidebars on the same page.

In Next.js, read the cookies in a server component (like a provider wrapper) and pass them as defaultOpen and defaultWidth to the SidebarProvider.

import { cookies } from "next/headers"
import { SidebarProvider } from "@/components/ui/sidebar"

const SIDEBAR_COOKIE_KEY = "sidebar"

export async function Providers({ children }: { children: React.ReactNode }) {
  const cookieStore = await cookies()

  const sidebarState = cookieStore.get(`${SIDEBAR_COOKIE_KEY}:state`)?.value
  const sidebarWidth = cookieStore.get(`${SIDEBAR_COOKIE_KEY}:width`)?.value

  return (
    <SidebarProvider
      cookieKey={SIDEBAR_COOKIE_KEY}
      defaultOpen={sidebarState ? sidebarState === "true" : true}
      defaultWidth={sidebarWidth}
    >
      {children}
    </SidebarProvider>
  )
}

When working with this repository, adhere to the following constraints to prevent breaking the custom resizable sidebar functionality:

• Package Manager: Use bun exclusively (bun install, bun add, bun remove, bun update, and bunx).
• Lockfiles: Do not create package-lock.json, pnpm-lock.yaml, or yarn.lock. Only bun.lockb is permitted.
• Sidebar Protection:
  • DO NOT run bunx shadcn@latest add sidebar as this will overwrite the custom resizable implementation.
  • Treat components/ui/sidebar.tsx and hooks/use-sidebar-resize.ts as the core fork. Any changes to these files require manual diff review to ensure drag-to-resize behavior and cookie persistence are not lost.
• State Persistence: Ensure existing sidebar cookies sidebar:state and sidebar:width are preserved, along with server-side cookie seeding in components/providers/index.tsx.

Despite internal modernization of the resize hook, the public API for controlling and observing sidebar width remains unchanged. You can continue to use the following props, state, and hooks to manage the sidebar:

Props and State

• defaultWidth: The initial width of the sidebar.
• width: The current width.
• setWidth: Function to manually set the width.
• isDraggingRail: Boolean indicating if the user is currently dragging the resize rail.
• setIsDraggingRail: Function to update the dragging state.
• enableDrag: Boolean to enable or disable resizing.

Components and Hooks

• SidebarRail: The component used to trigger resizing.
• useSidebarResize: The hook for managing resize logic.
• sidebar:state: State identifier.
• sidebar:width: State identifier for width.

Data Attributes and Constants

• data-dragging: Attribute applied during drag operations.
• duration-0: Attribute used to manage transition timing during drag.
• MIN_SIDEBAR_WIDTH: Constant defining the minimum allowed width.
• MAX_SIDEBAR_WIDTH: Constant defining the maximum allowed width.

// The following public tokens remain stable:
// defaultWidth, width, setWidth, isDraggingRail, setIsDraggingRail, 
// SidebarRail, enableDrag, useSidebarResize, sidebar:state, 
// sidebar:width, data-dragging, duration-0, MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH