admin-lte 4.0.0-rc7 → 4.0.1

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 (104) hide show
  1. package/CHANGELOG.md +69 -0
  2. package/README.md +202 -102
  3. package/dist/UI/general.html +330 -129
  4. package/dist/UI/icons.html +330 -129
  5. package/dist/UI/timeline.html +330 -129
  6. package/dist/css/adminlte.css +2798 -1167
  7. package/dist/css/adminlte.css.map +1 -1
  8. package/dist/css/adminlte.min.css +2 -2
  9. package/dist/css/adminlte.min.css.map +1 -1
  10. package/dist/css/adminlte.rtl.css +2798 -1167
  11. package/dist/css/adminlte.rtl.css.map +1 -1
  12. package/dist/css/adminlte.rtl.min.css +2 -2
  13. package/dist/css/adminlte.rtl.min.css.map +1 -1
  14. package/dist/docs/browser-support.html +287 -399
  15. package/dist/docs/color-mode.html +268 -384
  16. package/dist/docs/components/main-header.html +264 -376
  17. package/dist/docs/components/main-sidebar.html +279 -391
  18. package/dist/docs/customization.html +1080 -0
  19. package/dist/docs/deployment.html +1145 -0
  20. package/dist/docs/faq.html +883 -411
  21. package/dist/docs/getting-started.html +991 -0
  22. package/dist/docs/how-to-contribute.html +361 -464
  23. package/dist/docs/index.html +16 -0
  24. package/dist/docs/integrations.html +1231 -0
  25. package/dist/docs/introduction.html +479 -448
  26. package/dist/docs/javascript/accessibility.html +387 -493
  27. package/dist/docs/javascript/card-widget.html +472 -452
  28. package/dist/docs/javascript/direct-chat.html +350 -423
  29. package/dist/docs/javascript/fullscreen.html +374 -418
  30. package/dist/docs/javascript/layout.html +371 -438
  31. package/dist/docs/javascript/plugins-overview.html +1144 -0
  32. package/dist/docs/javascript/pushmenu.html +511 -494
  33. package/dist/docs/javascript/treeview.html +492 -402
  34. package/dist/docs/layout-blueprint.html +1087 -0
  35. package/dist/docs/layout.html +313 -417
  36. package/dist/docs/license.html +278 -389
  37. package/dist/docs/migration.html +1149 -0
  38. package/dist/docs/recipes.html +1185 -0
  39. package/dist/docs/rtl.html +957 -0
  40. package/dist/examples/lockscreen.html +91 -1
  41. package/dist/examples/login-v2.html +91 -1
  42. package/dist/examples/login.html +91 -1
  43. package/dist/examples/register-v2.html +91 -1
  44. package/dist/examples/register.html +91 -1
  45. package/dist/forms/elements.html +1405 -0
  46. package/dist/forms/{general.html → layout.html} +401 -489
  47. package/dist/forms/validation.html +1275 -0
  48. package/dist/forms/wizard.html +1410 -0
  49. package/dist/generate/theme.html +160 -4
  50. package/dist/index.html +330 -129
  51. package/dist/index2.html +333 -129
  52. package/dist/index3.html +330 -129
  53. package/dist/js/adminlte.js +8 -5
  54. package/dist/js/adminlte.js.map +1 -1
  55. package/dist/js/adminlte.min.js +2 -2
  56. package/dist/js/adminlte.min.js.map +1 -1
  57. package/dist/layout/collapsed-sidebar-without-hover.html +330 -129
  58. package/dist/layout/collapsed-sidebar.html +330 -129
  59. package/dist/layout/fixed-complete.html +330 -129
  60. package/dist/layout/fixed-footer.html +330 -129
  61. package/dist/layout/fixed-header.html +330 -129
  62. package/dist/layout/fixed-sidebar.html +330 -129
  63. package/dist/layout/layout-custom-area.html +330 -129
  64. package/dist/layout/layout-rtl.html +330 -129
  65. package/dist/layout/logo-switch.html +160 -4
  66. package/dist/layout/sidebar-mini.html +330 -129
  67. package/dist/layout/unfixed-sidebar.html +330 -129
  68. package/dist/mailbox/compose.html +1151 -0
  69. package/dist/mailbox/inbox.html +1509 -0
  70. package/dist/mailbox/read.html +1202 -0
  71. package/dist/pages/404.html +239 -0
  72. package/dist/pages/500.html +227 -0
  73. package/dist/pages/calendar.html +1266 -0
  74. package/dist/pages/chat.html +1427 -0
  75. package/dist/pages/faq.html +1383 -0
  76. package/dist/pages/file-manager.html +1835 -0
  77. package/dist/pages/invoice.html +1199 -0
  78. package/dist/pages/kanban.html +1439 -0
  79. package/dist/pages/maintenance.html +230 -0
  80. package/dist/pages/pricing.html +1279 -0
  81. package/dist/pages/profile.html +1382 -0
  82. package/dist/pages/projects.html +1644 -0
  83. package/dist/pages/settings.html +1387 -0
  84. package/dist/tables/data.html +1319 -0
  85. package/dist/tables/simple.html +330 -129
  86. package/dist/widgets/cards.html +330 -129
  87. package/dist/widgets/info-box.html +330 -129
  88. package/dist/widgets/small-box.html +330 -129
  89. package/github-issue-response.md +40 -0
  90. package/netlify.toml +16 -0
  91. package/package.json +31 -24
  92. package/src/scss/_app-header.scss +27 -0
  93. package/src/scss/_app-sidebar.scss +24 -30
  94. package/src/scss/_bootstrap-variables.scss +11 -4
  95. package/src/scss/_docs.scss +816 -0
  96. package/src/scss/_table.scss +4 -4
  97. package/src/scss/adminlte.scss +4 -1
  98. package/src/ts/accessibility.ts +9 -1
  99. package/src/ts/adminlte.ts +1 -1
  100. package/src/ts/fullscreen.ts +8 -4
  101. package/src/ts/push-menu.ts +66 -5
  102. package/.claude/settings.local.json +0 -37
  103. package/CLAUDE.md +0 -79
  104. package/release.md +0 -75
package/dist/docs/browser-support.html CHANGED
@@ -5,6 +5,32 @@
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>Browser Support | AdminLTE 4</title>
7
7
 
8
+ <!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
9
+ <script>
10
+ (() => {
11
+ 'use strict';
12
+ const STORAGE_KEY = 'lte-theme';
13
+ let stored = null;
14
+ try {
15
+ stored = localStorage.getItem(STORAGE_KEY);
16
+ } catch {
17
+ // localStorage may be unavailable (private mode, sandboxed iframe).
18
+ }
19
+ const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
20
+ // Mirror the resolution in _scripts.astro: explicit "dark"/"light" win,
21
+ // otherwise ("auto" or unset) fall back to the OS preference.
22
+ let resolved = 'light';
23
+ if (stored === 'dark' || stored === 'light') {
24
+ resolved = stored;
25
+ } else if (prefersDark) {
26
+ resolved = 'dark';
27
+ }
28
+ document.documentElement.setAttribute('data-bs-theme', resolved);
29
+ document.documentElement.style.colorScheme = resolved;
30
+ })();
31
+ </script>
32
+ <!--end::Theme Init-->
33
+
8
34
  <!--begin::Accessibility Meta Tags-->
9
35
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
10
36
  <meta name="color-scheme" content="light dark" />
@@ -64,7 +90,7 @@
64
90
  </head>
65
91
  <!--end::Head-->
66
92
  <!--begin::Body-->
67
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
93
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
68
94
  <!--begin::App Wrapper-->
69
95
  <div class="app-wrapper">
70
96
  <!--begin::Header-->
@@ -78,11 +104,18 @@
78
104
  <i class="bi bi-list"></i>
79
105
  </a>
80
106
  </li>
107
+
81
108
  <li class="nav-item d-none d-md-block">
82
- <a href="#" class="nav-link">Home</a>
109
+ <a href="../docs/introduction.html" class="nav-link">
110
+ <i class="bi bi-book me-1" aria-hidden="true"></i>
111
+ Documentation
112
+ </a>
83
113
  </li>
84
114
  <li class="nav-item d-none d-md-block">
85
- <a href="#" class="nav-link">Contact</a>
115
+ <a href="../index.html" class="nav-link">
116
+ <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
117
+ Back to live preview
118
+ </a>
86
119
  </li>
87
120
  </ul>
88
121
  <!--end::Start Navbar Links-->
@@ -220,11 +253,70 @@
220
253
  <li class="nav-item">
221
254
  <a class="nav-link" href="#" data-lte-toggle="fullscreen">
222
255
  <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
223
- <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
256
+ <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
224
257
  </a>
225
258
  </li>
226
259
  <!--end::Fullscreen Toggle-->
227
260
 
261
+ <!--begin::Color Mode Toggle (#6010)-->
262
+ <li class="nav-item dropdown">
263
+ <a
264
+ class="nav-link"
265
+ href="#"
266
+ id="bd-theme"
267
+ aria-label="Toggle color scheme"
268
+ data-bs-toggle="dropdown"
269
+ aria-expanded="false"
270
+ >
271
+ <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
272
+ <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
273
+ <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
274
+ </a>
275
+ <ul
276
+ class="dropdown-menu dropdown-menu-end"
277
+ aria-labelledby="bd-theme"
278
+ style="--bs-dropdown-min-width: 8rem"
279
+ >
280
+ <li>
281
+ <button
282
+ type="button"
283
+ class="dropdown-item d-flex align-items-center"
284
+ data-bs-theme-value="light"
285
+ aria-pressed="false"
286
+ >
287
+ <i class="bi bi-sun-fill me-2"></i>
288
+ Light
289
+ <i class="bi bi-check-lg ms-auto d-none"></i>
290
+ </button>
291
+ </li>
292
+ <li>
293
+ <button
294
+ type="button"
295
+ class="dropdown-item d-flex align-items-center"
296
+ data-bs-theme-value="dark"
297
+ aria-pressed="false"
298
+ >
299
+ <i class="bi bi-moon-fill me-2"></i>
300
+ Dark
301
+ <i class="bi bi-check-lg ms-auto d-none"></i>
302
+ </button>
303
+ </li>
304
+ <li>
305
+ <button
306
+ type="button"
307
+ class="dropdown-item d-flex align-items-center active"
308
+ data-bs-theme-value="auto"
309
+ aria-pressed="true"
310
+ >
311
+ <i class="bi bi-circle-half me-2"></i>
312
+ Auto
313
+ <i class="bi bi-check-lg ms-auto d-none"></i>
314
+ </button>
315
+ </li>
316
+ </ul>
317
+ </li>
318
+ <!--end::Color Mode Toggle-->
319
+
228
320
  <!--begin::User Menu Dropdown-->
229
321
  <li class="nav-item dropdown user-menu">
230
322
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -281,326 +373,83 @@
281
373
  <!--end::Container-->
282
374
  </nav>
283
375
  <!--end::Header-->
284
- <!--begin::Sidebar-->
376
+ <!--begin::Sidebar (docs mode)-->
285
377
  <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
286
378
  <!--begin::Sidebar Brand-->
287
379
  <div class="sidebar-brand">
288
- <!--begin::Brand Link-->
289
- <a href="../index.html" class="brand-link">
290
- <!--begin::Brand Image-->
380
+ <a href="../docs/introduction.html" class="brand-link">
291
381
  <img
292
382
  src="../assets/img/AdminLTELogo.png"
293
383
  alt="AdminLTE Logo"
294
384
  class="brand-image opacity-75 shadow"
295
385
  />
296
- <!--end::Brand Image-->
297
- <!--begin::Brand Text-->
298
- <span class="brand-text fw-light">AdminLTE 4</span>
299
- <!--end::Brand Text-->
386
+ <span class="brand-text fw-light">
387
+ AdminLTE 4 <span class="opacity-75">&middot; Docs</span>
388
+ </span>
300
389
  </a>
301
- <!--end::Brand Link-->
302
390
  </div>
303
391
  <!--end::Sidebar Brand-->
304
392
  <!--begin::Sidebar Wrapper-->
305
393
  <div class="sidebar-wrapper">
306
- <nav class="mt-2">
394
+ <nav class="mt-2" aria-label="Documentation navigation">
307
395
  <!--begin::Sidebar Menu-->
308
396
  <ul
309
397
  class="nav sidebar-menu flex-column"
310
398
  data-lte-toggle="treeview"
311
- role="navigation"
312
- aria-label="Main navigation"
313
399
  data-accordion="false"
314
- id="navigation"
400
+ id="docs-navigation"
315
401
  >
402
+ <li class="nav-header">START HERE</li>
316
403
  <li class="nav-item">
317
- <a href="#" class="nav-link">
318
- <i class="nav-icon bi bi-speedometer"></i>
319
- <p>
320
- Dashboard
321
- <i class="nav-arrow bi bi-chevron-right"></i>
322
- </p>
404
+ <a href="../docs/introduction.html" class="nav-link">
405
+ <i class="nav-icon bi bi-download"></i>
406
+ <p>Installation</p>
323
407
  </a>
324
- <ul class="nav nav-treeview">
325
- <li class="nav-item">
326
- <a href="../index.html" class="nav-link">
327
- <i class="nav-icon bi bi-circle"></i>
328
- <p>Dashboard v1</p>
329
- </a>
330
- </li>
331
- <li class="nav-item">
332
- <a href="../index2.html" class="nav-link">
333
- <i class="nav-icon bi bi-circle"></i>
334
- <p>Dashboard v2</p>
335
- </a>
336
- </li>
337
- <li class="nav-item">
338
- <a href="../index3.html" class="nav-link">
339
- <i class="nav-icon bi bi-circle"></i>
340
- <p>Dashboard v3</p>
341
- </a>
342
- </li>
343
- </ul>
344
408
  </li>
345
409
  <li class="nav-item">
346
- <a href="../generate/theme.html" class="nav-link">
347
- <i class="nav-icon bi bi-palette"></i>
348
- <p>Theme Generate</p>
410
+ <a href="../docs/getting-started.html" class="nav-link">
411
+ <i class="nav-icon bi bi-rocket-takeoff"></i>
412
+ <p>Getting Started</p>
349
413
  </a>
350
414
  </li>
415
+
416
+ <li class="nav-header">FOUNDATIONS</li>
351
417
  <li class="nav-item">
352
- <a href="#" class="nav-link">
353
- <i class="nav-icon bi bi-box-seam-fill"></i>
354
- <p>
355
- Widgets
356
- <i class="nav-arrow bi bi-chevron-right"></i>
357
- </p>
418
+ <a href="../docs/layout.html" class="nav-link">
419
+ <i class="nav-icon bi bi-grip-horizontal"></i>
420
+ <p>Layout Classes</p>
358
421
  </a>
359
- <ul class="nav nav-treeview">
360
- <li class="nav-item">
361
- <a href="../widgets/small-box.html" class="nav-link">
362
- <i class="nav-icon bi bi-circle"></i>
363
- <p>Small Box</p>
364
- </a>
365
- </li>
366
- <li class="nav-item">
367
- <a href="../widgets/info-box.html" class="nav-link">
368
- <i class="nav-icon bi bi-circle"></i>
369
- <p>info Box</p>
370
- </a>
371
- </li>
372
- <li class="nav-item">
373
- <a href="../widgets/cards.html" class="nav-link">
374
- <i class="nav-icon bi bi-circle"></i>
375
- <p>Cards</p>
376
- </a>
377
- </li>
378
- </ul>
379
422
  </li>
380
423
  <li class="nav-item">
381
- <a href="#" class="nav-link">
382
- <i class="nav-icon bi bi-clipboard-fill"></i>
383
- <p>
384
- Layout Options
385
- <span class="nav-badge badge text-bg-secondary me-3">7</span>
386
- <i class="nav-arrow bi bi-chevron-right"></i>
387
- </p>
424
+ <a href="../docs/layout-blueprint.html" class="nav-link">
425
+ <i class="nav-icon bi bi-diagram-3"></i>
426
+ <p>Layout Blueprint</p>
388
427
  </a>
389
- <ul class="nav nav-treeview">
390
- <li class="nav-item">
391
- <a href="../layout/unfixed-sidebar.html" class="nav-link">
392
- <i class="nav-icon bi bi-circle"></i>
393
- <p>Default Sidebar</p>
394
- </a>
395
- </li>
396
- <li class="nav-item">
397
- <a href="../layout/fixed-sidebar.html" class="nav-link">
398
- <i class="nav-icon bi bi-circle"></i>
399
- <p>Fixed Sidebar</p>
400
- </a>
401
- </li>
402
- <li class="nav-item">
403
- <a href="../layout/fixed-header.html" class="nav-link">
404
- <i class="nav-icon bi bi-circle"></i>
405
- <p>Fixed Header</p>
406
- </a>
407
- </li>
408
- <li class="nav-item">
409
- <a href="../layout/fixed-footer.html" class="nav-link">
410
- <i class="nav-icon bi bi-circle"></i>
411
- <p>Fixed Footer</p>
412
- </a>
413
- </li>
414
- <li class="nav-item">
415
- <a href="../layout/fixed-complete.html" class="nav-link">
416
- <i class="nav-icon bi bi-circle"></i>
417
- <p>Fixed Complete</p>
418
- </a>
419
- </li>
420
- <li class="nav-item">
421
- <a href="../layout/layout-custom-area.html" class="nav-link">
422
- <i class="nav-icon bi bi-circle"></i>
423
- <p>Layout <small>+ Custom Area </small></p>
424
- </a>
425
- </li>
426
- <li class="nav-item">
427
- <a href="../layout/sidebar-mini.html" class="nav-link">
428
- <i class="nav-icon bi bi-circle"></i>
429
- <p>Sidebar Mini</p>
430
- </a>
431
- </li>
432
- <li class="nav-item">
433
- <a href="../layout/collapsed-sidebar.html" class="nav-link">
434
- <i class="nav-icon bi bi-circle"></i>
435
- <p>Sidebar Mini <small>+ Collapsed</small></p>
436
- </a>
437
- </li>
438
- <li class="nav-item">
439
- <a href="../layout/collapsed-sidebar-without-hover.html" class="nav-link">
440
- <i class="nav-icon bi bi-circle"></i>
441
- <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
442
- </a>
443
- </li>
444
- <li class="nav-item">
445
- <a href="../layout/logo-switch.html" class="nav-link">
446
- <i class="nav-icon bi bi-circle"></i>
447
- <p>Sidebar Mini <small>+ Logo Switch</small></p>
448
- </a>
449
- </li>
450
- <li class="nav-item">
451
- <a href="../layout/layout-rtl.html" class="nav-link">
452
- <i class="nav-icon bi bi-circle"></i>
453
- <p>Layout RTL</p>
454
- </a>
455
- </li>
456
- </ul>
457
428
  </li>
458
429
  <li class="nav-item">
459
- <a href="#" class="nav-link">
460
- <i class="nav-icon bi bi-tree-fill"></i>
461
- <p>
462
- UI Elements
463
- <i class="nav-arrow bi bi-chevron-right"></i>
464
- </p>
430
+ <a href="../docs/customization.html" class="nav-link">
431
+ <i class="nav-icon bi bi-palette"></i>
432
+ <p>Customization</p>
465
433
  </a>
466
- <ul class="nav nav-treeview">
467
- <li class="nav-item">
468
- <a href="../UI/general.html" class="nav-link">
469
- <i class="nav-icon bi bi-circle"></i>
470
- <p>General</p>
471
- </a>
472
- </li>
473
- <li class="nav-item">
474
- <a href="../UI/icons.html" class="nav-link">
475
- <i class="nav-icon bi bi-circle"></i>
476
- <p>Icons</p>
477
- </a>
478
- </li>
479
- <li class="nav-item">
480
- <a href="../UI/timeline.html" class="nav-link">
481
- <i class="nav-icon bi bi-circle"></i>
482
- <p>Timeline</p>
483
- </a>
484
- </li>
485
- </ul>
486
434
  </li>
487
435
  <li class="nav-item">
488
- <a href="#" class="nav-link">
489
- <i class="nav-icon bi bi-pencil-square"></i>
490
- <p>
491
- Forms
492
- <i class="nav-arrow bi bi-chevron-right"></i>
493
- </p>
494
- </a>
495
- <ul class="nav nav-treeview">
496
- <li class="nav-item">
497
- <a href="../forms/general.html" class="nav-link">
498
- <i class="nav-icon bi bi-circle"></i>
499
- <p>General Elements</p>
500
- </a>
501
- </li>
502
- </ul>
503
- </li>
504
- <li class="nav-item">
505
- <a href="#" class="nav-link">
506
- <i class="nav-icon bi bi-table"></i>
507
- <p>
508
- Tables
509
- <i class="nav-arrow bi bi-chevron-right"></i>
510
- </p>
436
+ <a href="../docs/color-mode.html" class="nav-link">
437
+ <i class="nav-icon bi bi-star-half"></i>
438
+ <p>Color Mode</p>
511
439
  </a>
512
- <ul class="nav nav-treeview">
513
- <li class="nav-item">
514
- <a href="../tables/simple.html" class="nav-link">
515
- <i class="nav-icon bi bi-circle"></i>
516
- <p>Simple Tables</p>
517
- </a>
518
- </li>
519
- </ul>
520
440
  </li>
521
-
522
- <li class="nav-header">EXAMPLES</li>
523
441
  <li class="nav-item">
524
- <a href="#" class="nav-link">
525
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
526
- <p>
527
- Auth
528
- <i class="nav-arrow bi bi-chevron-right"></i>
529
- </p>
442
+ <a href="../docs/rtl.html" class="nav-link">
443
+ <i class="nav-icon bi bi-text-paragraph"></i>
444
+ <p>RTL Support</p>
530
445
  </a>
531
- <ul class="nav nav-treeview">
532
- <li class="nav-item">
533
- <a href="#" class="nav-link">
534
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
535
- <p>
536
- Version 1
537
- <i class="nav-arrow bi bi-chevron-right"></i>
538
- </p>
539
- </a>
540
- <ul class="nav nav-treeview">
541
- <li class="nav-item">
542
- <a href="../examples/login.html" class="nav-link">
543
- <i class="nav-icon bi bi-circle"></i>
544
- <p>Login</p>
545
- </a>
546
- </li>
547
- <li class="nav-item">
548
- <a href="../examples/register.html" class="nav-link">
549
- <i class="nav-icon bi bi-circle"></i>
550
- <p>Register</p>
551
- </a>
552
- </li>
553
- </ul>
554
- </li>
555
- <li class="nav-item">
556
- <a href="#" class="nav-link">
557
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
558
- <p>
559
- Version 2
560
- <i class="nav-arrow bi bi-chevron-right"></i>
561
- </p>
562
- </a>
563
- <ul class="nav nav-treeview">
564
- <li class="nav-item">
565
- <a href="../examples/login-v2.html" class="nav-link">
566
- <i class="nav-icon bi bi-circle"></i>
567
- <p>Login</p>
568
- </a>
569
- </li>
570
- <li class="nav-item">
571
- <a href="../examples/register-v2.html" class="nav-link">
572
- <i class="nav-icon bi bi-circle"></i>
573
- <p>Register</p>
574
- </a>
575
- </li>
576
- </ul>
577
- </li>
578
- <li class="nav-item">
579
- <a href="../examples/lockscreen.html" class="nav-link">
580
- <i class="nav-icon bi bi-circle"></i>
581
- <p>Lockscreen</p>
582
- </a>
583
- </li>
584
- </ul>
585
446
  </li>
586
447
 
587
- <li class="nav-header">DOCUMENTATIONS</li>
448
+ <li class="nav-header">BUILDING</li>
588
449
  <li class="nav-item">
589
- <a href="../docs/introduction.html" class="nav-link">
590
- <i class="nav-icon bi bi-download"></i>
591
- <p>Installation</p>
592
- </a>
593
- </li>
594
- <li class="nav-item">
595
- <a href="../docs/layout.html" class="nav-link">
596
- <i class="nav-icon bi bi-grip-horizontal"></i>
597
- <p>Layout</p>
598
- </a>
599
- </li>
600
- <li class="nav-item">
601
- <a href="../docs/color-mode.html" class="nav-link">
602
- <i class="nav-icon bi bi-star-half"></i>
603
- <p>Color Mode</p>
450
+ <a href="../docs/recipes.html" class="nav-link">
451
+ <i class="nav-icon bi bi-clipboard-check"></i>
452
+ <p>Recipes</p>
604
453
  </a>
605
454
  </li>
606
455
  <li class="nav-item">
@@ -630,11 +479,17 @@
630
479
  <a href="#" class="nav-link">
631
480
  <i class="nav-icon bi bi-filetype-js"></i>
632
481
  <p>
633
- Javascript
482
+ JavaScript Plugins
634
483
  <i class="nav-arrow bi bi-chevron-right"></i>
635
484
  </p>
636
485
  </a>
637
486
  <ul class="nav nav-treeview">
487
+ <li class="nav-item">
488
+ <a href="../docs/javascript/plugins-overview.html" class="nav-link">
489
+ <i class="nav-icon bi bi-circle"></i>
490
+ <p>Overview</p>
491
+ </a>
492
+ </li>
638
493
  <li class="nav-item">
639
494
  <a href="../docs/javascript/layout.html" class="nav-link">
640
495
  <i class="nav-icon bi bi-circle"></i>
@@ -680,122 +535,83 @@
680
535
  </ul>
681
536
  </li>
682
537
  <li class="nav-item">
683
- <a href="../docs/browser-support.html" class="nav-link active">
684
- <i class="nav-icon bi bi-browser-edge"></i>
685
- <p>Browser Support</p>
538
+ <a href="../docs/integrations.html" class="nav-link">
539
+ <i class="nav-icon bi bi-puzzle"></i>
540
+ <p>Integrations</p>
686
541
  </a>
687
542
  </li>
543
+
544
+ <li class="nav-header">SHIPPING</li>
688
545
  <li class="nav-item">
689
- <a href="../docs/how-to-contribute.html" class="nav-link">
690
- <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
691
- <p>How To Contribute</p>
546
+ <a href="../docs/migration.html" class="nav-link">
547
+ <i class="nav-icon bi bi-arrow-up-right-square"></i>
548
+ <p>Migration from v3</p>
692
549
  </a>
693
550
  </li>
694
551
  <li class="nav-item">
695
- <a href="../docs/faq.html" class="nav-link">
696
- <i class="nav-icon bi bi-question-circle-fill"></i>
697
- <p>FAQ</p>
552
+ <a href="../docs/deployment.html" class="nav-link">
553
+ <i class="nav-icon bi bi-cloud-upload"></i>
554
+ <p>Deployment</p>
698
555
  </a>
699
556
  </li>
700
557
  <li class="nav-item">
701
- <a href="../docs/license.html" class="nav-link">
702
- <i class="nav-icon bi bi-patch-check-fill"></i>
703
- <p>License</p>
558
+ <a href="../docs/browser-support.html" class="nav-link active">
559
+ <i class="nav-icon bi bi-browser-chrome"></i>
560
+ <p>Browser Support</p>
704
561
  </a>
705
562
  </li>
706
563
 
707
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
708
- <li class="nav-item">
709
- <a href="#" class="nav-link">
710
- <i class="nav-icon bi bi-circle-fill"></i>
711
- <p>Level 1</p>
712
- </a>
713
- </li>
714
- <li class="nav-item">
715
- <a href="#" class="nav-link">
716
- <i class="nav-icon bi bi-circle-fill"></i>
717
- <p>
718
- Level 1
719
- <i class="nav-arrow bi bi-chevron-right"></i>
720
- </p>
721
- </a>
722
- <ul class="nav nav-treeview">
723
- <li class="nav-item">
724
- <a href="#" class="nav-link">
725
- <i class="nav-icon bi bi-circle"></i>
726
- <p>Level 2</p>
727
- </a>
728
- </li>
729
- <li class="nav-item">
730
- <a href="#" class="nav-link">
731
- <i class="nav-icon bi bi-circle"></i>
732
- <p>
733
- Level 2
734
- <i class="nav-arrow bi bi-chevron-right"></i>
735
- </p>
736
- </a>
737
- <ul class="nav nav-treeview">
738
- <li class="nav-item">
739
- <a href="#" class="nav-link">
740
- <i class="nav-icon bi bi-record-circle-fill"></i>
741
- <p>Level 3</p>
742
- </a>
743
- </li>
744
- <li class="nav-item">
745
- <a href="#" class="nav-link">
746
- <i class="nav-icon bi bi-record-circle-fill"></i>
747
- <p>Level 3</p>
748
- </a>
749
- </li>
750
- <li class="nav-item">
751
- <a href="#" class="nav-link">
752
- <i class="nav-icon bi bi-record-circle-fill"></i>
753
- <p>Level 3</p>
754
- </a>
755
- </li>
756
- </ul>
757
- </li>
758
- <li class="nav-item">
759
- <a href="#" class="nav-link">
760
- <i class="nav-icon bi bi-circle"></i>
761
- <p>Level 2</p>
762
- </a>
763
- </li>
764
- </ul>
765
- </li>
564
+ <li class="nav-header">RESOURCES</li>
766
565
  <li class="nav-item">
767
- <a href="#" class="nav-link">
768
- <i class="nav-icon bi bi-circle-fill"></i>
769
- <p>Level 1</p>
566
+ <a href="../docs/faq.html" class="nav-link">
567
+ <i class="nav-icon bi bi-question-circle"></i>
568
+ <p>FAQ</p>
770
569
  </a>
771
570
  </li>
772
-
773
- <li class="nav-header">LABELS</li>
774
571
  <li class="nav-item">
775
- <a href="#" class="nav-link">
776
- <i class="nav-icon bi bi-circle text-danger"></i>
777
- <p class="text">Important</p>
572
+ <a href="../docs/how-to-contribute.html" class="nav-link">
573
+ <i class="nav-icon bi bi-people"></i>
574
+ <p>Contributing</p>
778
575
  </a>
779
576
  </li>
780
577
  <li class="nav-item">
781
- <a href="#" class="nav-link">
782
- <i class="nav-icon bi bi-circle text-warning"></i>
783
- <p>Warning</p>
578
+ <a href="../docs/license.html" class="nav-link">
579
+ <i class="nav-icon bi bi-patch-check"></i>
580
+ <p>License</p>
784
581
  </a>
785
582
  </li>
786
583
  <li class="nav-item">
787
- <a href="#" class="nav-link">
788
- <i class="nav-icon bi bi-circle text-info"></i>
789
- <p>Informational</p>
584
+ <a
585
+ href="https://github.com/ColorlibHQ/AdminLTE"
586
+ target="_blank"
587
+ rel="noopener"
588
+ class="nav-link"
589
+ >
590
+ <i class="nav-icon bi bi-github"></i>
591
+ <p>
592
+ GitHub
593
+ <i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
594
+ </p>
790
595
  </a>
791
596
  </li>
792
597
  </ul>
793
598
  <!--end::Sidebar Menu-->
599
+
600
+ <!-- Back to preview CTA (bottom of sidebar) -->
601
+ <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
602
+ <a
603
+ href="../index.html"
604
+ class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
605
+ >
606
+ <i class="bi bi-arrow-left" aria-hidden="true"></i>
607
+ Back to live preview
608
+ </a>
609
+ </div>
794
610
  </nav>
795
611
  </div>
796
612
  <!--end::Sidebar Wrapper-->
797
613
  </aside>
798
- <!--end::Sidebar-->
614
+ <!--end::Sidebar (docs mode)-->
799
615
  <!--begin::App Main-->
800
616
  <main class="app-main">
801
617
  <!--begin::App Content Header-->
@@ -823,35 +639,39 @@
823
639
  <div class="app-content">
824
640
  <!--begin::Container-->
825
641
  <div class="container-fluid">
826
- <p>AdminLTE comes with the same browser support as Bootstrap 5.</p>
827
- <blockquote>
828
- <h5 id="excerpt-from-bootstraps-official-documentation">
829
- Excerpt from Bootstrap’s official Documentation!
830
- </h5>
831
- <p>
832
- Bootstrap supports the <strong>latest, stable releases</strong> of all major
833
- browsers and platforms.
834
- </p>
835
- <p>
836
- For more details
837
- <a
838
- href="https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers"
839
- >look here</a
840
- >.
841
- </p>
842
- </blockquote>
843
- <p>
844
- You can find our supported range of browsers and their versions in
845
- <a href="https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc"
846
- >our .browserslistrc file</a
847
- >:
848
- </p>
849
- <pre
850
- class="astro-code dark-plus"
851
- style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
852
- tabindex="0"
853
- data-language="plaintext"
854
- ><code><span class="line"><span># https://github.com/browserslist/browserslist#readme</span></span>
642
+ <div class="row">
643
+ <div class="col-12">
644
+ <div class="card">
645
+ <div class="card-body">
646
+ <p>AdminLTE comes with the same browser support as Bootstrap 5.</p>
647
+ <blockquote>
648
+ <h5 id="excerpt-from-bootstraps-official-documentation">
649
+ Excerpt from Bootstrap’s official Documentation!
650
+ </h5>
651
+ <p>
652
+ Bootstrap supports the <strong>latest, stable releases</strong> of all major
653
+ browsers and platforms.
654
+ </p>
655
+ <p>
656
+ For more details
657
+ <a
658
+ href="https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers"
659
+ >look here</a
660
+ >.
661
+ </p>
662
+ </blockquote>
663
+ <p>
664
+ You can find our supported range of browsers and their versions in
665
+ <a href="https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc"
666
+ >our .browserslistrc file</a
667
+ >:
668
+ </p>
669
+ <pre
670
+ class="astro-code dark-plus"
671
+ style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
672
+ tabindex="0"
673
+ data-language="plaintext"
674
+ ><code><span class="line"><span># https://github.com/browserslist/browserslist#readme</span></span>
855
675
  <span class="line"><span></span></span>
856
676
  <span class="line"><span>&gt;= 0.5%</span></span>
857
677
  <span class="line"><span>last 2 major versions</span></span>
@@ -862,6 +682,10 @@
862
682
  <span class="line"><span>iOS &gt;= 12</span></span>
863
683
  <span class="line"><span>Safari &gt;= 12</span></span>
864
684
  <span class="line"><span>not Explorer &lt;= 11</span></span></code></pre>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </div>
865
689
  </div>
866
690
  <!--end::Container-->
867
691
  </div>
@@ -931,7 +755,71 @@
931
755
  }
932
756
  });
933
757
  </script>
934
- <!--end::OverlayScrollbars Configure-->
758
+ <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
759
+ <script>
760
+ (() => {
761
+ 'use strict';
762
+
763
+ const STORAGE_KEY = 'lte-theme';
764
+
765
+ const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
766
+ const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
767
+
768
+ const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
769
+
770
+ const getPreferredTheme = () => {
771
+ const stored = getStoredTheme();
772
+ if (stored) return stored;
773
+ return prefersDark() ? 'dark' : 'light';
774
+ };
775
+
776
+ const setTheme = (theme) => {
777
+ const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
778
+ document.documentElement.setAttribute('data-bs-theme', resolved);
779
+ };
780
+
781
+ setTheme(getPreferredTheme());
782
+
783
+ const showActiveTheme = (theme) => {
784
+ // Highlight the active dropdown option
785
+ document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
786
+ el.classList.remove('active');
787
+ el.setAttribute('aria-pressed', 'false');
788
+ const check = el.querySelector('.bi-check-lg');
789
+ if (check) check.classList.add('d-none');
790
+ });
791
+ const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
792
+ if (active) {
793
+ active.classList.add('active');
794
+ active.setAttribute('aria-pressed', 'true');
795
+ const check = active.querySelector('.bi-check-lg');
796
+ if (check) check.classList.remove('d-none');
797
+ }
798
+ // Sync the topbar trigger icon
799
+ document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
800
+ icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
801
+ });
802
+ };
803
+
804
+ globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
805
+ const stored = getStoredTheme();
806
+ if (!stored || stored === 'auto') setTheme(getPreferredTheme());
807
+ });
808
+
809
+ document.addEventListener('DOMContentLoaded', () => {
810
+ showActiveTheme(getPreferredTheme());
811
+ document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
812
+ toggle.addEventListener('click', () => {
813
+ const theme = toggle.getAttribute('data-bs-theme-value');
814
+ setStoredTheme(theme);
815
+ setTheme(theme);
816
+ showActiveTheme(theme);
817
+ });
818
+ });
819
+ });
820
+ })();
821
+ </script>
822
+ <!--end::Color Mode Toggle-->
935
823
  <!--end::Script-->
936
824
  </body>
937
825
  <!--end::Body-->