View Source Lume.Components.Sidebar (lume v0.1.0)

A responsive sidebar component for application navigation.

Features

  • Responsive design with mobile and desktop layouts
  • Smooth mobile transitions with backdrop
  • Customizable content through slots
  • Support for logo and title
  • Dark mode support

Examples 

# Basic sidebar with branding and navigation
<.sidebar>
  <.brand title="My App" logo="/images/logo.svg">
  <.nav_items
    items={[
      %{icon: "hero-home", label: "Dashboard", path: "/", nav_item: :dashboard},
      %{icon: "hero-users", label: "Users", path: "/users", nav_item: :users},
      %{separator: true},
      %{icon: "hero-cog", label: "Settings", path: "/settings", nav_item: :settings}
    ]}
    current_item={:dashboard}
  />
</.sidebar>

# Sidebar with custom content
<.sidebar id="admin-sidebar">
  <.brand title="MyApp Admin Panel">
  <.separator />
  <div class="p-4">
    <h2 class="text-lg font-semibold">Custom Content</h2>
    <p>Add any content here!</p>
  </div>
</.sidebar>

Summary

Functions

brand(assigns)

Renders the branding section of the sidebar.

nav_items(assigns)

Navigation items component for the sidebar.

separator(assigns)

Renders a separator line.

sidebar(assigns)

Renders the main sidebar component.

Functions

brand(assigns)

Renders the branding section of the sidebar.

Attributes

  • title - Optional title text to display at the top
  • logo - Optional path to logo image

Slots

  • inner_block - The content to be displayed below the title

Attributes

  • title (:string) - Defaults to nil.
  • logo (:string) - Defaults to nil.

Slots

  • inner_block

separator(assigns)

Renders a separator line.

Attributes

  • class - Additional CSS classes to apply to the separator

Attributes

  • class (:string) - Defaults to nil.

sidebar(assigns)

Renders the main sidebar component.

Attributes

  • id - Optional unique identifier for the sidebar, defaults to "sidebar"

Slots

  • inner_block - The content to be displayed in the sidebar

Attributes

  • id (:string) - Defaults to "sidebar".

Slots

  • inner_block (required)