# Pushmenu Plugin

The PushMenu plugin toggles the sidebar between expanded and collapsed states. It handles responsive behavior, optional localStorage persistence, and overlay management on mobile.

##### Usage

This plugin is activated via data attributes on the sidebar element and toggle buttons.

Data API

Add `data-lte-toggle="sidebar"` to any button or link to toggle the sidebar.

    <a href="#" data-lte-toggle="sidebar">Toggle Sidebar</a>

##### Configuration

Configure the sidebar via data attributes on the `.app-sidebar` element:

Attribute | Default | Description
--- | --- | ---
`data-sidebar-breakpoint` | `991.98` | Screen width (px) below which the sidebar is considered mobile.
`data-enable-persistence` | `false` | Save sidebar state to localStorage across page loads.

    <aside class="app-sidebar" data-enable-persistence="true" data-sidebar-breakpoint="768">
      <!-- sidebar content -->
    </aside>

##### Responsive Behavior

- Desktop (above breakpoint): Sidebar is expanded by default. Collapse is remembered if persistence is enabled.
- Mobile (at or below breakpoint): Sidebar is collapsed by default. An overlay appears when the sidebar is open, clicking it collapses the sidebar.

##### CSS Classes

Class | Applied to | Description
--- | --- | ---
`sidebar-collapse` | `<body>` | Sidebar is collapsed.
`sidebar-open` | `<body>` | Sidebar is explicitly open on mobile.
`sidebar-mini` | `<body>` | Enables mini sidebar mode (icons only when collapsed).
`sidebar-without-hover` | `<body>` | Prevents collapsed sidebar from expanding on hover.
`sidebar-expand-{breakpoint}` | `<body>` | Sets the responsive breakpoint (`sm`, `md`, `lg`, `xl`, `xxl`).

##### Events

Event | Description
--- | ---
`open.lte.push-menu` | Fired when the sidebar is expanded.
`collapse.lte.push-menu` | Fired when the sidebar is collapsed.

Both events bubble. Listen on `document` for a global hook:

    document.addEventListener("open.lte.push-menu", () => {
      console.log("Sidebar opened")
    })

##### Programmatic API

Import the class and instantiate it on any element (typically the sidebar toggle button or `document.body`):

    import { PushMenu } from "admin-lte"

    const sidebar = new PushMenu(document.querySelector('[data-lte-toggle="sidebar"]'), {
      sidebarBreakpoint: 991.98,
      enablePersistence: false
    })

###### Methods

Method | Returns | Description
--- | --- | ---
`toggle()` | `void` | Expands or collapses the sidebar based on current state. Persists state if `enablePersistence` is `true`.
`expand()` | `void` | Expands the sidebar. Fires `open.lte.push-menu`.
`collapse()` | `void` | Collapses the sidebar. Fires `collapse.lte.push-menu`.
`isCollapsed()` | `boolean` | `true` if `<body>` has `sidebar-collapse` class.
`isExplicitlyOpen()` | `boolean` | `true` if `<body>` has `sidebar-open` (mobile, user opened it).
`isMiniMode()` | `boolean` | `true` if `<body>` has `sidebar-mini`.
`isMobileSize()` | `boolean` | `true` if `window.innerWidth ≤ sidebarBreakpoint`.
`saveSidebarState(state)` | `void` | Manually save state to localStorage (`"sidebar-open"` or `"sidebar-collapse"`).
`loadSidebarState()` | `void` | Read state from localStorage and apply it.
`clearSidebarState()` | `void` | Remove saved state from localStorage.
`updateStateByResponsiveLogic()` | `void` | Recompute correct state based on viewport size (collapse on mobile, expand on desktop unless mini). Called automatically on resize.

###### Storage key

When `enablePersistence` is enabled, the plugin reads/writes `localStorage.getItem("lte.sidebar.state")`. The stored value is one of:

- `"sidebar-open"` — user wants the sidebar expanded
- `"sidebar-collapse"` — user wants it collapsed

##### Example

Toggle Sidebar