# `PhiaUi.Components.MobileSidebarToggle`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/navigation/mobile_sidebar_toggle.ex#L1)

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>

# `mobile_sidebar_toggle`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*