DevactionUI.Shell (devaction_ui v0.7.0)

Copy Markdown View Source

The frame of an app: a sidebar that collapses to a rail, a header and a panel with the page. ⌘B (or Ctrl+B) and the toggle button switch the sidebar between open (248px) and a rail of icons (60px) whose items show their name on hover; below 1024px the sidebar is a drawer over the page, closed by the backdrop, Esc or following a link. The choice is kept in the dui_sidebar cookie, so DevactionUI.Shell.SidebarCookie and on_mount/4 render it right on the first paint (sidebar_open); the open or closed state of each group is kept in the local storage. The hook is DevactionUI.Shell and the shell tells LiveView to leave its own attributes alone, so a patch does not undo what the person chose.

variant is the layout: "classic" (a sidebar beside the panel), "topbar" (the sidebar becomes a bar on top), "split" (a list column between the sidebar and the panel, for list and detail), "centered" (the page in a narrow centred column, with the sidebar as a bar on top like topbar) and "docs" (a toc column at the end). content_width="read" limits the page to the reading width. The shell is as tall as the screen; to put it in a box, set --shell-h (style="--shell-h: 460px").

The slots are sidebar (built from sidebar_head/1, sidebar_search/1, sidebar_nav/1, sidebar_group/1, sidebar_item/1, sidebar_foot/1 and sidebar_user/1), header (usually a DevactionUI.Breadcrumb), header_actions, list, toc, and the page itself. A shell with a sidebar needs sidebar_label, open_label and close_label (the toggle button says which one by its state); without them it raises, so the library carries no language of its own. The toggle's icon is the toggle_icon slot.

<Shell.shell
  id="app"
  sidebar_open={@sidebar_open}
  sidebar_label="Main"
  open_label="Open menu"
  close_label="Collapse menu"
>
  <:sidebar>
    <Shell.sidebar_head name="Acme" subtitle="Workspace"><:logo>A</:logo></Shell.sidebar_head>
    <Shell.sidebar_nav>
      <Shell.sidebar_item tip="Projects" navigate="/projects" current>Projects</Shell.sidebar_item>
    </Shell.sidebar_nav>
  </:sidebar>
  <:header><Breadcrumb.breadcrumb label="You are here" items={[%{label: "Projects"}]} /></:header>
  The page.
</Shell.shell>

Summary

Functions

on_mount(atom, params, session, socket)

The on_mount that puts @sidebar_open in every LiveView of a live_session, from the session value DevactionUI.Shell.SidebarCookie wrote.

shell(assigns)

The shell: sidebar, header and panel.

sidebar_foot(assigns)

The foot of the sidebar: settings, the account.

sidebar_group(assigns)

A group of items under a heading that collapses. In the rail the heading goes and the group is a block between two lines.

sidebar_head(assigns)

The head of the sidebar: the workspace. The text goes away in the rail.

sidebar_item(assigns)

An item of the sidebar: a link to navigate, patch or href.

sidebar_nav(assigns)

The scrolling list of the sidebar's groups and items.

sidebar_search(assigns)

A row under the head for a search field; it goes away in the rail.

sidebar_user(assigns)

The account card at the foot of the sidebar: avatar, name and e-mail. Only the avatar stays in the rail.

Functions

on_mount(atom, params, session, socket)

@spec on_mount(:sidebar, map(), map(), Phoenix.LiveView.Socket.t()) ::
  {:cont, Phoenix.LiveView.Socket.t()}

The on_mount that puts @sidebar_open in every LiveView of a live_session, from the session value DevactionUI.Shell.SidebarCookie wrote.

shell(assigns)

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

The shell: sidebar, header and panel.

Attributes

  • id (:string) - Defaults to "shell".
  • variant (:string) - Defaults to "classic". Must be one of "classic", "topbar", "split", "centered", or "docs".
  • sidebar_open (:boolean) - the state the server renders; the browser keeps what the person chose after that. Defaults to true.
  • sidebar_label (:string) - names the sidebar for assistive technology. Defaults to nil.
  • open_label (:string) - the toggle button when the sidebar is collapsed. Defaults to nil.
  • close_label (:string) - the toggle button when the sidebar is open. Defaults to nil.
  • content_width (:string) - Defaults to nil.Must be one of nil, or "read".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • sidebar
  • header
  • header_actions
  • list - the middle column of the split variant.
  • toc - the page index of the docs variant.
  • toggle_icon - the icon of the toggle button; a typographic glyph when empty.
  • inner_block (required)