glaze_basecoat - v1.0.0

glaze/basecoat/sidebar

Basecoat documentation: https://basecoatui.com/components/sidebar/

Sidebar layout helpers for responsive app navigation.

Note: This component requires JavaScript from Basecoat.

Anatomy

A sidebar is typically an aside with a nav containing groups and links.

Recipe

import glaze/basecoat/sidebar
import lustre/element/html

fn main_sidebar() {
  sidebar.sidebar("main-nav", [sidebar.left()], [
    sidebar.nav([], [
      sidebar.section([], [
        sidebar.group("Getting started", [
          sidebar.link("#", True, [], [html.text("Playground")]),
          sidebar.link("#", False, [], [html.text("Models")]),
        ]),
      ]),
    ]),
  ])
}

References

Types

Side

</> 
pub type Side {
  Left
  Right
}

Constructors 

  • Left
  • Right

Values

button

</> 
pub fn button(
  is_current: Bool,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

close_script

</> 
pub fn close_script(sidebar_id: String) -> String
</> 
pub fn footer(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

group

</> 
pub fn group(
  label: String,
  items: List(element.Element(msg)),
) -> element.Element(msg)

group_with_attrs

</> 
pub fn group_with_attrs(
  label: String,
  attrs: List(attribute.Attribute(msg)),
  items: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn header(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

hidden

</> 
pub fn hidden() -> attribute.Attribute(msg)

left

</> 
pub fn left() -> attribute.Attribute(msg)
</> 
pub fn link(
  href: String,
  is_current: Bool,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn nav(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn nav_with_label(
  label: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

open_script

</> 
pub fn open_script(sidebar_id: String) -> String
</> 
pub fn right() -> attribute.Attribute(msg)

section

</> 
pub fn section(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn sidebar(
  id: String,
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn submenu(
  id: String,
  label: String,
  attrs: List(attribute.Attribute(msg)),
  items: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn submenu_with_icon(
  id: String,
  icon: element.Element(msg),
  label: String,
  attrs: List(attribute.Attribute(msg)),
  items: List(element.Element(msg)),
) -> element.Element(msg)

toggle_script

</> 
pub fn toggle_script(sidebar_id: String) -> String

toggle_script_default

</> 
pub fn toggle_script_default() -> String

visible

</> 
pub fn visible() -> attribute.Attribute(msg)
✨ Search Document