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/faq.html CHANGED
@@ -1,10 +1,35 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
- <!--begin::Head-->
4
3
  <head>
5
4
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
5
  <title>FAQ | AdminLTE 4</title>
7
6
 
7
+ <!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
8
+ <script>
9
+ (() => {
10
+ 'use strict';
11
+ const STORAGE_KEY = 'lte-theme';
12
+ let stored = null;
13
+ try {
14
+ stored = localStorage.getItem(STORAGE_KEY);
15
+ } catch {
16
+ // localStorage may be unavailable (private mode, sandboxed iframe).
17
+ }
18
+ const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
19
+ // Mirror the resolution in _scripts.astro: explicit "dark"/"light" win,
20
+ // otherwise ("auto" or unset) fall back to the OS preference.
21
+ let resolved = 'light';
22
+ if (stored === 'dark' || stored === 'light') {
23
+ resolved = stored;
24
+ } else if (prefersDark) {
25
+ resolved = 'dark';
26
+ }
27
+ document.documentElement.setAttribute('data-bs-theme', resolved);
28
+ document.documentElement.style.colorScheme = resolved;
29
+ })();
30
+ </script>
31
+ <!--end::Theme Init-->
32
+
8
33
  <!--begin::Accessibility Meta Tags-->
9
34
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
10
35
  <meta name="color-scheme" content="light dark" />
@@ -62,10 +87,7 @@
62
87
  <link rel="stylesheet" href="../css/adminlte.css" />
63
88
  <!--end::Required Plugin(AdminLTE)-->
64
89
  </head>
65
- <!--end::Head-->
66
- <!--begin::Body-->
67
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
68
- <!--begin::App Wrapper-->
90
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page faq-page">
69
91
  <div class="app-wrapper">
70
92
  <!--begin::Header-->
71
93
  <nav class="app-header navbar navbar-expand bg-body">
@@ -78,11 +100,18 @@
78
100
  <i class="bi bi-list"></i>
79
101
  </a>
80
102
  </li>
103
+
81
104
  <li class="nav-item d-none d-md-block">
82
- <a href="#" class="nav-link">Home</a>
105
+ <a href="../docs/introduction.html" class="nav-link">
106
+ <i class="bi bi-book me-1" aria-hidden="true"></i>
107
+ Documentation
108
+ </a>
83
109
  </li>
84
110
  <li class="nav-item d-none d-md-block">
85
- <a href="#" class="nav-link">Contact</a>
111
+ <a href="../index.html" class="nav-link">
112
+ <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
113
+ Back to live preview
114
+ </a>
86
115
  </li>
87
116
  </ul>
88
117
  <!--end::Start Navbar Links-->
@@ -220,11 +249,70 @@
220
249
  <li class="nav-item">
221
250
  <a class="nav-link" href="#" data-lte-toggle="fullscreen">
222
251
  <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>
252
+ <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
224
253
  </a>
225
254
  </li>
226
255
  <!--end::Fullscreen Toggle-->
227
256
 
257
+ <!--begin::Color Mode Toggle (#6010)-->
258
+ <li class="nav-item dropdown">
259
+ <a
260
+ class="nav-link"
261
+ href="#"
262
+ id="bd-theme"
263
+ aria-label="Toggle color scheme"
264
+ data-bs-toggle="dropdown"
265
+ aria-expanded="false"
266
+ >
267
+ <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
268
+ <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
269
+ <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
270
+ </a>
271
+ <ul
272
+ class="dropdown-menu dropdown-menu-end"
273
+ aria-labelledby="bd-theme"
274
+ style="--bs-dropdown-min-width: 8rem"
275
+ >
276
+ <li>
277
+ <button
278
+ type="button"
279
+ class="dropdown-item d-flex align-items-center"
280
+ data-bs-theme-value="light"
281
+ aria-pressed="false"
282
+ >
283
+ <i class="bi bi-sun-fill me-2"></i>
284
+ Light
285
+ <i class="bi bi-check-lg ms-auto d-none"></i>
286
+ </button>
287
+ </li>
288
+ <li>
289
+ <button
290
+ type="button"
291
+ class="dropdown-item d-flex align-items-center"
292
+ data-bs-theme-value="dark"
293
+ aria-pressed="false"
294
+ >
295
+ <i class="bi bi-moon-fill me-2"></i>
296
+ Dark
297
+ <i class="bi bi-check-lg ms-auto d-none"></i>
298
+ </button>
299
+ </li>
300
+ <li>
301
+ <button
302
+ type="button"
303
+ class="dropdown-item d-flex align-items-center active"
304
+ data-bs-theme-value="auto"
305
+ aria-pressed="true"
306
+ >
307
+ <i class="bi bi-circle-half me-2"></i>
308
+ Auto
309
+ <i class="bi bi-check-lg ms-auto d-none"></i>
310
+ </button>
311
+ </li>
312
+ </ul>
313
+ </li>
314
+ <!--end::Color Mode Toggle-->
315
+
228
316
  <!--begin::User Menu Dropdown-->
229
317
  <li class="nav-item dropdown user-menu">
230
318
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -281,326 +369,83 @@
281
369
  <!--end::Container-->
282
370
  </nav>
283
371
  <!--end::Header-->
284
- <!--begin::Sidebar-->
372
+ <!--begin::Sidebar (docs mode)-->
285
373
  <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
286
374
  <!--begin::Sidebar Brand-->
287
375
  <div class="sidebar-brand">
288
- <!--begin::Brand Link-->
289
- <a href="../index.html" class="brand-link">
290
- <!--begin::Brand Image-->
376
+ <a href="../docs/introduction.html" class="brand-link">
291
377
  <img
292
378
  src="../assets/img/AdminLTELogo.png"
293
379
  alt="AdminLTE Logo"
294
380
  class="brand-image opacity-75 shadow"
295
381
  />
296
- <!--end::Brand Image-->
297
- <!--begin::Brand Text-->
298
- <span class="brand-text fw-light">AdminLTE 4</span>
299
- <!--end::Brand Text-->
382
+ <span class="brand-text fw-light">
383
+ AdminLTE 4 <span class="opacity-75">&middot; Docs</span>
384
+ </span>
300
385
  </a>
301
- <!--end::Brand Link-->
302
386
  </div>
303
387
  <!--end::Sidebar Brand-->
304
388
  <!--begin::Sidebar Wrapper-->
305
389
  <div class="sidebar-wrapper">
306
- <nav class="mt-2">
390
+ <nav class="mt-2" aria-label="Documentation navigation">
307
391
  <!--begin::Sidebar Menu-->
308
392
  <ul
309
393
  class="nav sidebar-menu flex-column"
310
394
  data-lte-toggle="treeview"
311
- role="navigation"
312
- aria-label="Main navigation"
313
395
  data-accordion="false"
314
- id="navigation"
396
+ id="docs-navigation"
315
397
  >
398
+ <li class="nav-header">START HERE</li>
316
399
  <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>
323
- </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
- </li>
345
- <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>
400
+ <a href="../docs/introduction.html" class="nav-link">
401
+ <i class="nav-icon bi bi-download"></i>
402
+ <p>Installation</p>
349
403
  </a>
350
404
  </li>
351
405
  <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>
406
+ <a href="../docs/getting-started.html" class="nav-link">
407
+ <i class="nav-icon bi bi-rocket-takeoff"></i>
408
+ <p>Getting Started</p>
358
409
  </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
410
  </li>
411
+
412
+ <li class="nav-header">FOUNDATIONS</li>
380
413
  <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>
414
+ <a href="../docs/layout.html" class="nav-link">
415
+ <i class="nav-icon bi bi-grip-horizontal"></i>
416
+ <p>Layout Classes</p>
388
417
  </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
418
  </li>
458
419
  <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>
420
+ <a href="../docs/layout-blueprint.html" class="nav-link">
421
+ <i class="nav-icon bi bi-diagram-3"></i>
422
+ <p>Layout Blueprint</p>
465
423
  </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
424
  </li>
487
425
  <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>
426
+ <a href="../docs/customization.html" class="nav-link">
427
+ <i class="nav-icon bi bi-palette"></i>
428
+ <p>Customization</p>
494
429
  </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
430
  </li>
504
431
  <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>
432
+ <a href="../docs/color-mode.html" class="nav-link">
433
+ <i class="nav-icon bi bi-star-half"></i>
434
+ <p>Color Mode</p>
511
435
  </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
436
  </li>
521
-
522
- <li class="nav-header">EXAMPLES</li>
523
437
  <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>
438
+ <a href="../docs/rtl.html" class="nav-link">
439
+ <i class="nav-icon bi bi-text-paragraph"></i>
440
+ <p>RTL Support</p>
530
441
  </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
442
  </li>
586
443
 
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">
596
- <i class="nav-icon bi bi-grip-horizontal"></i>
597
- <p>Layout</p>
598
- </a>
599
- </li>
444
+ <li class="nav-header">BUILDING</li>
600
445
  <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>
446
+ <a href="../docs/recipes.html" class="nav-link">
447
+ <i class="nav-icon bi bi-clipboard-check"></i>
448
+ <p>Recipes</p>
604
449
  </a>
605
450
  </li>
606
451
  <li class="nav-item">
@@ -630,11 +475,17 @@
630
475
  <a href="#" class="nav-link">
631
476
  <i class="nav-icon bi bi-filetype-js"></i>
632
477
  <p>
633
- Javascript
478
+ JavaScript Plugins
634
479
  <i class="nav-arrow bi bi-chevron-right"></i>
635
480
  </p>
636
481
  </a>
637
482
  <ul class="nav nav-treeview">
483
+ <li class="nav-item">
484
+ <a href="../docs/javascript/plugins-overview.html" class="nav-link">
485
+ <i class="nav-icon bi bi-circle"></i>
486
+ <p>Overview</p>
487
+ </a>
488
+ </li>
638
489
  <li class="nav-item">
639
490
  <a href="../docs/javascript/layout.html" class="nav-link">
640
491
  <i class="nav-icon bi bi-circle"></i>
@@ -680,129 +531,86 @@
680
531
  </ul>
681
532
  </li>
682
533
  <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>
534
+ <a href="../docs/integrations.html" class="nav-link">
535
+ <i class="nav-icon bi bi-puzzle"></i>
536
+ <p>Integrations</p>
686
537
  </a>
687
538
  </li>
539
+
540
+ <li class="nav-header">SHIPPING</li>
688
541
  <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>
542
+ <a href="../docs/migration.html" class="nav-link">
543
+ <i class="nav-icon bi bi-arrow-up-right-square"></i>
544
+ <p>Migration from v3</p>
692
545
  </a>
693
546
  </li>
694
547
  <li class="nav-item">
695
- <a href="../docs/faq.html" class="nav-link active">
696
- <i class="nav-icon bi bi-question-circle-fill"></i>
697
- <p>FAQ</p>
548
+ <a href="../docs/deployment.html" class="nav-link">
549
+ <i class="nav-icon bi bi-cloud-upload"></i>
550
+ <p>Deployment</p>
698
551
  </a>
699
552
  </li>
700
553
  <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>
554
+ <a href="../docs/browser-support.html" class="nav-link">
555
+ <i class="nav-icon bi bi-browser-chrome"></i>
556
+ <p>Browser Support</p>
704
557
  </a>
705
558
  </li>
706
559
 
707
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
560
+ <li class="nav-header">RESOURCES</li>
708
561
  <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>
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>
562
+ <a href="../docs/faq.html" class="nav-link active">
563
+ <i class="nav-icon bi bi-question-circle"></i>
564
+ <p>FAQ</p>
770
565
  </a>
771
566
  </li>
772
-
773
- <li class="nav-header">LABELS</li>
774
567
  <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>
568
+ <a href="../docs/how-to-contribute.html" class="nav-link">
569
+ <i class="nav-icon bi bi-people"></i>
570
+ <p>Contributing</p>
778
571
  </a>
779
572
  </li>
780
573
  <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>
574
+ <a href="../docs/license.html" class="nav-link">
575
+ <i class="nav-icon bi bi-patch-check"></i>
576
+ <p>License</p>
784
577
  </a>
785
578
  </li>
786
579
  <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>
580
+ <a
581
+ href="https://github.com/ColorlibHQ/AdminLTE"
582
+ target="_blank"
583
+ rel="noopener"
584
+ class="nav-link"
585
+ >
586
+ <i class="nav-icon bi bi-github"></i>
587
+ <p>
588
+ GitHub
589
+ <i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
590
+ </p>
790
591
  </a>
791
592
  </li>
792
593
  </ul>
793
594
  <!--end::Sidebar Menu-->
595
+
596
+ <!-- Back to preview CTA (bottom of sidebar) -->
597
+ <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
598
+ <a
599
+ href="../index.html"
600
+ class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
601
+ >
602
+ <i class="bi bi-arrow-left" aria-hidden="true"></i>
603
+ Back to live preview
604
+ </a>
605
+ </div>
794
606
  </nav>
795
607
  </div>
796
608
  <!--end::Sidebar Wrapper-->
797
609
  </aside>
798
- <!--end::Sidebar-->
799
- <!--begin::App Main-->
610
+ <!--end::Sidebar (docs mode)-->
800
611
  <main class="app-main">
801
- <!--begin::App Content Header-->
802
612
  <div class="app-content-header">
803
- <!--begin::Container-->
804
613
  <div class="container-fluid">
805
- <!--begin::Row-->
806
614
  <div class="row">
807
615
  <div class="col-sm-6">
808
616
  <h3 class="mb-0">FAQ</h3>
@@ -814,42 +622,586 @@
814
622
  </ol>
815
623
  </div>
816
624
  </div>
817
- <!--end::Row-->
818
625
  </div>
819
- <!--end::Container-->
820
626
  </div>
821
- <!--end::App Content Header-->
822
- <!--begin::App Content-->
823
627
  <div class="app-content">
824
- <!--begin::Container-->
825
628
  <div class="container-fluid">
826
- <h4 id="can-adminlte-be-used-with-wordpress">Can AdminLTE be used with WordPress?</h4>
827
- <p>
828
- AdminLTE is an HTML template that can be used for any purpose. However, it is not made
829
- to be easily installed on WordPress. It will require some effort and enough knowledge
830
- of the WordPress script to do so.
831
- </p>
832
- <h4 id="is-there-an-integration-guide-for-php-frameworks-such-as-yii-or-symfony">
833
- Is there an integration guide for PHP frameworks such as Yii or Symfony?
834
- </h4>
835
- <p>
836
- Short answer, no. However, there are forks and tutorials around the web that provide
837
- info on how to integrate with many different frameworks. There are even versions of
838
- AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.
839
- </p>
840
- <h4 id="how-do-i-get-notified-of-new-adminlte-versions">
841
- How do I get notified of new AdminLTE versions?
842
- </h4>
843
- <p>
844
- You may watch the
845
- <a href="https://github.com/ColorlibHQ/AdminLTE">releases on GitHub</a>.
846
- </p>
629
+ <!-- Hero -->
630
+ <section class="faq-hero text-center mb-4">
631
+ <span class="faq-hero-eyebrow">
632
+ <i class="bi bi-patch-question-fill" aria-hidden="true"></i>
633
+ Frequently Asked Questions
634
+ </span>
635
+ <h1 class="faq-hero-title">How can we help?</h1>
636
+ <p class="faq-hero-lead">
637
+ Quick answers to the 21 questions we get asked most often. Use the search to jump to
638
+ anything, or click a topic below.
639
+ </p>
640
+ <form class="faq-search" role="search" onsubmit="return false;">
641
+ <i class="bi bi-search faq-search-icon" aria-hidden="true"></i>
642
+ <input
643
+ type="search"
644
+ id="faq-search-input"
645
+ class="form-control form-control-lg"
646
+ placeholder="Search the FAQ…"
647
+ aria-label="Search the FAQ"
648
+ autocomplete="off"
649
+ />
650
+ <button
651
+ type="button"
652
+ class="faq-search-clear d-none"
653
+ id="faq-search-clear"
654
+ aria-label="Clear search"
655
+ >
656
+ <i class="bi bi-x-lg" aria-hidden="true"></i>
657
+ </button>
658
+ </form>
659
+ <p class="faq-empty-state d-none" id="faq-empty-state">
660
+ <i class="bi bi-emoji-frown" aria-hidden="true"></i>
661
+ No questions match your search. Try a different keyword or
662
+ <a
663
+ href="https://github.com/ColorlibHQ/AdminLTE/discussions"
664
+ target="_blank"
665
+ rel="noopener"
666
+ >open a Discussion</a
667
+ >.
668
+ </p>
669
+ </section>
670
+
671
+ <!-- Section nav chips -->
672
+ <nav class="faq-chips mb-4" aria-label="FAQ sections">
673
+ <a href="#getting-started" class="faq-chip faq-chip-primary">
674
+ <i class="bi bi-rocket-takeoff" aria-hidden="true"></i>
675
+ <span>Getting started</span>
676
+ <span class="faq-chip-count">4</span> </a
677
+ ><a href="#framework-integrations" class="faq-chip faq-chip-info">
678
+ <i class="bi bi-puzzle" aria-hidden="true"></i>
679
+ <span>Framework integrations</span>
680
+ <span class="faq-chip-count">3</span> </a
681
+ ><a href="#customization" class="faq-chip faq-chip-warning">
682
+ <i class="bi bi-palette" aria-hidden="true"></i>
683
+ <span>Customization</span>
684
+ <span class="faq-chip-count">3</span> </a
685
+ ><a href="#versions" class="faq-chip faq-chip-success">
686
+ <i class="bi bi-arrow-clockwise" aria-hidden="true"></i>
687
+ <span>Versions and updates</span>
688
+ <span class="faq-chip-count">3</span> </a
689
+ ><a href="#licensing" class="faq-chip faq-chip-secondary">
690
+ <i class="bi bi-shield-check" aria-hidden="true"></i>
691
+ <span>Licensing</span>
692
+ <span class="faq-chip-count">3</span> </a
693
+ ><a href="#troubleshooting" class="faq-chip faq-chip-danger">
694
+ <i class="bi bi-wrench-adjustable" aria-hidden="true"></i>
695
+ <span>Troubleshooting</span>
696
+ <span class="faq-chip-count">5</span>
697
+ </a>
698
+ </nav>
699
+
700
+ <!-- Sections -->
701
+ <div class="faq-sections">
702
+ <section id="getting-started" class="faq-section" data-faq-section>
703
+ <header class="faq-section-header faq-section-primary">
704
+ <span class="faq-section-icon">
705
+ <i class="bi bi-rocket-takeoff" aria-hidden="true"></i>
706
+ </span>
707
+ <div>
708
+ <h2 class="faq-section-title">Getting started</h2>
709
+ <p class="faq-section-count">4 questions</p>
710
+ </div>
711
+ </header>
712
+ <div class="faq-section-items">
713
+ <details class="faq-item" data-faq-item>
714
+ <summary>
715
+ <span class="faq-q-icon">
716
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
717
+ </span>
718
+ <span class="faq-q-text">What is AdminLTE, exactly?</span>
719
+ <span class="faq-q-chevron">
720
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
721
+ </span>
722
+ </summary>
723
+ <div class="faq-answer">
724
+ A free, MIT-licensed admin dashboard <em>template</em>. It's a set of HTML,
725
+ CSS, and JavaScript files built on top of Bootstrap 5.3 — not a framework, not
726
+ an npm component library. You drop it into your project, modify the markup to
727
+ suit your app, and ship.
728
+ </div>
729
+ </details>
730
+ <details class="faq-item" data-faq-item>
731
+ <summary>
732
+ <span class="faq-q-icon">
733
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
734
+ </span>
735
+ <span class="faq-q-text">Do I need a build step to use it?</span>
736
+ <span class="faq-q-chevron">
737
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
738
+ </span>
739
+ </summary>
740
+ <div class="faq-answer">
741
+ No. The <a href="getting-started.html">Getting Started</a> guide shows the
742
+ CDN-only approach — copy four <code>&lt;link&gt;</code> tags and four
743
+ <code>&lt;script&gt;</code> tags into your HTML and you're done. The npm-based
744
+ workflow is there if you want to customise SCSS variables or tree-shake the
745
+ JavaScript.
746
+ </div>
747
+ </details>
748
+ <details class="faq-item" data-faq-item>
749
+ <summary>
750
+ <span class="faq-q-icon">
751
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
752
+ </span>
753
+ <span class="faq-q-text">Which Bootstrap version does v4 require?</span>
754
+ <span class="faq-q-chevron">
755
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
756
+ </span>
757
+ </summary>
758
+ <div class="faq-answer">
759
+ Bootstrap 5.3.x. The current <code>package.json</code> pins 5.3.8 — older 5.3
760
+ minors should work but aren't tested. Bootstrap 5.0 / 5.1 / 5.2 will not work
761
+ (the color-mode and <code>data-bs-theme</code> system landed in 5.3).
762
+ </div>
763
+ </details>
764
+ <details class="faq-item" data-faq-item>
765
+ <summary>
766
+ <span class="faq-q-icon">
767
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
768
+ </span>
769
+ <span class="faq-q-text">Can I use AdminLTE 4 with jQuery?</span>
770
+ <span class="faq-q-chevron">
771
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
772
+ </span>
773
+ </summary>
774
+ <div class="faq-answer">
775
+ You don't <em>need</em> jQuery — AdminLTE 4's JavaScript is vanilla. If your
776
+ existing app already uses jQuery, it'll coexist fine. But none of AdminLTE 4's
777
+ own plugins call into jQuery, and there are no <code>$.fn.xxx()</code> plugin
778
+ shims.
779
+ </div>
780
+ </details>
781
+ </div>
782
+ </section>
783
+ <section id="framework-integrations" class="faq-section" data-faq-section>
784
+ <header class="faq-section-header faq-section-info">
785
+ <span class="faq-section-icon">
786
+ <i class="bi bi-puzzle" aria-hidden="true"></i>
787
+ </span>
788
+ <div>
789
+ <h2 class="faq-section-title">Framework integrations</h2>
790
+ <p class="faq-section-count">3 questions</p>
791
+ </div>
792
+ </header>
793
+ <div class="faq-section-items">
794
+ <details class="faq-item" data-faq-item>
795
+ <summary>
796
+ <span class="faq-q-icon">
797
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
798
+ </span>
799
+ <span class="faq-q-text">Can AdminLTE be used with WordPress?</span>
800
+ <span class="faq-q-chevron">
801
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
802
+ </span>
803
+ </summary>
804
+ <div class="faq-answer">
805
+ Yes — it's just HTML/CSS/JS. The typical path is to build a custom WordPress
806
+ theme that wraps AdminLTE's markup around <code>wp_head()</code>,
807
+ <code>wp_footer()</code>, and WordPress's loops. AdminLTE doesn't ship a
808
+ WordPress-specific build; the work of porting nav-walker classes and
809
+ authentication forms is yours.
810
+ </div>
811
+ </details>
812
+ <details class="faq-item" data-faq-item>
813
+ <summary>
814
+ <span class="faq-q-icon">
815
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
816
+ </span>
817
+ <span class="faq-q-text">Laravel? Symfony? Yii? Django? Rails?</span>
818
+ <span class="faq-q-chevron">
819
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
820
+ </span>
821
+ </summary>
822
+ <div class="faq-answer">
823
+ All workable. AdminLTE is a server-rendered template — copy the demo pages
824
+ into your views/templates, replace static content with your framework's
825
+ template variables, and wire up routes/auth as usual. Community
826
+ Composer/Packagist packages exist for Laravel and Symfony, though they
827
+ typically lag the upstream version — verify they ship v4 before you depend on
828
+ them.
829
+ </div>
830
+ </details>
831
+ <details class="faq-item" data-faq-item>
832
+ <summary>
833
+ <span class="faq-q-icon">
834
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
835
+ </span>
836
+ <span class="faq-q-text">React, Vue, Svelte, Angular?</span>
837
+ <span class="faq-q-chevron">
838
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
839
+ </span>
840
+ </summary>
841
+ <div class="faq-answer">
842
+ <p>
843
+ Workable but less natural. AdminLTE's JavaScript plugins use DOM lifecycle
844
+ hooks (<code>DOMContentLoaded</code>, MutationObserver patterns) which fight
845
+ with framework reconciliation. If you're using a SPA framework, consider:
846
+ </p>
847
+ <ul>
848
+ <li>
849
+ Using AdminLTE <em>only</em> for CSS — keep the visual style, but write
850
+ your own React/Vue components for the interactive parts.
851
+ </li>
852
+ <li>
853
+ Or pick a component library built for your framework (PrimeReact, Vuetify,
854
+ etc.).
855
+ </li>
856
+ </ul>
857
+ <p class="mb-0">
858
+ We don't recommend wrapping AdminLTE's jQuery-era plugins in SPA framework
859
+ components — it's a maintenance burden that outweighs the visual win.
860
+ </p>
861
+ </div>
862
+ </details>
863
+ </div>
864
+ </section>
865
+ <section id="customization" class="faq-section" data-faq-section>
866
+ <header class="faq-section-header faq-section-warning">
867
+ <span class="faq-section-icon">
868
+ <i class="bi bi-palette" aria-hidden="true"></i>
869
+ </span>
870
+ <div>
871
+ <h2 class="faq-section-title">Customization</h2>
872
+ <p class="faq-section-count">3 questions</p>
873
+ </div>
874
+ </header>
875
+ <div class="faq-section-items">
876
+ <details class="faq-item" data-faq-item>
877
+ <summary>
878
+ <span class="faq-q-icon">
879
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
880
+ </span>
881
+ <span class="faq-q-text">How do I change the primary colour?</span>
882
+ <span class="faq-q-chevron">
883
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
884
+ </span>
885
+ </summary>
886
+ <div class="faq-answer">
887
+ <p>
888
+ Override <code>--bs-primary</code> (and its RGB counterpart) on
889
+ <code>:root</code>:
890
+ </p>
891
+ <pre class="astro-code"><code>:root {
892
+ --bs-primary: #6610f2;
893
+ --bs-primary-rgb: 102, 16, 242;
894
+ }</code></pre>
895
+ <p class="mb-0">
896
+ For deeper control (sidebar width, breakpoints, spacing scale), see
897
+ <a href="customization.html">Customization &amp; Theming</a>.
898
+ </p>
899
+ </div>
900
+ </details>
901
+ <details class="faq-item" data-faq-item>
902
+ <summary>
903
+ <span class="faq-q-icon">
904
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
905
+ </span>
906
+ <span class="faq-q-text"
907
+ >How do I add a date picker / multi-select / rich text editor?</span
908
+ >
909
+ <span class="faq-q-chevron">
910
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
911
+ </span>
912
+ </summary>
913
+ <div class="faq-answer">
914
+ AdminLTE deliberately doesn't bundle these — they'd bloat the framework. The
915
+ <a href="integrations.html">Recommended Integrations</a> page lists
916
+ best-in-class third-party libraries (Flatpickr, Tom Select, Quill, etc.) with
917
+ copy-paste install snippets.
918
+ </div>
919
+ </details>
920
+ <details class="faq-item" data-faq-item>
921
+ <summary>
922
+ <span class="faq-q-icon">
923
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
924
+ </span>
925
+ <span class="faq-q-text"
926
+ >Can I use FontAwesome instead of Bootstrap Icons?</span
927
+ >
928
+ <span class="faq-q-chevron">
929
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
930
+ </span>
931
+ </summary>
932
+ <div class="faq-answer">
933
+ Yes. Bootstrap Icons is the default in the demos because it's MIT, ships with
934
+ Bootstrap, and is SVG-based — but nothing in AdminLTE's CSS or JS requires it.
935
+ Drop in FontAwesome's stylesheet and replace
936
+ <code>&lt;i class="bi bi-x"&gt;</code> with
937
+ <code>&lt;i class="fas fa-x"&gt;</code> throughout.
938
+ </div>
939
+ </details>
940
+ </div>
941
+ </section>
942
+ <section id="versions" class="faq-section" data-faq-section>
943
+ <header class="faq-section-header faq-section-success">
944
+ <span class="faq-section-icon">
945
+ <i class="bi bi-arrow-clockwise" aria-hidden="true"></i>
946
+ </span>
947
+ <div>
948
+ <h2 class="faq-section-title">Versions and updates</h2>
949
+ <p class="faq-section-count">3 questions</p>
950
+ </div>
951
+ </header>
952
+ <div class="faq-section-items">
953
+ <details class="faq-item" data-faq-item>
954
+ <summary>
955
+ <span class="faq-q-icon">
956
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
957
+ </span>
958
+ <span class="faq-q-text">How do I get notified of new versions?</span>
959
+ <span class="faq-q-chevron">
960
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
961
+ </span>
962
+ </summary>
963
+ <div class="faq-answer">
964
+ <a href="https://github.com/ColorlibHQ/AdminLTE">Watch the GitHub repo</a>
965
+ (Releases-only mode) or subscribe to the RSS feed at
966
+ <code>https://github.com/ColorlibHQ/AdminLTE/releases.atom</code>.
967
+ </div>
968
+ </details>
969
+ <details class="faq-item" data-faq-item>
970
+ <summary>
971
+ <span class="faq-q-icon">
972
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
973
+ </span>
974
+ <span class="faq-q-text">Where's the AdminLTE 3 documentation?</span>
975
+ <span class="faq-q-chevron">
976
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
977
+ </span>
978
+ </summary>
979
+ <div class="faq-answer">
980
+ Still online at
981
+ <a href="https://adminlte.io/docs/3.2/">adminlte.io/docs/3.2</a> and earlier
982
+ versions are linked there. The v3 branch on GitHub continues to receive
983
+ critical bug fixes; new features land in v4 only.
984
+ </div>
985
+ </details>
986
+ <details class="faq-item" data-faq-item>
987
+ <summary>
988
+ <span class="faq-q-icon">
989
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
990
+ </span>
991
+ <span class="faq-q-text">How do I upgrade from v3 to v4?</span>
992
+ <span class="faq-q-chevron">
993
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
994
+ </span>
995
+ </summary>
996
+ <div class="faq-answer">
997
+ See the dedicated <a href="migration.html">Migration from v3</a> guide. The
998
+ short version: class names changed (<code>.wrapper</code> →
999
+ <code>.app-wrapper</code>), <code>data-toggle</code> →
1000
+ <code>data-bs-toggle</code>, dark mode uses <code>data-bs-theme</code> instead
1001
+ of <code>.dark-mode</code>, and jQuery isn't required anymore.
1002
+ </div>
1003
+ </details>
1004
+ </div>
1005
+ </section>
1006
+ <section id="licensing" class="faq-section" data-faq-section>
1007
+ <header class="faq-section-header faq-section-secondary">
1008
+ <span class="faq-section-icon">
1009
+ <i class="bi bi-shield-check" aria-hidden="true"></i>
1010
+ </span>
1011
+ <div>
1012
+ <h2 class="faq-section-title">Licensing</h2>
1013
+ <p class="faq-section-count">3 questions</p>
1014
+ </div>
1015
+ </header>
1016
+ <div class="faq-section-items">
1017
+ <details class="faq-item" data-faq-item>
1018
+ <summary>
1019
+ <span class="faq-q-icon">
1020
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
1021
+ </span>
1022
+ <span class="faq-q-text">Is AdminLTE free for commercial use?</span>
1023
+ <span class="faq-q-chevron">
1024
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
1025
+ </span>
1026
+ </summary>
1027
+ <div class="faq-answer">
1028
+ Yes — MIT licensed. You can use it in commercial products, SaaS apps, client
1029
+ work, anything. The only requirement is preserving the copyright notice in the
1030
+ source files (<code>adminlte.css</code> / <code>adminlte.js</code>). You don't
1031
+ need to display attribution in the UI.
1032
+ </div>
1033
+ </details>
1034
+ <details class="faq-item" data-faq-item>
1035
+ <summary>
1036
+ <span class="faq-q-icon">
1037
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
1038
+ </span>
1039
+ <span class="faq-q-text">Do I need to credit AdminLTE in my app?</span>
1040
+ <span class="faq-q-chevron">
1041
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
1042
+ </span>
1043
+ </summary>
1044
+ <div class="faq-answer">
1045
+ No. The MIT license requires you to keep the licence notice in the source
1046
+ files you distribute — that's it. You don't have to mention AdminLTE in the
1047
+ rendered UI, your About page, or your README.
1048
+ </div>
1049
+ </details>
1050
+ <details class="faq-item" data-faq-item>
1051
+ <summary>
1052
+ <span class="faq-q-icon">
1053
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
1054
+ </span>
1055
+ <span class="faq-q-text">Can I sell a product made with AdminLTE?</span>
1056
+ <span class="faq-q-chevron">
1057
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
1058
+ </span>
1059
+ </summary>
1060
+ <div class="faq-answer">
1061
+ Yes. The MIT license explicitly permits this. You can also resell modified
1062
+ versions of AdminLTE itself (theme marketplaces frequently do this) — just
1063
+ preserve the original copyright notice.
1064
+ </div>
1065
+ </details>
1066
+ </div>
1067
+ </section>
1068
+ <section id="troubleshooting" class="faq-section" data-faq-section>
1069
+ <header class="faq-section-header faq-section-danger">
1070
+ <span class="faq-section-icon">
1071
+ <i class="bi bi-wrench-adjustable" aria-hidden="true"></i>
1072
+ </span>
1073
+ <div>
1074
+ <h2 class="faq-section-title">Troubleshooting</h2>
1075
+ <p class="faq-section-count">5 questions</p>
1076
+ </div>
1077
+ </header>
1078
+ <div class="faq-section-items">
1079
+ <details class="faq-item" data-faq-item>
1080
+ <summary>
1081
+ <span class="faq-q-icon">
1082
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
1083
+ </span>
1084
+ <span class="faq-q-text"
1085
+ >The sidebar doesn't collapse when I click the hamburger menu.</span
1086
+ >
1087
+ <span class="faq-q-chevron">
1088
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
1089
+ </span>
1090
+ </summary>
1091
+ <div class="faq-answer">
1092
+ Check that the PushMenu plugin is loaded. It's bundled into
1093
+ <code>adminlte.js</code> — make sure the script tag is on the page and
1094
+ <em>after</em> the markup it operates on. Also verify your hamburger button
1095
+ has <code>data-lte-toggle="sidebar"</code> (not
1096
+ <code>data-widget="pushmenu"</code>, which is the v3 attribute).
1097
+ </div>
1098
+ </details>
1099
+ <details class="faq-item" data-faq-item>
1100
+ <summary>
1101
+ <span class="faq-q-icon">
1102
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
1103
+ </span>
1104
+ <span class="faq-q-text">Dark mode doesn't persist after refresh.</span>
1105
+ <span class="faq-q-chevron">
1106
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
1107
+ </span>
1108
+ </summary>
1109
+ <div class="faq-answer">
1110
+ The included <a href="color-mode.html">Color Mode</a> toggle writes to
1111
+ <code>localStorage</code> under the key <code>lte-theme</code>. If you're
1112
+ using a different toggle implementation, make sure it both sets
1113
+ <code>document.documentElement.setAttribute('data-bs-theme', ...)</code> and
1114
+ writes to localStorage on change.
1115
+ </div>
1116
+ </details>
1117
+ <details class="faq-item" data-faq-item>
1118
+ <summary>
1119
+ <span class="faq-q-icon">
1120
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
1121
+ </span>
1122
+ <span class="faq-q-text"
1123
+ >Bootstrap modal closes when I press Escape, but the AdminLTE sidebar closes
1124
+ too.</span
1125
+ >
1126
+ <span class="faq-q-chevron">
1127
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
1128
+ </span>
1129
+ </summary>
1130
+ <div class="faq-answer">
1131
+ Fixed in v4.0.0 (#5993). If you're still seeing this, you're on an older RC —
1132
+ update to the latest.
1133
+ </div>
1134
+ </details>
1135
+ <details class="faq-item" data-faq-item>
1136
+ <summary>
1137
+ <span class="faq-q-icon">
1138
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
1139
+ </span>
1140
+ <span class="faq-q-text"
1141
+ >My custom SCSS doesn't override AdminLTE's defaults.</span
1142
+ >
1143
+ <span class="faq-q-chevron">
1144
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
1145
+ </span>
1146
+ </summary>
1147
+ <div class="faq-answer">
1148
+ Put your overrides <em>before</em> the <code>@import</code> of AdminLTE's
1149
+ SCSS. AdminLTE uses <code>!default</code> on its variables, which means the
1150
+ first declaration wins. See
1151
+ <a href="customization.html#scss-variables">Customization &amp; Theming</a>
1152
+ for the import order.
1153
+ </div>
1154
+ </details>
1155
+ <details class="faq-item" data-faq-item>
1156
+ <summary>
1157
+ <span class="faq-q-icon">
1158
+ <i class="bi bi-question-lg" aria-hidden="true"></i>
1159
+ </span>
1160
+ <span class="faq-q-text"
1161
+ ><code>npm install</code> fails with peer dependency errors.</span
1162
+ >
1163
+ <span class="faq-q-chevron">
1164
+ <i class="bi bi-chevron-down" aria-hidden="true"></i>
1165
+ </span>
1166
+ </summary>
1167
+ <div class="faq-answer">
1168
+ We use an npm <code>overrides</code> block in <code>package.json</code> to
1169
+ keep peers happy — make sure you're on npm 8.3+ which respects them. If you're
1170
+ on an older npm, install with <code>--legacy-peer-deps</code>.
1171
+ </div>
1172
+ </details>
1173
+ </div>
1174
+ </section>
1175
+ </div>
1176
+
1177
+ <!-- CTA footer -->
1178
+ <section class="faq-cta mt-5">
1179
+ <div class="faq-cta-icon">
1180
+ <i class="bi bi-chat-quote" aria-hidden="true"></i>
1181
+ </div>
1182
+ <h2>Still need help?</h2>
1183
+ <p>
1184
+ Open a discussion on GitHub or browse the documentation for more in-depth answers.
1185
+ </p>
1186
+ <div class="faq-cta-actions">
1187
+ <a
1188
+ href="https://github.com/ColorlibHQ/AdminLTE/discussions"
1189
+ target="_blank"
1190
+ rel="noopener"
1191
+ class="btn btn-primary"
1192
+ >
1193
+ <i class="bi bi-github me-2" aria-hidden="true"></i>
1194
+ Open a Discussion
1195
+ </a>
1196
+ <a href="introduction.html" class="btn btn-outline-secondary">
1197
+ <i class="bi bi-book me-2" aria-hidden="true"></i>
1198
+ Browse Documentation
1199
+ </a>
1200
+ </div>
1201
+ </section>
847
1202
  </div>
848
- <!--end::Container-->
849
1203
  </div>
850
- <!--end::App Content-->
851
1204
  </main>
852
- <!--end::App Main-->
853
1205
  <!--begin::Footer-->
854
1206
  <footer class="app-footer">
855
1207
  <!--begin::To the end-->
@@ -865,8 +1217,6 @@
865
1217
  </footer>
866
1218
  <!--end::Footer-->
867
1219
  </div>
868
- <!--end::App Wrapper-->
869
- <!--begin::Script-->
870
1220
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
871
1221
  <script
872
1222
  src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -913,8 +1263,130 @@
913
1263
  }
914
1264
  });
915
1265
  </script>
916
- <!--end::OverlayScrollbars Configure-->
917
- <!--end::Script-->
1266
+ <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
1267
+ <script>
1268
+ (() => {
1269
+ 'use strict';
1270
+
1271
+ const STORAGE_KEY = 'lte-theme';
1272
+
1273
+ const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
1274
+ const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
1275
+
1276
+ const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
1277
+
1278
+ const getPreferredTheme = () => {
1279
+ const stored = getStoredTheme();
1280
+ if (stored) return stored;
1281
+ return prefersDark() ? 'dark' : 'light';
1282
+ };
1283
+
1284
+ const setTheme = (theme) => {
1285
+ const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
1286
+ document.documentElement.setAttribute('data-bs-theme', resolved);
1287
+ };
1288
+
1289
+ setTheme(getPreferredTheme());
1290
+
1291
+ const showActiveTheme = (theme) => {
1292
+ // Highlight the active dropdown option
1293
+ document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
1294
+ el.classList.remove('active');
1295
+ el.setAttribute('aria-pressed', 'false');
1296
+ const check = el.querySelector('.bi-check-lg');
1297
+ if (check) check.classList.add('d-none');
1298
+ });
1299
+ const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
1300
+ if (active) {
1301
+ active.classList.add('active');
1302
+ active.setAttribute('aria-pressed', 'true');
1303
+ const check = active.querySelector('.bi-check-lg');
1304
+ if (check) check.classList.remove('d-none');
1305
+ }
1306
+ // Sync the topbar trigger icon
1307
+ document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
1308
+ icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
1309
+ });
1310
+ };
1311
+
1312
+ globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
1313
+ const stored = getStoredTheme();
1314
+ if (!stored || stored === 'auto') setTheme(getPreferredTheme());
1315
+ });
1316
+
1317
+ document.addEventListener('DOMContentLoaded', () => {
1318
+ showActiveTheme(getPreferredTheme());
1319
+ document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
1320
+ toggle.addEventListener('click', () => {
1321
+ const theme = toggle.getAttribute('data-bs-theme-value');
1322
+ setStoredTheme(theme);
1323
+ setTheme(theme);
1324
+ showActiveTheme(theme);
1325
+ });
1326
+ });
1327
+ });
1328
+ })();
1329
+ </script>
1330
+ <!--end::Color Mode Toggle-->
1331
+
1332
+ <script>
1333
+ // FAQ live search + clear button
1334
+ (() => {
1335
+ 'use strict';
1336
+ const input = document.getElementById('faq-search-input');
1337
+ const clearBtn = document.getElementById('faq-search-clear');
1338
+ const emptyState = document.getElementById('faq-empty-state');
1339
+ if (!input) return;
1340
+
1341
+ const items = Array.from(document.querySelectorAll('[data-faq-item]'));
1342
+ const sections = Array.from(document.querySelectorAll('[data-faq-section]'));
1343
+
1344
+ const normalize = (s) => s.toLowerCase().trim();
1345
+
1346
+ const filter = (query) => {
1347
+ const q = normalize(query);
1348
+ clearBtn.classList.toggle('d-none', q.length === 0);
1349
+
1350
+ let visibleTotal = 0;
1351
+ for (const item of items) {
1352
+ const text = item.textContent || '';
1353
+ const matches = q === '' || normalize(text).includes(q);
1354
+ item.classList.toggle('d-none', !matches);
1355
+ // Open matching items when searching so users see context
1356
+ item.open = q !== '' && matches;
1357
+ if (matches) visibleTotal++;
1358
+ }
1359
+
1360
+ // Hide entire sections that have no visible items
1361
+ for (const section of sections) {
1362
+ const hasVisible = section.querySelectorAll('[data-faq-item]:not(.d-none)').length > 0;
1363
+ section.classList.toggle('d-none', !hasVisible);
1364
+ }
1365
+
1366
+ emptyState.classList.toggle('d-none', visibleTotal !== 0);
1367
+ };
1368
+
1369
+ input.addEventListener('input', (e) => filter(e.target.value));
1370
+
1371
+ clearBtn.addEventListener('click', () => {
1372
+ input.value = '';
1373
+ filter('');
1374
+ input.focus();
1375
+ });
1376
+
1377
+ // Smooth scroll to section on chip click + offset for sticky header
1378
+ for (const chip of document.querySelectorAll('.faq-chip')) {
1379
+ chip.addEventListener('click', (e) => {
1380
+ const id = chip.getAttribute('href')?.replace('#', '');
1381
+ if (!id) return;
1382
+ const target = document.getElementById(id);
1383
+ if (!target) return;
1384
+ e.preventDefault();
1385
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
1386
+ history.replaceState(null, '', '#' + id);
1387
+ });
1388
+ }
1389
+ })();
1390
+ </script>
918
1391
  </body>
919
- <!--end::Body-->
920
1392
  </html>