DevactionUI.Sidebar (devaction_ui v0.1.0)

Copy Markdown View Source

The side menu of an app: 236 px wide, or 64 px when collapsed, where each item keeps its icon and shows its name in a tooltip on hover and on keyboard focus. The current item has aria-current="page". The caller keeps whether it is collapsed (collapsed) and gets the press of the toggle in on_toggle; it is hidden on small screens, where the app has its own navigation.

Summary

Functions

sidebar(assigns)

Functions

sidebar(assigns)

Attributes

  • id (:string) (required)
  • label (:string) (required) - the name of the navigation, for assistive technology.
  • collapsed (:boolean) - Defaults to false.
  • on_toggle (:string) - the event of the button that collapses and opens it. Defaults to nil.
  • toggle_label (:string) - what the toggle button does, read by assistive technology. Defaults to nil.
  • class (:any) - Defaults to nil.
  • target (:any) - a phx-target (a @myself) when used inside a LiveComponent. Defaults to nil.
  • Global attributes are accepted.

Slots

  • toggle_icon
  • header - the brand or the workspace, above the items.
  • footer - what stays at the bottom: the person, a help link.
  • item (required) - Accepts attributes:
    • to (:string) (required)
    • label (:string) (required)
    • current (:boolean)
    • count (:any)
  • icon - the icon of an item; gets %{label: item label}.