admin-lte 4.0.0-rc7 → 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 (102) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.md +43 -17
  3. package/dist/UI/general.html +303 -126
  4. package/dist/UI/icons.html +303 -126
  5. package/dist/UI/timeline.html +303 -126
  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 +261 -397
  15. package/dist/docs/color-mode.html +242 -382
  16. package/dist/docs/components/main-header.html +238 -374
  17. package/dist/docs/components/main-sidebar.html +253 -389
  18. package/dist/docs/customization.html +1056 -0
  19. package/dist/docs/deployment.html +1121 -0
  20. package/dist/docs/faq.html +857 -409
  21. package/dist/docs/getting-started.html +967 -0
  22. package/dist/docs/how-to-contribute.html +335 -462
  23. package/dist/docs/index.html +16 -0
  24. package/dist/docs/integrations.html +1207 -0
  25. package/dist/docs/introduction.html +453 -446
  26. package/dist/docs/javascript/accessibility.html +361 -491
  27. package/dist/docs/javascript/card-widget.html +446 -450
  28. package/dist/docs/javascript/direct-chat.html +324 -421
  29. package/dist/docs/javascript/fullscreen.html +348 -416
  30. package/dist/docs/javascript/layout.html +345 -436
  31. package/dist/docs/javascript/plugins-overview.html +1120 -0
  32. package/dist/docs/javascript/pushmenu.html +485 -492
  33. package/dist/docs/javascript/treeview.html +466 -400
  34. package/dist/docs/layout-blueprint.html +1063 -0
  35. package/dist/docs/layout.html +287 -415
  36. package/dist/docs/license.html +252 -387
  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 +65 -1
  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/{general.html → elements.html} +489 -463
  46. package/dist/forms/layout.html +1243 -0
  47. package/dist/forms/validation.html +1251 -0
  48. package/dist/forms/wizard.html +1386 -0
  49. package/dist/generate/theme.html +134 -4
  50. package/dist/index.html +303 -126
  51. package/dist/index2.html +306 -126
  52. package/dist/index3.html +303 -126
  53. package/dist/js/adminlte.js +5 -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 +303 -126
  58. package/dist/layout/collapsed-sidebar.html +303 -126
  59. package/dist/layout/fixed-complete.html +303 -126
  60. package/dist/layout/fixed-footer.html +303 -126
  61. package/dist/layout/fixed-header.html +303 -126
  62. package/dist/layout/fixed-sidebar.html +303 -126
  63. package/dist/layout/layout-custom-area.html +303 -126
  64. package/dist/layout/layout-rtl.html +303 -126
  65. package/dist/layout/logo-switch.html +134 -4
  66. package/dist/layout/sidebar-mini.html +303 -126
  67. package/dist/layout/unfixed-sidebar.html +303 -126
  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 +303 -126
  86. package/dist/widgets/cards.html +303 -126
  87. package/dist/widgets/info-box.html +303 -126
  88. package/dist/widgets/small-box.html +303 -126
  89. package/netlify.toml +16 -0
  90. package/package.json +29 -23
  91. package/src/scss/_app-header.scss +27 -0
  92. package/src/scss/_app-sidebar.scss +24 -30
  93. package/src/scss/_bootstrap-variables.scss +11 -4
  94. package/src/scss/_docs.scss +816 -0
  95. package/src/scss/_table.scss +4 -4
  96. package/src/scss/adminlte.scss +4 -1
  97. package/src/ts/adminlte.ts +1 -1
  98. package/src/ts/fullscreen.ts +8 -4
  99. package/src/ts/push-menu.ts +66 -5
  100. package/.claude/settings.local.json +0 -37
  101. package/CLAUDE.md +0 -79
  102. package/release.md +0 -75
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,298 +367,61 @@
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>
323
379
  </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
380
  </li>
345
381
  <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>
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>
349
385
  </a>
350
386
  </li>
387
+
388
+ <li class="nav-header">FOUNDATIONS</li>
351
389
  <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>
390
+ <a href="../docs/layout.html" class="nav-link">
391
+ <i class="nav-icon bi bi-grip-horizontal"></i>
392
+ <p>Layout Classes</p>
358
393
  </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
394
  </li>
380
395
  <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>
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>
388
399
  </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
400
  </li>
458
401
  <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>
402
+ <a href="../docs/customization.html" class="nav-link">
403
+ <i class="nav-icon bi bi-palette"></i>
404
+ <p>Customization</p>
465
405
  </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
406
  </li>
487
407
  <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>
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>
494
411
  </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
412
  </li>
504
413
  <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>
414
+ <a href="../docs/rtl.html" class="nav-link">
415
+ <i class="nav-icon bi bi-text-paragraph"></i>
416
+ <p>RTL Support</p>
511
417
  </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
418
  </li>
521
419
 
522
- <li class="nav-header">EXAMPLES</li>
420
+ <li class="nav-header">BUILDING</li>
523
421
  <li class="nav-item">
524
- <a href="#" class="nav-link">
525
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
526
- <p>
527
- Auth
528
- <i class="nav-arrow bi bi-chevron-right"></i>
529
- </p>
530
- </a>
531
- <ul class="nav nav-treeview">
532
- <li class="nav-item">
533
- <a href="#" class="nav-link">
534
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
535
- <p>
536
- Version 1
537
- <i class="nav-arrow bi bi-chevron-right"></i>
538
- </p>
539
- </a>
540
- <ul class="nav nav-treeview">
541
- <li class="nav-item">
542
- <a href="../examples/login.html" class="nav-link">
543
- <i class="nav-icon bi bi-circle"></i>
544
- <p>Login</p>
545
- </a>
546
- </li>
547
- <li class="nav-item">
548
- <a href="../examples/register.html" class="nav-link">
549
- <i class="nav-icon bi bi-circle"></i>
550
- <p>Register</p>
551
- </a>
552
- </li>
553
- </ul>
554
- </li>
555
- <li class="nav-item">
556
- <a href="#" class="nav-link">
557
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
558
- <p>
559
- Version 2
560
- <i class="nav-arrow bi bi-chevron-right"></i>
561
- </p>
562
- </a>
563
- <ul class="nav nav-treeview">
564
- <li class="nav-item">
565
- <a href="../examples/login-v2.html" class="nav-link">
566
- <i class="nav-icon bi bi-circle"></i>
567
- <p>Login</p>
568
- </a>
569
- </li>
570
- <li class="nav-item">
571
- <a href="../examples/register-v2.html" class="nav-link">
572
- <i class="nav-icon bi bi-circle"></i>
573
- <p>Register</p>
574
- </a>
575
- </li>
576
- </ul>
577
- </li>
578
- <li class="nav-item">
579
- <a href="../examples/lockscreen.html" class="nav-link">
580
- <i class="nav-icon bi bi-circle"></i>
581
- <p>Lockscreen</p>
582
- </a>
583
- </li>
584
- </ul>
585
- </li>
586
-
587
- <li class="nav-header">DOCUMENTATIONS</li>
588
- <li class="nav-item">
589
- <a href="../docs/introduction.html" class="nav-link">
590
- <i class="nav-icon bi bi-download"></i>
591
- <p>Installation</p>
592
- </a>
593
- </li>
594
- <li class="nav-item">
595
- <a href="../docs/layout.html" class="nav-link">
596
- <i class="nav-icon bi bi-grip-horizontal"></i>
597
- <p>Layout</p>
598
- </a>
599
- </li>
600
- <li class="nav-item">
601
- <a href="../docs/color-mode.html" class="nav-link">
602
- <i class="nav-icon bi bi-star-half"></i>
603
- <p>Color Mode</p>
422
+ <a href="../docs/recipes.html" class="nav-link">
423
+ <i class="nav-icon bi bi-clipboard-check"></i>
424
+ <p>Recipes</p>
604
425
  </a>
605
426
  </li>
606
427
  <li class="nav-item">
@@ -630,11 +451,17 @@
630
451
  <a href="#" class="nav-link">
631
452
  <i class="nav-icon bi bi-filetype-js"></i>
632
453
  <p>
633
- Javascript
454
+ JavaScript Plugins
634
455
  <i class="nav-arrow bi bi-chevron-right"></i>
635
456
  </p>
636
457
  </a>
637
458
  <ul class="nav nav-treeview">
459
+ <li class="nav-item">
460
+ <a href="../docs/javascript/plugins-overview.html" class="nav-link">
461
+ <i class="nav-icon bi bi-circle"></i>
462
+ <p>Overview</p>
463
+ </a>
464
+ </li>
638
465
  <li class="nav-item">
639
466
  <a href="../docs/javascript/layout.html" class="nav-link">
640
467
  <i class="nav-icon bi bi-circle"></i>
@@ -680,129 +507,86 @@
680
507
  </ul>
681
508
  </li>
682
509
  <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>
510
+ <a href="../docs/integrations.html" class="nav-link">
511
+ <i class="nav-icon bi bi-puzzle"></i>
512
+ <p>Integrations</p>
686
513
  </a>
687
514
  </li>
515
+
516
+ <li class="nav-header">SHIPPING</li>
688
517
  <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>
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>
692
521
  </a>
693
522
  </li>
694
523
  <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>
524
+ <a href="../docs/deployment.html" class="nav-link">
525
+ <i class="nav-icon bi bi-cloud-upload"></i>
526
+ <p>Deployment</p>
698
527
  </a>
699
528
  </li>
700
529
  <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>
530
+ <a href="../docs/browser-support.html" class="nav-link">
531
+ <i class="nav-icon bi bi-browser-chrome"></i>
532
+ <p>Browser Support</p>
704
533
  </a>
705
534
  </li>
706
535
 
707
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
708
- <li class="nav-item">
709
- <a href="#" class="nav-link">
710
- <i class="nav-icon bi bi-circle-fill"></i>
711
- <p>Level 1</p>
712
- </a>
713
- </li>
536
+ <li class="nav-header">RESOURCES</li>
714
537
  <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>
538
+ <a href="../docs/faq.html" class="nav-link active">
539
+ <i class="nav-icon bi bi-question-circle"></i>
540
+ <p>FAQ</p>
770
541
  </a>
771
542
  </li>
772
-
773
- <li class="nav-header">LABELS</li>
774
543
  <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>
544
+ <a href="../docs/how-to-contribute.html" class="nav-link">
545
+ <i class="nav-icon bi bi-people"></i>
546
+ <p>Contributing</p>
778
547
  </a>
779
548
  </li>
780
549
  <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>
550
+ <a href="../docs/license.html" class="nav-link">
551
+ <i class="nav-icon bi bi-patch-check"></i>
552
+ <p>License</p>
784
553
  </a>
785
554
  </li>
786
555
  <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>
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>
563
+ <p>
564
+ GitHub
565
+ <i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
566
+ </p>
790
567
  </a>
791
568
  </li>
792
569
  </ul>
793
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>
794
582
  </nav>
795
583
  </div>
796
584
  <!--end::Sidebar Wrapper-->
797
585
  </aside>
798
- <!--end::Sidebar-->
799
- <!--begin::App Main-->
586
+ <!--end::Sidebar (docs mode)-->
800
587
  <main class="app-main">
801
- <!--begin::App Content Header-->
802
588
  <div class="app-content-header">
803
- <!--begin::Container-->
804
589
  <div class="container-fluid">
805
- <!--begin::Row-->
806
590
  <div class="row">
807
591
  <div class="col-sm-6">
808
592
  <h3 class="mb-0">FAQ</h3>
@@ -814,42 +598,586 @@
814
598
  </ol>
815
599
  </div>
816
600
  </div>
817
- <!--end::Row-->
818
601
  </div>
819
- <!--end::Container-->
820
602
  </div>
821
- <!--end::App Content Header-->
822
- <!--begin::App Content-->
823
603
  <div class="app-content">
824
- <!--begin::Container-->
825
604
  <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>
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>
847
1178
  </div>
848
- <!--end::Container-->
849
1179
  </div>
850
- <!--end::App Content-->
851
1180
  </main>
852
- <!--end::App Main-->
853
1181
  <!--begin::Footer-->
854
1182
  <footer class="app-footer">
855
1183
  <!--begin::To the end-->
@@ -865,8 +1193,6 @@
865
1193
  </footer>
866
1194
  <!--end::Footer-->
867
1195
  </div>
868
- <!--end::App Wrapper-->
869
- <!--begin::Script-->
870
1196
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
871
1197
  <script
872
1198
  src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
@@ -913,8 +1239,130 @@
913
1239
  }
914
1240
  });
915
1241
  </script>
916
- <!--end::OverlayScrollbars Configure-->
917
- <!--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>
918
1367
  </body>
919
- <!--end::Body-->
920
1368
  </html>