DevactionUI.Sidebar (devaction_ui v0.2.3)

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, which needs a toggle_label (without one it raises). It is hidden below the md breakpoint, where the app has its own navigation; responsive={false} keeps it on every screen.

Each item slot takes to and label (required), current (marks aria-current="page"), count (a small badge, hidden when collapsed) and tone (:risk, :warn, :ok, :info or :neutral tints that badge; with none it is the quiet grey one). When collapsed the tooltip is the accessible name of the link.

Groups. Consecutive items with the same group (its title) sit under a collapsible heading, a native <details> that the keyboard opens and closes by itself; closed_groups lists the titles that start closed (the browser keeps what the person toggled until the server changes the list). Collapsed, the headings go and the items stay in one list.

Building blocks for the header and footer slots: search/1, the field with its key hint (a Kbd), and user/1, the person with a menu trigger, which has the border above it. Collapsed, the field goes and the person stays as the avatar.

Summary

Functions

search(assigns)

The search field of a sidebar, 40px, with the key hint at its end; hidden when the sidebar is collapsed.

sidebar(assigns)
user(assigns)

The person at the foot of a sidebar: avatar, name, detail and a menu trigger, under a line.

Functions

search(assigns)

@spec search(map()) :: Phoenix.LiveView.Rendered.t()

The search field of a sidebar, 40px, with the key hint at its end; hidden when the sidebar is collapsed.

Attributes

  • id (:string) (required)
  • label (:string) (required) - names the field for assistive technology.
  • name (:string) - Defaults to "q".
  • value (:string) - Defaults to nil.
  • placeholder (:string) - Defaults to nil.
  • hint (:string) - the key that opens the search, as text: ⌘K. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. goes to the input: phx-change, phx-keyup, aria-keyshortcuts.

Slots

  • icon - the magnifier, drawn by the caller.

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.
  • responsive (:boolean) - hides it below the md breakpoint; false keeps it on every screen. Defaults to true.
  • closed_groups (:list) - the group titles that start closed. Defaults to [].
  • 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
  • group_icon - the chevron of a group heading; it turns when the group is open.
  • 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)
    • tone (:atom) - Must be one of :risk, :warn, :ok, :info, or :neutral.
    • group (:string)
  • icon - the icon of an item; gets %{label: item label}.

user(assigns)

@spec user(map()) :: Phoenix.LiveView.Rendered.t()

The person at the foot of a sidebar: avatar, name, detail and a menu trigger, under a line.

Attributes

  • name (:string) (required)
  • detail (:string) - the workspace or the role, under the name. Defaults to nil.
  • tone (:atom) - Defaults to :info. Must be one of :ok, :warn, :risk, :info, or :neutral.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • menu - the trigger of the person's menu (a Dropdown trigger, a button); hidden when collapsed.