pushmenu doc added

README.md

@@ -73,7 +73,7 @@ To build for production:
 
 AdminLTE supports all modern browsers with the latest Bootstrap 5.3.7:
 - Chrome (latest)
-- Firefox (latest) 
+- Firefox (latest)
 - Safari (latest)
 - Edge (latest)
 
@@ -86,6 +86,36 @@ AdminLTE v4 build scripts work cross-platform:
 
 All npm scripts use cross-platform utilities to ensure consistent behavior across different operating systems.
 
+## Sponsorship
+
+Support AdminLTE development by becoming a sponsor or donor.
+
+<p align="center">
+  <a href="https://github.com/sponsors/danny007in">
+    <img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86" alt="Sponsor on GitHub" />
+  </a>
+  &nbsp;&nbsp;
+  <a href="https://www.paypal.me/daniel007in">
+    <img src="https://img.shields.io/static/v1?label=Donate&message=%E2%9D%A4&logo=PayPal&color=%2300457C" alt="Donate via PayPal" />
+  </a>
+</p>
+
+## Our Sponsors
+
+<p align="center">
+  <a href="https://github.com/spizzo14"><img src="https://unavatar.io/github/spizzo14?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: spizzo14" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/tomhappyblock"><img src="https://unavatar.io/github/tomhappyblock?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: tomhappyblock" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/stefanmorderca"><img src="https://unavatar.io/github/stefanmorderca?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: stefanmorderca" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/tito10047"><img src="https://unavatar.io/github/tito10047?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: tito10047" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/sitchi"><img src="https://unavatar.io/github/sitchi?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: sitchi" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/npreee"><img src="https://unavatar.io/github/npreee?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: npreee" loading="lazy" /></a>&nbsp;&nbsp;
+  <a href="https://github.com/isaacmorais"><img src="https://unavatar.io/github/isaacmorais?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: isaacmorais" loading="lazy" /></a>&nbsp;&nbsp;
+</p>
+
+<p align="center">
+  <a href="https://github.com/sponsors/danny007in">Your avatar here? Become a sponsor</a>
+</p>
+
 ## Contributing
 
 - Highly welcome.
@@ -99,11 +129,6 @@ All npm scripts use cross-platform utilities to ensure consistent behavior acros
 - After installation completes, run `npm start`
 - Cool, Send your changes in PR to `master` branch.
 
-## Sponsorship
-
-Support AdminLTE development by becoming a sponsor.
-[Github Sponsors](https://github.com/sponsors/danny007in) or
-[PayPal](https://www.paypal.me/daniel007in)
 
 ## License
 
@@ -117,3 +142,4 @@ AdminLTE.io reserves the right to change the license of future releases.
 - [Pickaface](https://pickaface.net/)
 - [Unsplash](https://unsplash.com/)
 - [Uifaces](http://uifaces.com/)
+- [Unavatar](https://unavatar.io/)

index.html

@@ -7,6 +7,6 @@
   <meta name='viewport' content='width=device-width, initial-scale=1'>
 </head>
 <body>
-  <script>window.location.href = './dist/pages/index.html'</script>
+  <script>window.location.href = './dist/index.html'</script>
 </body>
 </html>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "admin-lte",
-  "version": "4.0.0-rc3",
+  "version": "4.0.0-rc4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "admin-lte",
-      "version": "4.0.0-rc3",
+      "version": "4.0.0-rc4",
       "license": "MIT",
       "devDependencies": {
         "@astrojs/check": "^0.9.4",

src/html/components/javascript/pushmenu.mdx

@@ -0,0 +1,17 @@
+The Pushmenu plugin is used to toggle the visibility of a sidebar menu. It allows users to collapse or expand the sidebar by clicking on a button or a link.
+
+##### Usage
+
+This plugin can be used as the data api.
+
+**Data API**
+
+Add `data-lte-toggle="sidebar"` to any button or link element to activate the plugin.
+
+```html
+<a href="#" data-lte-toggle="sidebar">Toggle Sidebar</a>
+```
+
+##### Example
+
+<a href="#" data-lte-toggle="sidebar">Toggle Sidebar</a>

src/html/pages/docs/javascript/pushmenu.astro

@@ -0,0 +1,71 @@
+---
+import Head from "@components/_head.astro"
+import Footer from "@components/dashboard/_footer.astro"
+import Topbar from "@components/dashboard/_topbar.astro"
+import Pushmenu from "@components/javascript/pushmenu.mdx"
+import Sidenav from "@components/dashboard/_sidenav.astro"
+import Scripts from "@components/_scripts.astro"
+
+const title = "Pushmenu Plugin | AdminLTE 4"
+const path = "../../../../dist"
+const mainPage = "javascript"
+const page = "pushmenu";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Pushmenu Plugin</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Pushmenu Plugin
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <Pushmenu />
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>

src/ts/treeview.ts

@@ -24,7 +24,7 @@ const EVENT_KEY = `.${DATA_KEY}`
 
 const EVENT_EXPANDED = `expanded${EVENT_KEY}`
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
-// const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
+const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
 
 const CLASS_NAME_MENU_OPEN = 'menu-open'
 const SELECTOR_NAV_ITEM = '.nav-item'
@@ -112,6 +112,18 @@ class Treeview {
  */
 
 onDOMContentLoaded(() => {
+  const openMenuItems = document.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
+
+  openMenuItems.forEach(menuItem => {
+    const childElement = menuItem.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    if (childElement) {
+      slideDown(childElement, 0)
+
+      const event = new Event(EVENT_LOAD_DATA_API)
+      menuItem.dispatchEvent(event)
+    }
+  })
+
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
 
   button.forEach(btn => {