LanternUI.Components.Layout (LanternUI v0.5.0)

Copy Markdown View Source

App-shell layout — a fixed, collapsible sidebar beside a main column with an optional topbar. The core navigation chrome for a dev-tool or app, and a drop-in-shaped replacement for a Fluxon sidebar layout.

<.sidebar_layout id="app" current="dashboard">
  <:sidebar>
    <.sidebar_header>
      <.icon name="bolt" /> <span class="lui-brand-name">Acme</span>
    </.sidebar_header>
    <.sidebar_nav>
      <.nav_group label="Workspace">
        <.nav_item label="Dashboard" icon="chart-bar" navigate="/" active />
        <.nav_item label="Buckets" icon="archive-box" navigate="/buckets" />
      </.nav_group>
    </.sidebar_nav>
  </:sidebar>

  <:topbar>
    <.sidebar_toggle />
    <.breadcrumb>…</.breadcrumb>
  </:topbar>

  main content…
</.sidebar_layout>

The <.sidebar_toggle> collapses the sidebar to an icon rail; the state is persisted in localStorage per id via the LanternSidebar hook. On narrow viewports the sidebar drops to a horizontal strip above the content.

Summary

Functions

nav_group(assigns)

A labelled group of nav items. The label hides when the rail is collapsed.

nav_item(assigns)

A sidebar nav item. Renders a link when given navigate/patch/href, or a button when given phx-click. The label collapses to an icon-only rail item (with a tooltip) when the sidebar is collapsed.

sidebar_header(assigns)

Brand/logo area, pinned to the top of the sidebar.

sidebar_layout(assigns)
sidebar_nav(assigns)

Scrollable nav region of the sidebar. Wrap nav_group/nav_item in it.

sidebar_toggle(assigns)

Collapse toggle — flips the sidebar between full width and the icon rail.

Functions