Double Sidebar Component

Features

• Hover to expand, click outside to collapse
• Two-level navigation with sub-menus
• Admin-only menu items (badge indicators)
• Customizable footer with user dropdown
• Icon-only collapsed state with tooltips
• Smooth animations and transitions

Try it out

Hover over the sidebar on the left to expand it. The footer shows authenticated user information with a dropdown menu (not shown in this demo).

Get the Code

View the full source code, customize it for your needs, or contribute on GitHub.

Basic Usage

import { DoubleSidebar, SidebarProvider } from '@/components/double-sidebar'
import { NavUser } from '@/components/double-sidebar/higherlevel/nav-user'

export default function Layout({ children }) {
  return (
    <SidebarProvider>
      <DoubleSidebar 
        isAdmin={false}
        footer={
          <NavUser 
            user={{
              name: "John Doe",
              email: "john@example.com"
            }}
            onSignOut={async () => {
              // Your sign out logic
            }}
          />
        }
      />
      <main>{children}</main>
    </SidebarProvider>
  )
}