admin-lte 4.0.0-alpha1 → 4.0.0-alpha3

package/src/html/components/dashboard/_topbar.astro

@@ -0,0 +1,213 @@
+---
+const { path } = Astro.props;
+const distPath = path;
+---
+
+<!--begin::Header-->
+<nav class="app-header navbar navbar-expand bg-body">
+  <!--begin::Container-->
+  <div class="container-fluid">
+    <!--begin::Start Navbar Links-->
+    <ul class="navbar-nav">
+      <li class="nav-item">
+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
+          <i class="bi bi-list"></i>
+        </a>
+      </li>
+      <li class="nav-item d-none d-md-block">
+        <a href="#" class="nav-link">Home</a>
+      </li>
+      <li class="nav-item d-none d-md-block">
+        <a href="#" class="nav-link">Contact</a>
+      </li>
+    </ul>
+    <!--end::Start Navbar Links-->
+
+    <!--begin::End Navbar Links-->
+    <ul class="navbar-nav ms-auto">
+      <!--begin::Navbar Search-->
+      <li class="nav-item">
+        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
+          <i class="bi bi-search"></i>
+        </a>
+      </li>
+      <!--end::Navbar Search-->
+
+      <!--begin::Messages Dropdown Menu-->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-bs-toggle="dropdown" href="#">
+          <i class="bi bi-chat-text"></i>
+          <span class="navbar-badge badge text-bg-danger">3</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+          <a href="#" class="dropdown-item">
+            <!--begin::Message-->
+            <div class="d-flex">
+              <div class="flex-shrink-0">
+                <img
+                  src={distPath + "/assets/img/user1-128x128.jpg"}
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
+              </div>
+              <div class="flex-grow-1">
+                <h3 class="dropdown-item-title">
+                  Brad Diesel
+                  <span class="float-end fs-7 text-danger"
+                    ><i class="bi bi-star-fill"></i></span
+                  >
+                </h3>
+                <p class="fs-7">Call me whenever you can...</p>
+                <p class="fs-7 text-secondary">
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
+                </p>
+              </div>
+            </div>
+            <!--end::Message-->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!--begin::Message-->
+            <div class="d-flex">
+              <div class="flex-shrink-0">
+                <img
+                  src={distPath + "/assets/img/user8-128x128.jpg"}
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
+              </div>
+              <div class="flex-grow-1">
+                <h3 class="dropdown-item-title">
+                  John Pierce
+                  <span class="float-end fs-7 text-secondary">
+                    <i class="bi bi-star-fill"></i>
+                  </span>
+                </h3>
+                <p class="fs-7">I got your message bro</p>
+                <p class="fs-7 text-secondary">
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
+                </p>
+              </div>
+            </div>
+            <!--end::Message-->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!--begin::Message-->
+            <div class="d-flex">
+              <div class="flex-shrink-0">
+                <img
+                  src={distPath + "/assets/img/user3-128x128.jpg"}
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
+              </div>
+              <div class="flex-grow-1">
+                <h3 class="dropdown-item-title">
+                  Nora Silvester
+                  <span class="float-end fs-7 text-warning">
+                    <i class="bi bi-star-fill"></i>
+                  </span>
+                </h3>
+                <p class="fs-7">The subject goes here</p>
+                <p class="fs-7 text-secondary">
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
+                </p>
+              </div>
+            </div>
+            <!--end::Message-->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
+        </div>
+      </li>
+      <!--end::Messages Dropdown Menu-->
+
+      <!--begin::Notifications Dropdown Menu-->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-bs-toggle="dropdown" href="#">
+          <i class="bi bi-bell-fill"></i>
+          <span class="navbar-badge badge text-bg-warning">15</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+          <span class="dropdown-item dropdown-header">15 Notifications</span>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="bi bi-envelope me-2"></i> 4 new messages
+            <span class="float-end text-secondary fs-7">3 mins</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="bi bi-people-fill me-2"></i> 8 friend requests
+            <span class="float-end text-secondary fs-7">12 hours</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
+            <span class="float-end text-secondary fs-7">2 days</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">
+            See All Notifications
+          </a>
+        </div>
+      </li>
+      <!--end::Notifications Dropdown Menu-->
+
+      <!--begin::User Menu Dropdown-->
+      <li class="nav-item dropdown user-menu">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
+          <img
+            src={distPath + "/assets/img/user2-160x160.jpg"}
+            class="user-image rounded-circle shadow"
+            alt="User Image"
+          />
+          <span class="d-none d-md-inline">Alexander Pierce</span>
+        </a>
+        <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+          <!--begin::User Image-->
+          <li class="user-header text-bg-primary">
+            <img
+              src={distPath + "/assets/img/user2-160x160.jpg"}
+              class="rounded-circle shadow"
+              alt="User Image"
+            />
+
+            <p>
+              Alexander Pierce - Web Developer
+              <small>Member since Nov. 2023</small>
+            </p>
+          </li>
+          <!--end::User Image-->
+          <!--begin::Menu Body-->
+          <li class="user-body">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-4 text-center">
+                <a href="#">Followers</a>
+              </div>
+              <div class="col-4 text-center">
+                <a href="#">Sales</a>
+              </div>
+              <div class="col-4 text-center">
+                <a href="#">Friends</a>
+              </div>
+            </div>
+            <!--end::Row-->
+          </li>
+          <!--end::Menu Body-->
+          <!--begin::Menu Footer-->
+          <li class="user-footer">
+            <a href="#" class="btn btn-default btn-flat">Profile</a>
+            <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
+          </li>
+          <!--end::Menu Footer-->
+        </ul>
+      </li>
+      <!--end::User Menu Dropdown-->
+    </ul>
+    <!--end::End Navbar Links-->
+  </div>
+  <!--end::Container-->
+</nav>
+<!--end::Header-->

package/src/html/components/docs/browser-support.mdx

@@ -0,0 +1,23 @@
+AdminLTE comes with the same browser support as Bootstrap 5.
+
+> ##### Excerpt from Bootstrap's official Documentation!
+>
+> Bootstrap supports the **latest, stable releases** of all major browsers and platforms.
+>
+> For more details [look here](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers).
+
+You can find our supported range of browsers and their versions in [our .browserslistrc file](https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc):
+
+```
+# https://github.com/browserslist/browserslist#readme
+
+>= 0.5%
+last 2 major versions
+not dead
+Chrome >= 60
+Firefox >= 60
+Firefox ESR
+iOS >= 12
+Safari >= 12
+not Explorer <= 11
+```

package/src/html/components/docs/color-mode.mdx

@@ -0,0 +1,169 @@
+```html
+<!--begin::Header-->
+<nav class="navbar navbar-expand bg-body">
+  <!--begin::Container-->
+  <div class="container-fluid">
+    <!--begin::Start Navbar links-->
+    <ul class="navbar-nav">
+      <li class="nav-item">
+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"
+          ><i class="bi bi-list"></i
+        ></a>
+      </li>
+      <li class="nav-item d-none d-md-block">
+        <a href="#" class="nav-link">Home</a>
+      </li>
+      <li class="nav-item d-none d-md-block">
+        <a href="#" class="nav-link">Contact</a>
+      </li>
+    </ul>
+    <!--end::Start Navbar links-->
+    <!--begin::End Navbar links-->
+    <ul class="navbar-nav ms-auto">
+      <li class="nav-item dropdown">
+        <button
+          class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+          id="bd-theme"
+          type="button"
+          aria-expanded="false"
+          data-bs-toggle="dropdown"
+          data-bs-display="static"
+        >
+          <span class="theme-icon-active">
+            <i class="my-1"></i>
+          </span>
+          <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+        </button>
+        <ul
+          class="dropdown-menu dropdown-menu-end"
+          aria-labelledby="bd-theme-text"
+          style="--bs-dropdown-min-width: 8rem;"
+        >
+          <li>
+            <button
+              type="button"
+              class="dropdown-item d-flex align-items-center active"
+              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"
+              data-bs-theme-value="auto"
+              aria-pressed="true"
+            >
+              <i class="bi bi-circle-fill-half-stroke me-2"></i>
+              Auto
+              <i class="bi bi-check-lg ms-auto d-none"></i>
+            </button>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <!--end::End Navbar links-->
+  </div>
+  <!--end::Container-->
+</nav>
+<!--end::Header-->
+```
+
+```js
+// Color Mode Toggler
+(() => {
+  "use strict";
+
+  const storedTheme = localStorage.getItem("theme");
+
+  const getPreferredTheme = () => {
+    if (storedTheme) {
+      return storedTheme;
+    }
+
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  };
+
+  const setTheme = function (theme) {
+    if (
+      theme === "auto" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      document.documentElement.setAttribute("data-bs-theme", "dark");
+    } else {
+      document.documentElement.setAttribute("data-bs-theme", theme);
+    }
+  };
+
+  setTheme(getPreferredTheme());
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector("#bd-theme");
+
+    if (!themeSwitcher) {
+      return;
+    }
+
+    const themeSwitcherText = document.querySelector("#bd-theme-text");
+    const activeThemeIcon = document.querySelector(".theme-icon-active i");
+    const btnToActive = document.querySelector(
+      `[data-bs-theme-value="${theme}"]`
+    );
+    const svgOfActiveBtn = btnToActive.querySelector("i").getAttribute("class");
+
+    for (const element of document.querySelectorAll("[data-bs-theme-value]")) {
+      element.classList.remove("active");
+      element.setAttribute("aria-pressed", "false");
+    }
+
+    btnToActive.classList.add("active");
+    btnToActive.setAttribute("aria-pressed", "true");
+    activeThemeIcon.setAttribute("class", svgOfActiveBtn);
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
+
+    if (focus) {
+      themeSwitcher.focus();
+    }
+  };
+
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", () => {
+      if (storedTheme !== "light" || storedTheme !== "dark") {
+        setTheme(getPreferredTheme());
+      }
+    });
+
+  window.addEventListener("DOMContentLoaded", () => {
+    showActiveTheme(getPreferredTheme());
+
+    for (const toggle of document.querySelectorAll("[data-bs-theme-value]")) {
+      toggle.addEventListener("click", () => {
+        const theme = toggle.getAttribute("data-bs-theme-value");
+        localStorage.setItem("theme", theme);
+        setTheme(theme);
+        showActiveTheme(theme, true);
+      });
+    }
+  });
+})();
+```

package/src/{partials/dashboard/_topbar.html → html/components/docs/components/main-header.mdx}

@@ -1,10 +1,14 @@
+```html
 <!-- Navbar -->
-<nav class="main-header navbar navbar-expand navbar-light">
+<nav class="app-header navbar navbar-expand bg-body">
+  <!--begin::Container-->
   <div class="container-fluid">
     <!-- Start navbar links -->
     <ul class="navbar-nav">
       <li class="nav-item">
-        <a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
+          <i class="bi bi-list"></i>
+        </a>
       </li>
       <li class="nav-item d-none d-md-block">
         <a href="#" class="nav-link">Home</a>
@@ -13,20 +17,20 @@
         <a href="#" class="nav-link">Contact</a>
       </li>
     </ul>
-
     <!-- End navbar links -->
+
     <ul class="navbar-nav ms-auto">
       <!-- Navbar Search -->
       <li class="nav-item">
         <a class="nav-link" data-widget="navbar-search" href="#" role="button">
-          <i class="fa-solid fa-search"></i>
+          <i class="bi bi-search"></i>
         </a>
       </li>
 
       <!-- Messages Dropdown Menu -->
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
-          <i class="fa-regular fa-comments"></i>
+          <i class="bi bi-chat-text"></i>
           <span class="navbar-badge badge text-bg-danger">3</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
@@ -34,15 +38,23 @@
             <!-- Message Start -->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src="@@path/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
+                <img
+                  src="../../../dist/assets/img/user1-128x128.jpg"
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   Brad Diesel
-                  <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
+                  <span class="float-end fs-7 text-danger">
+                    <i class="bi bi-star-fill"></i>
+                  </span>
                 </h3>
                 <p class="fs-7">Call me whenever you can...</p>
-                <p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary">
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
+                </p>
               </div>
             </div>
             <!-- Message End -->
@@ -52,15 +64,23 @@
             <!-- Message Start -->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src="@@path/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
+                <img
+                  src="../../../dist/assets/img/user8-128x128.jpg"
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   John Pierce
-                  <span class="float-end fs-7 text-muted"><i class="fa-solid fa-star"></i></span>
+                  <span class="float-end fs-7 text-secondary">
+                    <i class="bi bi-star-fill"></i>
+                  </span>
                 </h3>
                 <p class="fs-7">I got your message bro</p>
-                <p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary">
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
+                </p>
               </div>
             </div>
             <!-- Message End -->
@@ -70,15 +90,23 @@
             <!-- Message Start -->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src="@@path/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
+                <img
+                  src="../../../dist/assets/img/user3-128x128.jpg"
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   Nora Silvester
-                  <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
+                  <span class="float-end fs-7 text-warning">
+                    <i class="bi bi-star-fill"></i>
+                  </span>
                 </h3>
                 <p class="fs-7">The subject goes here</p>
-                <p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary">
+                  <i class="bi bi-clock-fill me-1"></i> 4 Hours Ago
+                </p>
               </div>
             </div>
             <!-- Message End -->
@@ -90,47 +118,58 @@
       <!-- Notifications Dropdown Menu -->
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
-          <i class="fa-regular fa-bell"></i>
+          <i class="bi bi-bell-fill"></i>
           <span class="navbar-badge badge text-bg-warning">15</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <span class="dropdown-item dropdown-header">15 Notifications</span>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fa-solid fa-envelope me-2"></i> 4 new messages
-            <span class="float-end text-muted fs-7">3 mins</span>
+            <i class="bi bi-envelope me-2"></i> 4 new messages
+            <span class="float-end text-secondary fs-7">3 mins</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fa-solid fa-users me-2"></i> 8 friend requests
-            <span class="float-end text-muted fs-7">12 hours</span>
+            <i class="bi bi-people-fill me-2"></i> 8 friend requests
+            <span class="float-end text-secondary fs-7">12 hours</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
-            <i class="fa-solid fa-file me-2"></i> 3 new reports
-            <span class="float-end text-muted fs-7">2 days</span>
+            <i class="bi bi-file-earmark-fill me-2"></i> 3 new reports
+            <span class="float-end text-secondary fs-7">2 days</span>
           </a>
           <div class="dropdown-divider"></div>
-          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+          <a href="#" class="dropdown-item dropdown-footer">
+            See All Notifications
+          </a>
         </div>
       </li>
       <li class="nav-item dropdown user-menu">
         <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
-          <img src="@@path/assets/img/user2-160x160.jpg" class="user-image img-circle shadow" alt="User Image">
+          <img
+            src="../../../dist/assets/img/user2-160x160.jpg"
+            class="user-image rounded-circle shadow"
+            alt="User Image"
+          />
           <span class="d-none d-md-inline">Alexander Pierce</span>
         </a>
         <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <!-- User image -->
           <li class="user-header text-bg-primary">
-            <img src="@@path/assets/img/user2-160x160.jpg" class="img-circle shadow" alt="User Image">
+            <img
+              src="../../../dist/assets/img/user2-160x160.jpg"
+              class="rounded-circle shadow"
+              alt="User Image"
+            />
 
             <p>
               Alexander Pierce - Web Developer
-              <small>Member since Nov. 2012</small>
+              <small>Member since Nov. 2023</small>
             </p>
           </li>
           <!-- Menu Body -->
           <li class="user-body">
+            <!--begin::Row-->
             <div class="row">
               <div class="col-4 text-center">
                 <a href="#">Followers</a>
@@ -142,7 +181,7 @@
                 <a href="#">Friends</a>
               </div>
             </div>
-            <!-- /.row -->
+            <!--end::Row-->
           </li>
           <!-- Menu Footer-->
           <li class="user-footer">
@@ -151,48 +190,9 @@
           </li>
         </ul>
       </li>
-      <li class="nav-item dropdown">
-        <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
-          <span class="theme-icon-active">
-            <i class="my-1"></i>
-          </span>
-        </button>
-        <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 active" data-bs-theme-value="light">
-              <i class="fa-regular fa-sun me-2 opacity-50"></i>
-              Light
-              <i class="fa-solid fa-check ms-auto d-none"></i>
-            </button>
-          </li>
-          <li>
-            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
-              <i class="fa-solid fa-moon me-2 opacity-50"></i>
-              Dark
-              <i class="fa-solid fa-check ms-auto d-none"></i>
-            </button>
-          </li>
-          <li>
-            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
-              <i class="fa-solid fa-circle-half-stroke me-2 opacity-50"></i>
-              Auto
-              <i class="fa-solid fa-check ms-auto d-none"></i>
-            </button>
-          </li>
-        </ul>
-      </li>
-      <!-- TODO tackel in v4.1 -->
-      <!-- <li class="nav-item">
-        <a class="nav-link" data-widget="fullscreen" href="#" role="button">
-          <i class="fa-solid fa-expand-arrows-alt"></i>
-        </a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
-          <i class="fa-solid fa-th-large"></i>
-        </a>
-      </li> -->
     </ul>
   </div>
+  <!--end::Container-->
 </nav>
 <!-- /.navbar -->
+```