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/layout.html CHANGED
@@ -5,6 +5,32 @@
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>Layout | 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 active">
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>
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>
494
439
  </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
440
  </li>
504
441
  <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>
442
+ <a href="../docs/rtl.html" class="nav-link">
443
+ <i class="nav-icon bi bi-text-paragraph"></i>
444
+ <p>RTL Support</p>
511
445
  </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
446
  </li>
521
447
 
522
- <li class="nav-header">EXAMPLES</li>
448
+ <li class="nav-header">BUILDING</li>
523
449
  <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>
530
- </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
- </li>
586
-
587
- <li class="nav-header">DOCUMENTATIONS</li>
588
- <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 active">
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,13 +479,19 @@
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">
638
487
  <li class="nav-item">
639
- <a href="../docs/javascript/layout.html" class="nav-link active">
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>
493
+ <li class="nav-item">
494
+ <a href="../docs/javascript/layout.html" class="nav-link">
640
495
  <i class="nav-icon bi bi-circle"></i>
641
496
  <p>Layout</p>
642
497
  </a>
@@ -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">
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">
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>
564
+ <li class="nav-header">RESOURCES</li>
714
565
  <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>
766
- <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-->
@@ -822,54 +638,70 @@
822
638
  <!--begin::App Content-->
823
639
  <div class="app-content">
824
640
  <div class="container-fluid">
825
- <div class="callout callout-info mb-4">
826
- <h5 class="fw-bold">Tips</h5>
827
- <p>
828
- The
829
- <a
830
- href="/starter.html"
831
- target="_blank"
832
- rel="noopener noreferrer"
833
- class="callout-link"
834
- >
835
- starter page
836
- </a>
837
- is a good place to start building your app if you’d like to start from scratch.
838
- </p>
839
- </div>
641
+ <div class="row">
642
+ <div class="col-12">
643
+ <div class="card">
644
+ <div class="card-body">
645
+ <div class="callout callout-info mb-4">
646
+ <h5 class="fw-bold">Tips</h5>
647
+ <p>
648
+ The
649
+ <a
650
+ href="https://github.com/ColorlibHQ/AdminLTE/tree/master/dist"
651
+ target="_blank"
652
+ rel="noopener noreferrer"
653
+ class="callout-link"
654
+ >
655
+ starter pages
656
+ </a>
657
+ are a good place to start building your app from scratch.
658
+ </p>
659
+ </div>
840
660
 
841
- <p>The layout consists of five major parts:</p>
842
- <ul>
843
- <li>Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.</li>
844
- <li>Main Header <code>.app-header</code> . Contains the logo and navbar.</li>
845
- <li>
846
- Main Sidebar <code>.app-sidebar</code> . Contains the sidebar user panel and menu.
847
- </li>
848
- <li>Content <code>.app-main</code> . Contains the page header and content.</li>
849
- <li>Main Footer <code>.app-footer</code> . Contains the footer.</li>
850
- </ul>
661
+ <p>The layout consists of five major parts:</p>
662
+ <ul>
663
+ <li>
664
+ Wrapper <code>.app-wrapper</code> &mdash; a div that wraps the whole site.
665
+ </li>
666
+ <li>
667
+ Main Header <code>.app-header</code> &mdash; contains the logo and navbar.
668
+ </li>
669
+ <li>
670
+ Main Sidebar <code>.app-sidebar</code> &mdash; contains the sidebar user
671
+ panel and menu.
672
+ </li>
673
+ <li>
674
+ Content <code>.app-main</code> &mdash; contains the page header and content.
675
+ </li>
676
+ <li>Main Footer <code>.app-footer</code> &mdash; contains the footer.</li>
677
+ </ul>
851
678
 
852
- <h4>Layout Options</h4>
853
- <p>
854
- AdminLTE v4 provides a set of options to apply to your main layout. Each one of these
855
- classes can be added to the
856
- <code>body</code> tag to get the desired goal.
857
- </p>
858
- <ul>
859
- <li>
860
- Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.
861
- </li>
862
- <li>
863
- Mini Sidebar on Toggle: use the class
864
- <code>.sidebar-expand-* .sidebar-mini</code>
865
- to have a collapsed sidebar upon loading.
866
- </li>
867
- <li>
868
- Collapsed Sidebar: use the class
869
- <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a collapsed
870
- sidebar upon loading.
871
- </li>
872
- </ul>
679
+ <h4>Layout Options</h4>
680
+ <p>
681
+ AdminLTE v4 provides a set of options to apply to your main layout. Each one
682
+ of these classes can be added to the
683
+ <code>body</code> tag to get the desired goal.
684
+ </p>
685
+ <ul>
686
+ <li>
687
+ Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed
688
+ sidebar.
689
+ </li>
690
+ <li>
691
+ Mini Sidebar on Toggle: use the class
692
+ <code>.sidebar-expand-* .sidebar-mini</code> to have a collapsed sidebar
693
+ upon loading.
694
+ </li>
695
+ <li>
696
+ Collapsed Sidebar: use the class
697
+ <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a
698
+ collapsed sidebar upon loading.
699
+ </li>
700
+ </ul>
701
+ </div>
702
+ </div>
703
+ </div>
704
+ </div>
873
705
  </div>
874
706
  <!-- /.container-fluid -->
875
707
  </div>
@@ -939,7 +771,71 @@
939
771
  }
940
772
  });
941
773
  </script>
942
- <!--end::OverlayScrollbars Configure-->
774
+ <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
775
+ <script>
776
+ (() => {
777
+ 'use strict';
778
+
779
+ const STORAGE_KEY = 'lte-theme';
780
+
781
+ const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
782
+ const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
783
+
784
+ const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
785
+
786
+ const getPreferredTheme = () => {
787
+ const stored = getStoredTheme();
788
+ if (stored) return stored;
789
+ return prefersDark() ? 'dark' : 'light';
790
+ };
791
+
792
+ const setTheme = (theme) => {
793
+ const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
794
+ document.documentElement.setAttribute('data-bs-theme', resolved);
795
+ };
796
+
797
+ setTheme(getPreferredTheme());
798
+
799
+ const showActiveTheme = (theme) => {
800
+ // Highlight the active dropdown option
801
+ document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
802
+ el.classList.remove('active');
803
+ el.setAttribute('aria-pressed', 'false');
804
+ const check = el.querySelector('.bi-check-lg');
805
+ if (check) check.classList.add('d-none');
806
+ });
807
+ const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
808
+ if (active) {
809
+ active.classList.add('active');
810
+ active.setAttribute('aria-pressed', 'true');
811
+ const check = active.querySelector('.bi-check-lg');
812
+ if (check) check.classList.remove('d-none');
813
+ }
814
+ // Sync the topbar trigger icon
815
+ document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
816
+ icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
817
+ });
818
+ };
819
+
820
+ globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
821
+ const stored = getStoredTheme();
822
+ if (!stored || stored === 'auto') setTheme(getPreferredTheme());
823
+ });
824
+
825
+ document.addEventListener('DOMContentLoaded', () => {
826
+ showActiveTheme(getPreferredTheme());
827
+ document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
828
+ toggle.addEventListener('click', () => {
829
+ const theme = toggle.getAttribute('data-bs-theme-value');
830
+ setStoredTheme(theme);
831
+ setTheme(theme);
832
+ showActiveTheme(theme);
833
+ });
834
+ });
835
+ });
836
+ })();
837
+ </script>
838
+ <!--end::Color Mode Toggle-->
943
839
  <!--end::Script-->
944
840
  </body>
945
841
  <!--end::Body-->