admin-lte 4.0.0-beta3 → 4.0.0-rc3

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 (76) hide show
  1. package/.browserslistrc +9 -4
  2. package/ACCESSIBILITY-COMPLIANCE.md +369 -0
  3. package/CHANGELOG.md +460 -0
  4. package/README.md +50 -7
  5. package/dist/{pages/UI → UI}/general.html +79 -28
  6. package/dist/{pages/UI → UI}/icons.html +76 -25
  7. package/dist/{pages/UI → UI}/timeline.html +80 -29
  8. package/dist/css/adminlte.css +516 -332
  9. package/dist/css/adminlte.css.map +1 -1
  10. package/dist/css/adminlte.min.css +1 -1
  11. package/dist/css/adminlte.min.css.map +1 -1
  12. package/dist/css/adminlte.rtl.css +516 -332
  13. package/dist/css/adminlte.rtl.css.map +1 -1
  14. package/dist/css/adminlte.rtl.min.css +1 -1
  15. package/dist/css/adminlte.rtl.min.css.map +1 -1
  16. package/dist/{pages/docs → docs}/browser-support.html +77 -44
  17. package/dist/{pages/docs → docs}/color-mode.html +82 -50
  18. package/dist/{pages/docs → docs}/components/main-header.html +82 -49
  19. package/dist/{pages/docs → docs}/components/main-sidebar.html +78 -46
  20. package/dist/{pages/docs → docs}/faq.html +76 -42
  21. package/dist/{pages/docs → docs}/how-to-contribute.html +77 -44
  22. package/dist/{pages/docs → docs}/introduction.html +82 -54
  23. package/dist/{pages/docs → docs}/javascript/treeview.html +77 -44
  24. package/dist/{pages/docs → docs}/layout.html +76 -25
  25. package/dist/{pages/docs → docs}/license.html +76 -42
  26. package/dist/{pages/examples → examples}/lockscreen.html +49 -18
  27. package/dist/{pages/examples → examples}/login-v2.html +47 -16
  28. package/dist/{pages/examples → examples}/login.html +47 -16
  29. package/dist/{pages/examples → examples}/register-v2.html +47 -16
  30. package/dist/{pages/examples → examples}/register.html +47 -16
  31. package/dist/{pages/forms → forms}/general.html +76 -25
  32. package/dist/{pages/generate → generate}/theme.html +193 -24
  33. package/dist/{pages/index.html → index.html} +90 -57
  34. package/dist/{pages/index2.html → index2.html} +99 -48
  35. package/dist/{pages/index3.html → index3.html} +80 -29
  36. package/dist/js/adminlte.js +795 -345
  37. package/dist/js/adminlte.js.map +1 -1
  38. package/dist/js/adminlte.min.js +3 -3
  39. package/dist/js/adminlte.min.js.map +1 -1
  40. package/dist/{pages/layout → layout}/collapsed-sidebar.html +75 -24
  41. package/dist/layout/fixed-complete.html +883 -0
  42. package/dist/layout/fixed-footer.html +880 -0
  43. package/dist/layout/fixed-header.html +880 -0
  44. package/dist/{pages/layout → layout}/fixed-sidebar.html +76 -25
  45. package/dist/{pages/layout → layout}/layout-custom-area.html +76 -25
  46. package/dist/{pages/layout → layout}/layout-rtl.html +76 -25
  47. package/dist/{pages/layout → layout}/logo-switch.html +55 -24
  48. package/dist/{pages/layout → layout}/sidebar-mini.html +75 -24
  49. package/dist/{pages/layout → layout}/unfixed-sidebar.html +76 -25
  50. package/dist/{pages/tables → tables}/simple.html +76 -25
  51. package/dist/{pages/widgets → widgets}/cards.html +76 -25
  52. package/dist/{pages/widgets → widgets}/info-box.html +76 -25
  53. package/dist/{pages/widgets → widgets}/small-box.html +76 -25
  54. package/eslint.config.js +82 -0
  55. package/package.json +42 -37
  56. package/src/scss/_accessibility.scss +292 -0
  57. package/src/scss/_app-footer.scss +8 -0
  58. package/src/scss/_app-header.scss +8 -0
  59. package/src/scss/_app-sidebar.scss +12 -0
  60. package/src/scss/_table.scss +1 -9
  61. package/src/scss/_variables.scss +2 -1
  62. package/src/scss/adminlte.scss +3 -0
  63. package/src/ts/accessibility.ts +533 -0
  64. package/src/ts/adminlte.ts +48 -9
  65. package/src/ts/card-widget.ts +1 -2
  66. package/src/ts/push-menu.ts +1 -2
  67. package/src/ts/treeview.ts +13 -2
  68. package/src/ts/util/index.ts +39 -7
  69. package/.astro/content-assets.mjs +0 -1
  70. package/.astro/content-modules.mjs +0 -1
  71. package/.astro/content.d.ts +0 -166
  72. package/.astro/data-store.json +0 -1
  73. package/.astro/settings.json +0 -5
  74. package/.astro/types.d.ts +0 -2
  75. package/adminlte-v4.0.0-beta1-with-dist.zip +0 -0
  76. package/adminlte-v4.0.0-beta3.zip +0 -0
package/dist/{pages/docs → docs}/browser-support.html RENAMED
@@ -4,67 +4,60 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>Browser Support | AdminLTE 4</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="Browser Support | AdminLTE 4" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
29
41
  <link
30
42
  rel="stylesheet"
31
- href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
32
- integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
43
+ href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
33
44
  crossorigin="anonymous"
34
45
  />
35
46
  <!--end::Third Party Plugin(OverlayScrollbars)-->
36
47
  <!--begin::Third Party Plugin(Bootstrap Icons)-->
37
48
  <link
38
49
  rel="stylesheet"
39
- href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
40
- integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
50
+ href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
41
51
  crossorigin="anonymous"
42
52
  />
43
53
  <!--end::Third Party Plugin(Bootstrap Icons)-->
44
54
  <!--begin::Required Plugin(AdminLTE)-->
45
- <link rel="stylesheet" href="../../../dist/css/adminlte.css" />
55
+ <link rel="stylesheet" href="../css/adminlte.css" />
46
56
  <!--end::Required Plugin(AdminLTE)-->
47
- <style>
48
- [data-astro-image] {
49
- width: 100%;
50
- height: auto;
51
- object-fit: var(--fit);
52
- object-position: var(--pos);
53
- aspect-ratio: var(--w) / var(--h);
54
- }
55
- [data-astro-image='responsive'] {
56
- max-width: calc(var(--w) * 1px);
57
- max-height: calc(var(--h) * 1px);
58
- }
59
- [data-astro-image='fixed'] {
60
- width: calc(var(--w) * 1px);
61
- height: calc(var(--h) * 1px);
62
- }
63
- </style>
64
57
  </head>
65
58
  <!--end::Head-->
66
59
  <!--begin::Body-->
67
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
60
+ <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
68
61
  <!--begin::App Wrapper-->
69
62
  <div class="app-wrapper">
70
63
  <!--begin::Header-->
@@ -103,7 +96,7 @@
103
96
  <div class="d-flex">
104
97
  <div class="flex-shrink-0">
105
98
  <img
106
- src="../../../dist/assets/img/user1-128x128.jpg"
99
+ src="/assets/img/user1-128x128.jpg"
107
100
  alt="User Avatar"
108
101
  class="img-size-50 rounded-circle me-3"
109
102
  />
@@ -129,7 +122,7 @@
129
122
  <div class="d-flex">
130
123
  <div class="flex-shrink-0">
131
124
  <img
132
- src="../../../dist/assets/img/user8-128x128.jpg"
125
+ src="/assets/img/user8-128x128.jpg"
133
126
  alt="User Avatar"
134
127
  class="img-size-50 rounded-circle me-3"
135
128
  />
@@ -155,7 +148,7 @@
155
148
  <div class="d-flex">
156
149
  <div class="flex-shrink-0">
157
150
  <img
158
- src="../../../dist/assets/img/user3-128x128.jpg"
151
+ src="/assets/img/user3-128x128.jpg"
159
152
  alt="User Avatar"
160
153
  class="img-size-50 rounded-circle me-3"
161
154
  />
@@ -220,7 +213,7 @@
220
213
  <li class="nav-item dropdown user-menu">
221
214
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
222
215
  <img
223
- src="../../../dist/assets/img/user2-160x160.jpg"
216
+ src="/assets/img/user2-160x160.jpg"
224
217
  class="user-image rounded-circle shadow"
225
218
  alt="User Image"
226
219
  />
@@ -230,7 +223,7 @@
230
223
  <!--begin::User Image-->
231
224
  <li class="user-header text-bg-primary">
232
225
  <img
233
- src="../../../dist/assets/img/user2-160x160.jpg"
226
+ src="/assets/img/user2-160x160.jpg"
234
227
  class="rounded-circle shadow"
235
228
  alt="User Image"
236
229
  />
@@ -274,7 +267,7 @@
274
267
  <a href="../index.html" class="brand-link">
275
268
  <!--begin::Brand Image-->
276
269
  <img
277
- src="../../../dist/assets/img/AdminLTELogo.png"
270
+ src="/assets/img/AdminLTELogo.png"
278
271
  alt="AdminLTE Logo"
279
272
  class="brand-image opacity-75 shadow"
280
273
  />
@@ -293,8 +286,10 @@
293
286
  <ul
294
287
  class="nav sidebar-menu flex-column"
295
288
  data-lte-toggle="treeview"
296
- role="menu"
289
+ role="navigation"
290
+ aria-label="Main navigation"
297
291
  data-accordion="false"
292
+ id="navigation"
298
293
  >
299
294
  <li class="nav-item">
300
295
  <a href="#" class="nav-link">
@@ -382,6 +377,24 @@
382
377
  <p>Fixed Sidebar</p>
383
378
  </a>
384
379
  </li>
380
+ <li class="nav-item">
381
+ <a href="../layout/fixed-header.html" class="nav-link">
382
+ <i class="nav-icon bi bi-circle"></i>
383
+ <p>Fixed Header</p>
384
+ </a>
385
+ </li>
386
+ <li class="nav-item">
387
+ <a href="../layout/fixed-footer.html" class="nav-link">
388
+ <i class="nav-icon bi bi-circle"></i>
389
+ <p>Fixed Footer</p>
390
+ </a>
391
+ </li>
392
+ <li class="nav-item">
393
+ <a href="../layout/fixed-complete.html" class="nav-link">
394
+ <i class="nav-icon bi bi-circle"></i>
395
+ <p>Fixed Complete</p>
396
+ </a>
397
+ </li>
385
398
  <li class="nav-item">
386
399
  <a href="../layout/layout-custom-area.html" class="nav-link">
387
400
  <i class="nav-icon bi bi-circle"></i>
@@ -778,8 +791,7 @@
778
791
  <span class="line"><span>Firefox ESR</span></span>
779
792
  <span class="line"><span>iOS &gt;= 12</span></span>
780
793
  <span class="line"><span>Safari &gt;= 12</span></span>
781
- <span class="line"><span>not Explorer &lt;= 11</span></span>
782
- <span class="line"><span></span></span></code></pre>
794
+ <span class="line"><span>not Explorer &lt;= 11</span></span></code></pre>
783
795
  </div>
784
796
  <!--end::Container-->
785
797
  </div>
@@ -793,7 +805,7 @@
793
805
  <!--end::To the end-->
794
806
  <!--begin::Copyright-->
795
807
  <strong>
796
- Copyright &copy; 2014-2024&nbsp;
808
+ Copyright &copy; 2014-2025&nbsp;
797
809
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
798
810
  </strong>
799
811
  All rights reserved.
@@ -805,24 +817,21 @@
805
817
  <!--begin::Script-->
806
818
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
807
819
  <script
808
- src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
809
- integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
820
+ src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
810
821
  crossorigin="anonymous"
811
822
  ></script>
812
823
  <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
813
824
  <script
814
825
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
815
- integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
816
826
  crossorigin="anonymous"
817
827
  ></script>
818
828
  <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
819
829
  <script
820
- src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
821
- integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
830
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
822
831
  crossorigin="anonymous"
823
832
  ></script>
824
833
  <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
825
- <script src="../../../dist/js/adminlte.js"></script>
834
+ <script src="../js/adminlte.js"></script>
826
835
  <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
827
836
  <script>
828
837
  const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
@@ -833,7 +842,7 @@
833
842
  };
834
843
  document.addEventListener('DOMContentLoaded', function () {
835
844
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
836
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
845
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
837
846
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
838
847
  scrollbars: {
839
848
  theme: Default.scrollbarTheme,
@@ -844,7 +853,31 @@
844
853
  }
845
854
  });
846
855
  </script>
847
- <!--end::OverlayScrollbars Configure-->
856
+ <!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
857
+ <script>
858
+ document.addEventListener('DOMContentLoaded', () => {
859
+ // Find the link tag for the main AdminLTE CSS file.
860
+ const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
861
+ if (!cssLink) {
862
+ return; // Exit if the link isn't found
863
+ }
864
+
865
+ // Extract the base path from the CSS href.
866
+ // e.g., from "../css/adminlte.css", we get "../"
867
+ // e.g., from "./css/adminlte.css", we get "./"
868
+ const cssHref = cssLink.getAttribute('href');
869
+ const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
870
+
871
+ // Find all images with absolute paths and fix them.
872
+ document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
873
+ const originalSrc = img.getAttribute('src');
874
+ if (originalSrc) {
875
+ const relativeSrc = originalSrc.slice(1); // Remove leading '/'
876
+ img.src = deploymentPath + relativeSrc;
877
+ }
878
+ });
879
+ });
880
+ </script>
848
881
  <!--end::Script-->
849
882
  </body>
850
883
  <!--end::Body-->
package/dist/{pages/docs → docs}/color-mode.html RENAMED
@@ -4,67 +4,60 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>Color Mode | AdminLTE 4</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="Color Mode | AdminLTE 4" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
29
41
  <link
30
42
  rel="stylesheet"
31
- href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
32
- integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
43
+ href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
33
44
  crossorigin="anonymous"
34
45
  />
35
46
  <!--end::Third Party Plugin(OverlayScrollbars)-->
36
47
  <!--begin::Third Party Plugin(Bootstrap Icons)-->
37
48
  <link
38
49
  rel="stylesheet"
39
- href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
40
- integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
50
+ href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
41
51
  crossorigin="anonymous"
42
52
  />
43
53
  <!--end::Third Party Plugin(Bootstrap Icons)-->
44
54
  <!--begin::Required Plugin(AdminLTE)-->
45
- <link rel="stylesheet" href="../../../dist/css/adminlte.css" />
55
+ <link rel="stylesheet" href="../css/adminlte.css" />
46
56
  <!--end::Required Plugin(AdminLTE)-->
47
- <style>
48
- [data-astro-image] {
49
- width: 100%;
50
- height: auto;
51
- object-fit: var(--fit);
52
- object-position: var(--pos);
53
- aspect-ratio: var(--w) / var(--h);
54
- }
55
- [data-astro-image='responsive'] {
56
- max-width: calc(var(--w) * 1px);
57
- max-height: calc(var(--h) * 1px);
58
- }
59
- [data-astro-image='fixed'] {
60
- width: calc(var(--w) * 1px);
61
- height: calc(var(--h) * 1px);
62
- }
63
- </style>
64
57
  </head>
65
58
  <!--end::Head-->
66
59
  <!--begin::Body-->
67
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
60
+ <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
68
61
  <!--begin::App Wrapper-->
69
62
  <div class="app-wrapper">
70
63
  <!--begin::Header-->
@@ -103,7 +96,7 @@
103
96
  <div class="d-flex">
104
97
  <div class="flex-shrink-0">
105
98
  <img
106
- src="../../../dist/assets/img/user1-128x128.jpg"
99
+ src="/assets/img/user1-128x128.jpg"
107
100
  alt="User Avatar"
108
101
  class="img-size-50 rounded-circle me-3"
109
102
  />
@@ -129,7 +122,7 @@
129
122
  <div class="d-flex">
130
123
  <div class="flex-shrink-0">
131
124
  <img
132
- src="../../../dist/assets/img/user8-128x128.jpg"
125
+ src="/assets/img/user8-128x128.jpg"
133
126
  alt="User Avatar"
134
127
  class="img-size-50 rounded-circle me-3"
135
128
  />
@@ -155,7 +148,7 @@
155
148
  <div class="d-flex">
156
149
  <div class="flex-shrink-0">
157
150
  <img
158
- src="../../../dist/assets/img/user3-128x128.jpg"
151
+ src="/assets/img/user3-128x128.jpg"
159
152
  alt="User Avatar"
160
153
  class="img-size-50 rounded-circle me-3"
161
154
  />
@@ -220,7 +213,7 @@
220
213
  <li class="nav-item dropdown user-menu">
221
214
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
222
215
  <img
223
- src="../../../dist/assets/img/user2-160x160.jpg"
216
+ src="/assets/img/user2-160x160.jpg"
224
217
  class="user-image rounded-circle shadow"
225
218
  alt="User Image"
226
219
  />
@@ -230,7 +223,7 @@
230
223
  <!--begin::User Image-->
231
224
  <li class="user-header text-bg-primary">
232
225
  <img
233
- src="../../../dist/assets/img/user2-160x160.jpg"
226
+ src="/assets/img/user2-160x160.jpg"
234
227
  class="rounded-circle shadow"
235
228
  alt="User Image"
236
229
  />
@@ -274,7 +267,7 @@
274
267
  <a href="../index.html" class="brand-link">
275
268
  <!--begin::Brand Image-->
276
269
  <img
277
- src="../../../dist/assets/img/AdminLTELogo.png"
270
+ src="/assets/img/AdminLTELogo.png"
278
271
  alt="AdminLTE Logo"
279
272
  class="brand-image opacity-75 shadow"
280
273
  />
@@ -293,8 +286,10 @@
293
286
  <ul
294
287
  class="nav sidebar-menu flex-column"
295
288
  data-lte-toggle="treeview"
296
- role="menu"
289
+ role="navigation"
290
+ aria-label="Main navigation"
297
291
  data-accordion="false"
292
+ id="navigation"
298
293
  >
299
294
  <li class="nav-item">
300
295
  <a href="#" class="nav-link">
@@ -382,6 +377,24 @@
382
377
  <p>Fixed Sidebar</p>
383
378
  </a>
384
379
  </li>
380
+ <li class="nav-item">
381
+ <a href="../layout/fixed-header.html" class="nav-link">
382
+ <i class="nav-icon bi bi-circle"></i>
383
+ <p>Fixed Header</p>
384
+ </a>
385
+ </li>
386
+ <li class="nav-item">
387
+ <a href="../layout/fixed-footer.html" class="nav-link">
388
+ <i class="nav-icon bi bi-circle"></i>
389
+ <p>Fixed Footer</p>
390
+ </a>
391
+ </li>
392
+ <li class="nav-item">
393
+ <a href="../layout/fixed-complete.html" class="nav-link">
394
+ <i class="nav-icon bi bi-circle"></i>
395
+ <p>Fixed Complete</p>
396
+ </a>
397
+ </li>
385
398
  <li class="nav-item">
386
399
  <a href="../layout/layout-custom-area.html" class="nav-link">
387
400
  <i class="nav-icon bi bi-circle"></i>
@@ -934,8 +947,7 @@
934
947
  <span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
935
948
  <span class="line"><span style="color:#6A9955"> &lt;!--end::Container--&gt;</span></span>
936
949
  <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">nav</span><span style="color:#808080">&gt;</span></span>
937
- <span class="line"><span style="color:#6A9955">&lt;!--end::Header--&gt;</span></span>
938
- <span class="line"></span></code></pre>
950
+ <span class="line"><span style="color:#6A9955">&lt;!--end::Header--&gt;</span></span></code></pre>
939
951
  <pre
940
952
  class="astro-code dark-plus"
941
953
  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
@@ -1020,8 +1032,7 @@
1020
1032
  <span class="line"><span style="color:#D4D4D4"> });</span></span>
1021
1033
  <span class="line"><span style="color:#D4D4D4"> }</span></span>
1022
1034
  <span class="line"><span style="color:#D4D4D4"> });</span></span>
1023
- <span class="line"><span style="color:#D4D4D4">})();</span></span>
1024
- <span class="line"></span></code></pre>
1035
+ <span class="line"><span style="color:#D4D4D4">})();</span></span></code></pre>
1025
1036
  </div>
1026
1037
  </div>
1027
1038
  <!--end::Row-->
@@ -1038,7 +1049,7 @@
1038
1049
  <!--end::To the end-->
1039
1050
  <!--begin::Copyright-->
1040
1051
  <strong>
1041
- Copyright &copy; 2014-2024&nbsp;
1052
+ Copyright &copy; 2014-2025&nbsp;
1042
1053
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1043
1054
  </strong>
1044
1055
  All rights reserved.
@@ -1049,24 +1060,21 @@
1049
1060
  <!--end::App Wrapper-->
1050
1061
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
1051
1062
  <script
1052
- src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
1053
- integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
1063
+ src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
1054
1064
  crossorigin="anonymous"
1055
1065
  ></script>
1056
1066
  <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
1057
1067
  <script
1058
1068
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
1059
- integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
1060
1069
  crossorigin="anonymous"
1061
1070
  ></script>
1062
1071
  <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
1063
1072
  <script
1064
- src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
1065
- integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
1073
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
1066
1074
  crossorigin="anonymous"
1067
1075
  ></script>
1068
1076
  <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
1069
- <script src="../../../dist/js/adminlte.js"></script>
1077
+ <script src="../js/adminlte.js"></script>
1070
1078
  <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
1071
1079
  <script>
1072
1080
  const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
@@ -1077,7 +1085,7 @@
1077
1085
  };
1078
1086
  document.addEventListener('DOMContentLoaded', function () {
1079
1087
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1080
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1088
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1081
1089
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1082
1090
  scrollbars: {
1083
1091
  theme: Default.scrollbarTheme,
@@ -1088,7 +1096,31 @@
1088
1096
  }
1089
1097
  });
1090
1098
  </script>
1091
- <!--end::OverlayScrollbars Configure-->
1099
+ <!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
1100
+ <script>
1101
+ document.addEventListener('DOMContentLoaded', () => {
1102
+ // Find the link tag for the main AdminLTE CSS file.
1103
+ const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
1104
+ if (!cssLink) {
1105
+ return; // Exit if the link isn't found
1106
+ }
1107
+
1108
+ // Extract the base path from the CSS href.
1109
+ // e.g., from "../css/adminlte.css", we get "../"
1110
+ // e.g., from "./css/adminlte.css", we get "./"
1111
+ const cssHref = cssLink.getAttribute('href');
1112
+ const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
1113
+
1114
+ // Find all images with absolute paths and fix them.
1115
+ document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
1116
+ const originalSrc = img.getAttribute('src');
1117
+ if (originalSrc) {
1118
+ const relativeSrc = originalSrc.slice(1); // Remove leading '/'
1119
+ img.src = deploymentPath + relativeSrc;
1120
+ }
1121
+ });
1122
+ });
1123
+ </script>
1092
1124
  <script>
1093
1125
  // Color Mode Toggler
1094
1126
  (() => {
@@ -1101,11 +1133,11 @@
1101
1133
  return storedTheme;
1102
1134
  }
1103
1135
 
1104
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
1136
+ return globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
1105
1137
  };
1106
1138
 
1107
1139
  const setTheme = function (theme) {
1108
- if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
1140
+ if (theme === 'auto' && globalThis.matchMedia('(prefers-color-scheme: dark)').matches) {
1109
1141
  document.documentElement.setAttribute('data-bs-theme', 'dark');
1110
1142
  } else {
1111
1143
  document.documentElement.setAttribute('data-bs-theme', theme);
@@ -1142,13 +1174,13 @@
1142
1174
  }
1143
1175
  };
1144
1176
 
1145
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
1177
+ globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
1146
1178
  if (storedTheme !== 'light' || storedTheme !== 'dark') {
1147
1179
  setTheme(getPreferredTheme());
1148
1180
  }
1149
1181
  });
1150
1182
 
1151
- window.addEventListener('DOMContentLoaded', () => {
1183
+ globalThis.addEventListener('DOMContentLoaded', () => {
1152
1184
  showActiveTheme(getPreferredTheme());
1153
1185
 
1154
1186
  for (const toggle of document.querySelectorAll('[data-bs-theme-value]')) {