admin-lte 4.0.0-rc7 → 4.0.1

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