howdy_ui - v1.0.0

howdy/ui/sidebar

An application layout with a sidebar for navigation.

use state <- cookie.string_or(ctx, "sidebar", default: "expanded")

sidebar.layout(collapsed: state == "collapsed", attributes: [], sidebar:
  sidebar.sidebar("nav", [], [
    sidebar.header([text("Acme")]),
    sidebar.content([
      sidebar.group("Workspace", [
        sidebar.link("/", active: True, attributes: [], children: [text("Home")]),
        sidebar.link("/orders", active: False, attributes: [], children: [text("Orders")]),
      ]),
    ]),
    sidebar.footer([text("ada@example.com")]),
  ]),
main: [
  ui.sized_button(Ghost, Icon, [attribute.aria_label("Toggle sidebar"), ..sidebar.trigger("nav")], [menu_icon]),
  page_content,
])

On screens at least 48rem wide the sidebar is a column beside the content, and the trigger collapses and expands it. The choice is kept in a sidebar cookie holding collapsed or expanded, so read it and pass collapsed to render the next page the same way. On narrower screens the sidebar is hidden and the trigger opens it over the page, where Escape or a click outside closes it.

The trigger and the sidebar are tied by id, so both must be in the page or both in one live view.

Types

Collapse

</>

What collapsing does on a wide screen.

pub type Collapse {
  Offcanvas
  Rail
}

Constructors 

  • Offcanvas

    The sidebar goes away entirely.

  • Rail

    The sidebar narrows to a rail of icons; labels are hidden but still read by screen readers, and shown as a tooltip on hover. Give links icons with icon_link.

Variant

</>

How the sidebar sits beside the page.

pub type Variant {
  Plain
  Floating
  Inset
}

Constructors 

  • Plain

    Flush with the page, with a line between them.

  • Floating

    A card floating over the page’s edge.

  • Inset

    The page is a card set into the sidebar’s background.

Values

button

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

A button in a group, for an action rather than a page.

classes

</> 
pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

content

</> 
pub fn content(
  children: List(element.Element(msg)),
) -> element.Element(msg)

The part of the sidebar that scrolls.

content_class

</> 
pub fn content_class() -> css.Class
</> 
pub fn footer(
  children: List(element.Element(msg)),
) -> element.Element(msg)

The bottom of the sidebar, such as the signed-in user.

</> 
pub fn footer_class() -> css.Class

group

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

A labelled list of links. Pass "" for no label.

group_class

</> 
pub fn group_class() -> css.Class

group_label_class

</> 
pub fn group_label_class() -> css.Class
</> 
pub fn header(
  children: List(element.Element(msg)),
) -> element.Element(msg)

The top of the sidebar, such as the app’s name or a workspace switcher.

header_class

</> 
pub fn header_class() -> css.Class

icon_class

</> 
pub fn icon_class() -> css.Class
</> 
pub fn icon_link(
  href: String,
  active active: Bool,
  icon icon: element.Element(msg),
  label text_label: String,
  attributes attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

A link with an icon, which stays when the sidebar is a rail.

item_class

</> 
pub fn item_class() -> css.Class

label

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

Text that the icon rail hides, such as the app’s name in the header.

layout

</> 
pub fn layout(
  collapsed collapsed: Bool,
  attributes attributes: List(attribute.Attribute(msg)),
  sidebar sidebar: element.Element(msg),
  main main: List(element.Element(msg)),
) -> element.Element(msg)

The whole screen: the sidebar and the main content beside it.

layout_class

</> 
pub fn layout_class() -> css.Class
</> 
pub fn link(
  href: String,
  active active: Bool,
  attributes attributes: List(attribute.Attribute(msg)),
  children children: List(element.Element(msg)),
) -> element.Element(msg)

A link in a group. active marks the page being shown.

main_class

</> 
pub fn main_class() -> css.Class
</> 
pub fn menu_class() -> css.Class
</> 
pub fn sidebar(
  id: String,
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)
</> 
pub fn sidebar_class() -> css.Class

styled_layout

</> 
pub fn styled_layout(
  collapsed collapsed: Bool,
  collapse collapse: Collapse,
  variant variant: Variant,
  attributes attributes: List(attribute.Attribute(msg)),
  sidebar sidebar: element.Element(msg),
  main main: List(element.Element(msg)),
) -> element.Element(msg)

A layout that collapses another way, or is drawn another way.

</> 
pub fn submenu(
  icon icon: element.Element(msg),
  label text_label: String,
  open open: Bool,
  items items: List(element.Element(msg)),
) -> element.Element(msg)

A section of links that opens and closes, such as the pages under “Settings”. It is a <details>, so it works without scripts.

</> 
pub fn submenu_class() -> css.Class
</> 
pub fn submenu_list_class() -> css.Class

trigger

</> 
pub fn trigger(id: String) -> List(attribute.Attribute(msg))

Attributes for the button that collapses the sidebar with this id, or opens it on a narrow screen.

✨ Search Document