npm - admin-lte - Versions diffs - 4.0.0-rc7 → 4.0.0 - Mend

admin-lte 4.0.0-rc7 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/CHANGELOG.md +48 -0
package/README.md +43 -17
package/dist/UI/general.html +303 -126
package/dist/UI/icons.html +303 -126
package/dist/UI/timeline.html +303 -126
package/dist/css/adminlte.css +2798 -1167
package/dist/css/adminlte.css.map +1 -1
package/dist/css/adminlte.min.css +2 -2
package/dist/css/adminlte.min.css.map +1 -1
package/dist/css/adminlte.rtl.css +2798 -1167
package/dist/css/adminlte.rtl.css.map +1 -1
package/dist/css/adminlte.rtl.min.css +2 -2
package/dist/css/adminlte.rtl.min.css.map +1 -1
package/dist/docs/browser-support.html +261 -397
package/dist/docs/color-mode.html +242 -382
package/dist/docs/components/main-header.html +238 -374
package/dist/docs/components/main-sidebar.html +253 -389
package/dist/docs/customization.html +1056 -0
package/dist/docs/deployment.html +1121 -0
package/dist/docs/faq.html +857 -409
package/dist/docs/getting-started.html +967 -0
package/dist/docs/how-to-contribute.html +335 -462
package/dist/docs/index.html +16 -0
package/dist/docs/integrations.html +1207 -0
package/dist/docs/introduction.html +453 -446
package/dist/docs/javascript/accessibility.html +361 -491
package/dist/docs/javascript/card-widget.html +446 -450
package/dist/docs/javascript/direct-chat.html +324 -421
package/dist/docs/javascript/fullscreen.html +348 -416
package/dist/docs/javascript/layout.html +345 -436
package/dist/docs/javascript/plugins-overview.html +1120 -0
package/dist/docs/javascript/pushmenu.html +485 -492
package/dist/docs/javascript/treeview.html +466 -400
package/dist/docs/layout-blueprint.html +1063 -0
package/dist/docs/layout.html +287 -415
package/dist/docs/license.html +252 -387
package/dist/docs/migration.html +1125 -0
package/dist/docs/recipes.html +1161 -0
package/dist/docs/rtl.html +933 -0
package/dist/examples/lockscreen.html +65 -1
package/dist/examples/login-v2.html +65 -1
package/dist/examples/login.html +65 -1
package/dist/examples/register-v2.html +65 -1
package/dist/examples/register.html +65 -1
package/dist/forms/{general.html → elements.html} +489 -463
package/dist/forms/layout.html +1243 -0
package/dist/forms/validation.html +1251 -0
package/dist/forms/wizard.html +1386 -0
package/dist/generate/theme.html +134 -4
package/dist/index.html +303 -126
package/dist/index2.html +306 -126
package/dist/index3.html +303 -126
package/dist/js/adminlte.js +5 -5
package/dist/js/adminlte.js.map +1 -1
package/dist/js/adminlte.min.js +2 -2
package/dist/js/adminlte.min.js.map +1 -1
package/dist/layout/collapsed-sidebar-without-hover.html +303 -126
package/dist/layout/collapsed-sidebar.html +303 -126
package/dist/layout/fixed-complete.html +303 -126
package/dist/layout/fixed-footer.html +303 -126
package/dist/layout/fixed-header.html +303 -126
package/dist/layout/fixed-sidebar.html +303 -126
package/dist/layout/layout-custom-area.html +303 -126
package/dist/layout/layout-rtl.html +303 -126
package/dist/layout/logo-switch.html +134 -4
package/dist/layout/sidebar-mini.html +303 -126
package/dist/layout/unfixed-sidebar.html +303 -126
package/dist/mailbox/compose.html +1127 -0
package/dist/mailbox/inbox.html +1477 -0
package/dist/mailbox/read.html +1178 -0
package/dist/pages/404.html +213 -0
package/dist/pages/500.html +201 -0
package/dist/pages/calendar.html +1242 -0
package/dist/pages/chat.html +1403 -0
package/dist/pages/faq.html +1359 -0
package/dist/pages/file-manager.html +1811 -0
package/dist/pages/invoice.html +1175 -0
package/dist/pages/kanban.html +1415 -0
package/dist/pages/maintenance.html +204 -0
package/dist/pages/pricing.html +1255 -0
package/dist/pages/profile.html +1358 -0
package/dist/pages/projects.html +1620 -0
package/dist/pages/settings.html +1363 -0
package/dist/tables/data.html +1295 -0
package/dist/tables/simple.html +303 -126
package/dist/widgets/cards.html +303 -126
package/dist/widgets/info-box.html +303 -126
package/dist/widgets/small-box.html +303 -126
package/netlify.toml +16 -0
package/package.json +29 -23
package/src/scss/_app-header.scss +27 -0
package/src/scss/_app-sidebar.scss +24 -30
package/src/scss/_bootstrap-variables.scss +11 -4
package/src/scss/_docs.scss +816 -0
package/src/scss/_table.scss +4 -4
package/src/scss/adminlte.scss +4 -1
package/src/ts/adminlte.ts +1 -1
package/src/ts/fullscreen.ts +8 -4
package/src/ts/push-menu.ts +66 -5
package/.claude/settings.local.json +0 -37
package/CLAUDE.md +0 -79
package/release.md +0 -75

package/dist/docs/javascript/layout.html CHANGED Viewed

@@ -64,7 +64,7 @@
   </head>
   <!--end::Head-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
       <!--begin::Header-->
@@ -78,11 +78,18 @@
                 <i class="bi bi-list"></i>
               </a>
             </li>
             <li class="nav-item d-none d-md-block">
-              <a href="#" class="nav-link">Home</a>
+              <a href="../../docs/introduction.html" class="nav-link">
+                <i class="bi bi-book me-1" aria-hidden="true"></i>
+                Documentation
+              </a>
             </li>
             <li class="nav-item d-none d-md-block">
-              <a href="#" class="nav-link">Contact</a>
+              <a href="../../index.html" class="nav-link">
+                <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
+                Back to live preview
+              </a>
             </li>
           </ul>
           <!--end::Start Navbar Links-->
@@ -220,11 +227,70 @@
             <li class="nav-item">
               <a class="nav-link" href="#" data-lte-toggle="fullscreen">
                 <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
-                <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
+                <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
               </a>
             </li>
             <!--end::Fullscreen Toggle-->
+            <!--begin::Color Mode Toggle (#6010)-->
+            <li class="nav-item dropdown">
+              <a
+                class="nav-link"
+                href="#"
+                id="bd-theme"
+                aria-label="Toggle color scheme"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
+                <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
+                <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
+              </a>
+              <ul
+                class="dropdown-menu dropdown-menu-end"
+                aria-labelledby="bd-theme"
+                style="--bs-dropdown-min-width: 8rem"
+              >
+                <li>
+                  <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center"
+                    data-bs-theme-value="light"
+                    aria-pressed="false"
+                  >
+                    <i class="bi bi-sun-fill me-2"></i>
+                    Light
+                    <i class="bi bi-check-lg ms-auto d-none"></i>
+                  </button>
+                </li>
+                <li>
+                  <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center"
+                    data-bs-theme-value="dark"
+                    aria-pressed="false"
+                  >
+                    <i class="bi bi-moon-fill me-2"></i>
+                    Dark
+                    <i class="bi bi-check-lg ms-auto d-none"></i>
+                  </button>
+                </li>
+                <li>
+                  <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center active"
+                    data-bs-theme-value="auto"
+                    aria-pressed="true"
+                  >
+                    <i class="bi bi-circle-half me-2"></i>
+                    Auto
+                    <i class="bi bi-check-lg ms-auto d-none"></i>
+                  </button>
+                </li>
+              </ul>
+            </li>
+            <!--end::Color Mode Toggle-->
             <!--begin::User Menu Dropdown-->
             <li class="nav-item dropdown user-menu">
               <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -281,24 +347,20 @@
         <!--end::Container-->
       </nav>
       <!--end::Header-->
-      <!--begin::Sidebar-->
+      <!--begin::Sidebar (docs mode)-->
       <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
         <!--begin::Sidebar Brand-->
         <div class="sidebar-brand">
-          <!--begin::Brand Link-->
-          <a href="../../index.html" class="brand-link">
-            <!--begin::Brand Image-->
+          <a href="../../docs/introduction.html" class="brand-link">
             <img
               src="../../assets/img/AdminLTELogo.png"
               alt="AdminLTE Logo"
               class="brand-image opacity-75 shadow"
             />
-            <!--end::Brand Image-->
-            <!--begin::Brand Text-->
-            <span class="brand-text fw-light">AdminLTE 4</span>
-            <!--end::Brand Text-->
+            <span class="brand-text fw-light">
+              AdminLTE 4 <span class="opacity-75">&middot; Docs</span>
+            </span>
           </a>
-          <!--end::Brand Link-->
         </div>
         <!--end::Sidebar Brand-->
         <!--begin::Sidebar Wrapper-->
@@ -309,298 +371,61 @@
               class="nav sidebar-menu flex-column"
               data-lte-toggle="treeview"
               role="navigation"
-              aria-label="Main navigation"
+              aria-label="Documentation navigation"
               data-accordion="false"
-              id="navigation"
+              id="docs-navigation"
             >
+              <li class="nav-header">START HERE</li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-speedometer"></i>
-                  <p>
-                    Dashboard
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../../docs/introduction.html" class="nav-link">
+                  <i class="nav-icon bi bi-download"></i>
+                  <p>Installation</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../../index.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Dashboard v1</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../index2.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Dashboard v2</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../index3.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Dashboard v3</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
               <li class="nav-item">
-                <a href="../../generate/theme.html" class="nav-link">
-                  <i class="nav-icon bi bi-palette"></i>
-                  <p>Theme Generate</p>
+                <a href="../../docs/getting-started.html" class="nav-link">
+                  <i class="nav-icon bi bi-rocket-takeoff"></i>
+                  <p>Getting Started</p>
                 </a>
               </li>
+              <li class="nav-header">FOUNDATIONS</li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-box-seam-fill"></i>
-                  <p>
-                    Widgets
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../../docs/layout.html" class="nav-link">
+                  <i class="nav-icon bi bi-grip-horizontal"></i>
+                  <p>Layout Classes</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../../widgets/small-box.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Small Box</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../widgets/info-box.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>info Box</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../widgets/cards.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Cards</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-clipboard-fill"></i>
-                  <p>
-                    Layout Options
-                    <span class="nav-badge badge text-bg-secondary me-3">7</span>
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../../docs/layout-blueprint.html" class="nav-link">
+                  <i class="nav-icon bi bi-diagram-3"></i>
+                  <p>Layout Blueprint</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../../layout/unfixed-sidebar.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Default Sidebar</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../layout/fixed-sidebar.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Fixed Sidebar</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../layout/fixed-header.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Fixed Header</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../layout/fixed-footer.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Fixed Footer</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../layout/fixed-complete.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Fixed Complete</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../layout/layout-custom-area.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Layout <small>+ Custom Area </small></p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../layout/sidebar-mini.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Sidebar Mini</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../layout/collapsed-sidebar.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Sidebar Mini <small>+ Collapsed</small></p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../layout/collapsed-sidebar-without-hover.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../layout/logo-switch.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Sidebar Mini <small>+ Logo Switch</small></p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../layout/layout-rtl.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Layout RTL</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-tree-fill"></i>
-                  <p>
-                    UI Elements
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
-                </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../../UI/general.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>General</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../UI/icons.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Icons</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../UI/timeline.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Timeline</p>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-pencil-square"></i>
-                  <p>
-                    Forms
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../../docs/customization.html" class="nav-link">
+                  <i class="nav-icon bi bi-palette"></i>
+                  <p>Customization</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../../forms/general.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>General Elements</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-table"></i>
-                  <p>
-                    Tables
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../../docs/color-mode.html" class="nav-link">
+                  <i class="nav-icon bi bi-star-half"></i>
+                  <p>Color Mode</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../../tables/simple.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Simple Tables</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
-              <li class="nav-header">EXAMPLES</li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-box-arrow-in-right"></i>
-                  <p>
-                    Auth
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
+                <a href="../../docs/rtl.html" class="nav-link">
+                  <i class="nav-icon bi bi-text-paragraph"></i>
+                  <p>RTL Support</p>
                 </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="#" class="nav-link">
-                      <i class="nav-icon bi bi-box-arrow-in-right"></i>
-                      <p>
-                        Version 1
-                        <i class="nav-arrow bi bi-chevron-right"></i>
-                      </p>
-                    </a>
-                    <ul class="nav nav-treeview">
-                      <li class="nav-item">
-                        <a href="../../examples/login.html" class="nav-link">
-                          <i class="nav-icon bi bi-circle"></i>
-                          <p>Login</p>
-                        </a>
-                      </li>
-                      <li class="nav-item">
-                        <a href="../../examples/register.html" class="nav-link">
-                          <i class="nav-icon bi bi-circle"></i>
-                          <p>Register</p>
-                        </a>
-                      </li>
-                    </ul>
-                  </li>
-                  <li class="nav-item">
-                    <a href="#" class="nav-link">
-                      <i class="nav-icon bi bi-box-arrow-in-right"></i>
-                      <p>
-                        Version 2
-                        <i class="nav-arrow bi bi-chevron-right"></i>
-                      </p>
-                    </a>
-                    <ul class="nav nav-treeview">
-                      <li class="nav-item">
-                        <a href="../../examples/login-v2.html" class="nav-link">
-                          <i class="nav-icon bi bi-circle"></i>
-                          <p>Login</p>
-                        </a>
-                      </li>
-                      <li class="nav-item">
-                        <a href="../../examples/register-v2.html" class="nav-link">
-                          <i class="nav-icon bi bi-circle"></i>
-                          <p>Register</p>
-                        </a>
-                      </li>
-                    </ul>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../../examples/lockscreen.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Lockscreen</p>
-                    </a>
-                  </li>
-                </ul>
               </li>
-              <li class="nav-header">DOCUMENTATIONS</li>
-              <li class="nav-item">
-                <a href="../../docs/introduction.html" class="nav-link">
-                  <i class="nav-icon bi bi-download"></i>
-                  <p>Installation</p>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a href="../../docs/layout.html" class="nav-link active">
-                  <i class="nav-icon bi bi-grip-horizontal"></i>
-                  <p>Layout</p>
-                </a>
-              </li>
+              <li class="nav-header">BUILDING</li>
               <li class="nav-item">
-                <a href="../../docs/color-mode.html" class="nav-link">
-                  <i class="nav-icon bi bi-star-half"></i>
-                  <p>Color Mode</p>
+                <a href="../../docs/recipes.html" class="nav-link">
+                  <i class="nav-icon bi bi-clipboard-check"></i>
+                  <p>Recipes</p>
                 </a>
               </li>
               <li class="nav-item">
@@ -630,11 +455,17 @@
                 <a href="#" class="nav-link active">
                   <i class="nav-icon bi bi-filetype-js"></i>
                   <p>
-                    Javascript
+                    JavaScript Plugins
                     <i class="nav-arrow bi bi-chevron-right"></i>
                   </p>
                 </a>
                 <ul class="nav nav-treeview">
+                  <li class="nav-item">
+                    <a href="../../docs/javascript/plugins-overview.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Overview</p>
+                    </a>
+                  </li>
                   <li class="nav-item">
                     <a href="../../docs/javascript/layout.html" class="nav-link active">
                       <i class="nav-icon bi bi-circle"></i>
@@ -680,122 +511,83 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a href="../../docs/browser-support.html" class="nav-link">
-                  <i class="nav-icon bi bi-browser-edge"></i>
-                  <p>Browser Support</p>
+                <a href="../../docs/integrations.html" class="nav-link">
+                  <i class="nav-icon bi bi-puzzle"></i>
+                  <p>Integrations</p>
                 </a>
               </li>
+              <li class="nav-header">SHIPPING</li>
               <li class="nav-item">
-                <a href="../../docs/how-to-contribute.html" class="nav-link">
-                  <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
-                  <p>How To Contribute</p>
+                <a href="../../docs/migration.html" class="nav-link">
+                  <i class="nav-icon bi bi-arrow-up-right-square"></i>
+                  <p>Migration from v3</p>
                 </a>
               </li>
               <li class="nav-item">
-                <a href="../../docs/faq.html" class="nav-link">
-                  <i class="nav-icon bi bi-question-circle-fill"></i>
-                  <p>FAQ</p>
+                <a href="../../docs/deployment.html" class="nav-link">
+                  <i class="nav-icon bi bi-cloud-upload"></i>
+                  <p>Deployment</p>
                 </a>
               </li>
               <li class="nav-item">
-                <a href="../../docs/license.html" class="nav-link">
-                  <i class="nav-icon bi bi-patch-check-fill"></i>
-                  <p>License</p>
+                <a href="../../docs/browser-support.html" class="nav-link">
+                  <i class="nav-icon bi bi-browser-chrome"></i>
+                  <p>Browser Support</p>
                 </a>
               </li>
-              <li class="nav-header">MULTI LEVEL EXAMPLE</li>
+              <li class="nav-header">RESOURCES</li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle-fill"></i>
-                  <p>Level 1</p>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle-fill"></i>
-                  <p>
-                    Level 1
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
-                </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="#" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Level 2</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="#" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>
-                        Level 2
-                        <i class="nav-arrow bi bi-chevron-right"></i>
-                      </p>
-                    </a>
-                    <ul class="nav nav-treeview">
-                      <li class="nav-item">
-                        <a href="#" class="nav-link">
-                          <i class="nav-icon bi bi-record-circle-fill"></i>
-                          <p>Level 3</p>
-                        </a>
-                      </li>
-                      <li class="nav-item">
-                        <a href="#" class="nav-link">
-                          <i class="nav-icon bi bi-record-circle-fill"></i>
-                          <p>Level 3</p>
-                        </a>
-                      </li>
-                      <li class="nav-item">
-                        <a href="#" class="nav-link">
-                          <i class="nav-icon bi bi-record-circle-fill"></i>
-                          <p>Level 3</p>
-                        </a>
-                      </li>
-                    </ul>
-                  </li>
-                  <li class="nav-item">
-                    <a href="#" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Level 2</p>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle-fill"></i>
-                  <p>Level 1</p>
+                <a href="../../docs/faq.html" class="nav-link">
+                  <i class="nav-icon bi bi-question-circle"></i>
+                  <p>FAQ</p>
                 </a>
               </li>
-              <li class="nav-header">LABELS</li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle text-danger"></i>
-                  <p class="text">Important</p>
+                <a href="../../docs/how-to-contribute.html" class="nav-link">
+                  <i class="nav-icon bi bi-people"></i>
+                  <p>Contributing</p>
                 </a>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle text-warning"></i>
-                  <p>Warning</p>
+                <a href="../../docs/license.html" class="nav-link">
+                  <i class="nav-icon bi bi-patch-check"></i>
+                  <p>License</p>
                 </a>
               </li>
               <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-circle text-info"></i>
-                  <p>Informational</p>
+                <a
+                  href="https://github.com/ColorlibHQ/AdminLTE"
+                  target="_blank"
+                  rel="noopener"
+                  class="nav-link"
+                >
+                  <i class="nav-icon bi bi-github"></i>
+                  <p>
+                    GitHub
+                    <i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
+                  </p>
                 </a>
               </li>
             </ul>
             <!--end::Sidebar Menu-->
+            <!-- Back to preview CTA (bottom of sidebar) -->
+            <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
+              <a
+                href="../../index.html"
+                class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
+              >
+                <i class="bi bi-arrow-left" aria-hidden="true"></i>
+                Back to live preview
+              </a>
+            </div>
           </nav>
         </div>
         <!--end::Sidebar Wrapper-->
       </aside>
-      <!--end::Sidebar-->
+      <!--end::Sidebar (docs mode)-->
       <!--begin::App Main-->
       <main class="app-main">
         <!--begin::App Content Header-->
@@ -823,63 +615,67 @@
         <div class="app-content">
           <!--begin::Container-->
           <div class="container-fluid">
-            <p>
-              The Layout plugin manages CSS transitions during layout changes and signals when the
-              app has finished loading.
-            </p>
-            <h5 id="behavior">Behavior</h5>
-            <p>The Layout plugin performs two key tasks automatically:</p>
-            <ol>
-              <li>
-                <p>
-                  <strong>Hold Transitions</strong> - During window resize, CSS transitions on the
-                  sidebar, navbar, and content area are temporarily disabled to prevent visual
-                  glitches. The <code>hold-transition</code> class is added to
-                  <code>&lt;body&gt;</code> for the duration.
-                </p>
-              </li>
-              <li>
-                <p>
-                  <strong>App Loaded Signal</strong> - After a 400ms delay on DOMContentLoaded, the
-                  <code>app-loaded</code> class is added to <code>&lt;body&gt;</code>. Use this
-                  class in CSS to defer animations until the app is ready, preventing flicker on
-                  initial page load.
-                </p>
-              </li>
-            </ol>
-            <h5 id="css-classes">CSS Classes</h5>
-            <table>
-              <thead>
-                <tr>
-                  <th>Class</th>
-                  <th>Description</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td><code>hold-transition</code></td>
-                  <td>
-                    Temporarily disables CSS transitions on layout elements. Applied during window
-                    resize.
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>app-loaded</code></td>
-                  <td>
-                    Added to <code>&lt;body&gt;</code> after the initial layout is ready. Use for
-                    entrance animations.
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <h5 id="usage-in-css">Usage in CSS</h5>
-            <pre
-              class="astro-code dark-plus"
-              style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
-              tabindex="0"
-              data-language="css"
-            ><code><span class="line"><span style="color:#6A9955">/* Hide sidebar transitions until the app is loaded */</span></span>
+            <div class="row">
+              <div class="col-12">
+                <div class="card">
+                  <div class="card-body">
+                    <p>
+                      The Layout plugin manages CSS transitions during layout changes and signals
+                      when the app has finished loading.
+                    </p>
+                    <h5 id="behavior">Behavior</h5>
+                    <p>The Layout plugin performs two key tasks automatically:</p>
+                    <ol>
+                      <li>
+                        <p>
+                          <strong>Hold Transitions</strong> - During window resize, CSS transitions
+                          on the sidebar, navbar, and content area are temporarily disabled to
+                          prevent visual glitches. The <code>hold-transition</code> class is added
+                          to <code>&lt;body&gt;</code> for the duration.
+                        </p>
+                      </li>
+                      <li>
+                        <p>
+                          <strong>App Loaded Signal</strong> - After a 400ms delay on
+                          DOMContentLoaded, the <code>app-loaded</code> class is added to
+                          <code>&lt;body&gt;</code>. Use this class in CSS to defer animations until
+                          the app is ready, preventing flicker on initial page load.
+                        </p>
+                      </li>
+                    </ol>
+                    <h5 id="css-classes">CSS Classes</h5>
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Class</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>hold-transition</code></td>
+                          <td>
+                            Temporarily disables CSS transitions on layout elements. Applied during
+                            window resize.
+                          </td>
+                        </tr>
+                        <tr>
+                          <td><code>app-loaded</code></td>
+                          <td>
+                            Added to <code>&lt;body&gt;</code> after the initial layout is ready.
+                            Use for entrance animations.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="usage-in-css">Usage in CSS</h5>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="css"
+                    ><code><span class="line"><span style="color:#6A9955">/* Hide sidebar transitions until the app is loaded */</span></span>
 <span class="line"><span style="color:#D7BA7D">body:not</span><span style="color:#D4D4D4">(</span><span style="color:#D7BA7D">.app-loaded</span><span style="color:#D4D4D4">) </span><span style="color:#D7BA7D">.app-sidebar</span><span style="color:#D4D4D4"> {</span></span>
 <span class="line"><span style="color:#9CDCFE">  transition</span><span style="color:#D4D4D4">: </span><span style="color:#CE9178">none</span><span style="color:#569CD6"> !important</span><span style="color:#D4D4D4">;</span></span>
 <span class="line"><span style="color:#D4D4D4">}</span></span>
@@ -888,17 +684,66 @@
 <span class="line"><span style="color:#D7BA7D">body.app-loaded</span><span style="color:#D7BA7D"> .app-sidebar</span><span style="color:#D4D4D4"> {</span></span>
 <span class="line"><span style="color:#9CDCFE">  transition</span><span style="color:#D4D4D4">: width </span><span style="color:#B5CEA8">0.3s</span><span style="color:#CE9178"> ease</span><span style="color:#D4D4D4">;</span></span>
 <span class="line"><span style="color:#D4D4D4">}</span></span></code></pre>
-            <h5 id="notes">Notes</h5>
-            <ul>
-              <li>
-                The <code>hold-transition</code> class is automatically removed after 200ms (on
-                resize) or 100ms (default).
-              </li>
-              <li>
-                No data attributes or manual initialization required. The plugin initializes
-                automatically.
-              </li>
-            </ul>
+                    <h5 id="programmatic-api">Programmatic API</h5>
+                    <p>
+                      The Layout plugin self-initializes on <code>DOMContentLoaded</code> — there’s
+                      nothing to wire up manually. The only public method is exposed for advanced
+                      cases where you want to suppress transitions around your own DOM mutations:
+                    </p>
+                    <pre
+                      class="astro-code dark-plus"
+                      style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
+                      tabindex="0"
+                      data-language="js"
+                    ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">Layout</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> layout</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">new</span><span style="color:#DCDCAA"> Layout</span><span style="color:#D4D4D4">(</span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">body</span><span style="color:#D4D4D4">)</span></span>
+<span class="line"><span style="color:#9CDCFE">layout</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">holdTransition</span><span style="color:#D4D4D4">(</span><span style="color:#B5CEA8">200</span><span style="color:#D4D4D4">)   </span><span style="color:#6A9955">// disable transitions for 200ms</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#6A9955">// ... do something that would otherwise animate awkwardly</span></span>
+<span class="line"><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">body</span><span style="color:#D4D4D4">.</span><span style="color:#9CDCFE">classList</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">toggle</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;sidebar-mini&quot;</span><span style="color:#D4D4D4">)</span></span></code></pre>
+                    <h6 id="methods">Methods</h6>
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Method</th>
+                          <th>Returns</th>
+                          <th>Description</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr>
+                          <td><code>holdTransition(time?)</code></td>
+                          <td><code>void</code></td>
+                          <td>
+                            Adds <code>hold-transition</code> to <code>&lt;body&gt;</code>, removes
+                            it after <code>time</code> milliseconds (default <code>100</code>). Use
+                            to suppress CSS transitions during programmatic layout changes.
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <h5 id="notes">Notes</h5>
+                    <ul>
+                      <li>
+                        The <code>hold-transition</code> class is automatically removed after the
+                        timeout. You don’t need to clean up.
+                      </li>
+                      <li>
+                        No data attributes — the plugin reads no config and initialises with the
+                        body element on page load.
+                      </li>
+                      <li>
+                        If you need to detect when the initial page-load animations are done, watch
+                        for the <code>app-loaded</code> class on <code>&lt;body&gt;</code> or listen
+                        for the standard <code>load</code> event.
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <!--end::Container-->
         </div>
@@ -968,7 +813,71 @@
         }
       });
     </script>
-    <!--end::OverlayScrollbars Configure-->
+    <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
+    <script>
+      (() => {
+        'use strict';
+        const STORAGE_KEY = 'lte-theme';
+        const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
+        const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
+        const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
+        const getPreferredTheme = () => {
+          const stored = getStoredTheme();
+          if (stored) return stored;
+          return prefersDark() ? 'dark' : 'light';
+        };
+        const setTheme = (theme) => {
+          const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
+          document.documentElement.setAttribute('data-bs-theme', resolved);
+        };
+        setTheme(getPreferredTheme());
+        const showActiveTheme = (theme) => {
+          // Highlight the active dropdown option
+          document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
+            el.classList.remove('active');
+            el.setAttribute('aria-pressed', 'false');
+            const check = el.querySelector('.bi-check-lg');
+            if (check) check.classList.add('d-none');
+          });
+          const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+          if (active) {
+            active.classList.add('active');
+            active.setAttribute('aria-pressed', 'true');
+            const check = active.querySelector('.bi-check-lg');
+            if (check) check.classList.remove('d-none');
+          }
+          // Sync the topbar trigger icon
+          document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
+            icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
+          });
+        };
+        globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+          const stored = getStoredTheme();
+          if (!stored || stored === 'auto') setTheme(getPreferredTheme());
+        });
+        document.addEventListener('DOMContentLoaded', () => {
+          showActiveTheme(getPreferredTheme());
+          document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
+            toggle.addEventListener('click', () => {
+              const theme = toggle.getAttribute('data-bs-theme-value');
+              setStoredTheme(theme);
+              setTheme(theme);
+              showActiveTheme(theme);
+            });
+          });
+        });
+      })();
+    </script>
+    <!--end::Color Mode Toggle-->
     <!--end::Script-->
   </body>
   <!--end::Body-->