Provides a responsive sidebar component with toggle functionality. The sidebar can be opened or closed, and it adjusts its width accordingly. It includes slots for page content and sidebar items, as well as a toggle button.

Examples

<.sidebar id="my_sidebar">
  <:page_content>
    <div class="p-4">
      <h1 class="text-2xl font-bold">Main Content</h1>
      <p>This is the main content area.</p>
    </div>
  </:page_content>

  <.sidebar_items>
    <.sidebar_menu_title>Menu</.sidebar_menu_title>
    <.sidebar_item navigate="/" icon="hero-home" text="Home" active={true} />
    <.sidebar_item navigate="/about" icon="hero-information-circle" text="About" />
    <.sidebar_divider />
    <.sidebar_menu_title>Settings</.sidebar_menu_title>
    <.sidebar_item navigate="/profile" icon="hero-user" text="Profile" />
  <.sidebar_item href="/logout" method="delete" icon="hero-logout" text="Logout" />
  </.sidebar_items>
</.sidebar>