PhiaUi.Components.MobileSidebarToggle (phia_ui v0.1.17)

Copy Markdown View Source

Mobile hamburger button that toggles the sidebar via Phoenix.LiveView.JS.

The button is hidden on md: and wider (md:hidden) so it does not appear on desktop where the sidebar is always visible. Place it in the :topbar slot of shell/1 so it appears at the left edge of the topbar on mobile.

The toggle uses JS.toggle/1 with transition-transform duration-300 ease-in-out classes: the sidebar slides in from the left on open and out on close. No server round-trip is required.

Example

<:topbar>
  <%!-- Only visible on mobile (< md breakpoint) --%>
  <.mobile_sidebar_toggle />
  <span class="ml-2 font-semibold">Acme</span>
</:topbar>

Summary

Functions

mobile_sidebar_toggle(assigns)

Hamburger/menu button that toggles the mobile sidebar via Phoenix.LiveView.JS.

Functions

mobile_sidebar_toggle(assigns)

Hamburger/menu button that toggles the mobile sidebar via Phoenix.LiveView.JS.

Example

<.mobile_sidebar_toggle />
<.mobile_sidebar_toggle target="#my-sidebar" />

Attributes

  • target (:string) - CSS selector for the element toggled by JS.toggle/1. Defaults to #mobile-sidebar, which matches the <aside> rendered by shell/1. Override this if you use a custom sidebar element ID.

    Defaults to "#mobile-sidebar".

  • class (:string) - Additional CSS classes. Defaults to nil.

  • Global attributes are accepted.