admin-lte 4.0.0-rc6 → 4.0.0

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