sidebar

Oat documentation: https://oat.ink/components/sidebar/

Sidebar layout helpers for responsive app navigation.

Anatomy

A sidebar layout usually includes a layout wrapper, a toggle control, a sidebar aside, and navigation content.

sidebar enables collapsible behavior on smaller screens, while sidebar_always keeps the sidebar visible.

Recipe

import glaze/oat/sidebar
import lustre/element/html

sidebar.sidebar(html.div, [], [
  sidebar.toggle([], [html.text("Menu")]),
  sidebar.aside([], [sidebar.nav([], [html.text("Navigation")])]),
  html.main([], [html.text("Content")]),
])

Values

aside

</>

pub fn aside(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

nav

</>

pub fn nav(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

</>

pub fn sidebar(
  element: fn(
    List(attribute.Attribute(msg)),
    List(element.Element(msg)),
  ) -> element.Element(msg),
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

Render a responsive sidebar layout wrapper.

Use this for layouts that collapse to a toggleable sidebar on small screens.

sidebar_always

</>

pub fn sidebar_always(
  element: fn(
    List(attribute.Attribute(msg)),
    List(element.Element(msg)),
  ) -> element.Element(msg),
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

Render a sidebar layout that is always visible.

Use this for desktop-first layouts where the sidebar should never collapse.

toggle

</>

pub fn toggle(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

topnav

</>

pub fn topnav(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)