admin-lte 4.0.0-rc4 → 4.0.0-rc7

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 (81) hide show
  1. package/.browserslistrc +1 -0
  2. package/.claude/settings.local.json +27 -18
  3. package/CHANGELOG.md +143 -0
  4. package/CLAUDE.md +61 -88
  5. package/README.md +77 -20
  6. package/SECURITY.md +99 -0
  7. package/dist/UI/general.html +263 -72
  8. package/dist/UI/icons.html +94 -14
  9. package/dist/UI/timeline.html +108 -20
  10. package/dist/css/adminlte.css +162 -127
  11. package/dist/css/adminlte.css.map +1 -1
  12. package/dist/css/adminlte.min.css +2 -2
  13. package/dist/css/adminlte.min.css.map +1 -1
  14. package/dist/css/adminlte.rtl.css +162 -127
  15. package/dist/css/adminlte.rtl.css.map +1 -1
  16. package/dist/css/adminlte.rtl.min.css +2 -2
  17. package/dist/css/adminlte.rtl.min.css.map +1 -1
  18. package/dist/docs/browser-support.html +91 -13
  19. package/dist/docs/color-mode.html +96 -14
  20. package/dist/docs/components/main-header.html +111 -19
  21. package/dist/docs/components/main-sidebar.html +91 -13
  22. package/dist/docs/faq.html +91 -13
  23. package/dist/docs/how-to-contribute.html +91 -13
  24. package/dist/docs/introduction.html +97 -19
  25. package/dist/docs/javascript/accessibility.html +1055 -0
  26. package/dist/docs/javascript/card-widget.html +999 -0
  27. package/dist/docs/javascript/direct-chat.html +969 -0
  28. package/dist/docs/javascript/fullscreen.html +949 -0
  29. package/dist/docs/javascript/layout.html +975 -0
  30. package/dist/docs/javascript/pushmenu.html +1028 -0
  31. package/dist/docs/javascript/treeview.html +91 -13
  32. package/dist/docs/layout.html +93 -13
  33. package/dist/docs/license.html +91 -13
  34. package/dist/examples/lockscreen.html +23 -3
  35. package/dist/examples/login-v2.html +30 -5
  36. package/dist/examples/login.html +30 -5
  37. package/dist/examples/register-v2.html +30 -5
  38. package/dist/examples/register.html +30 -5
  39. package/dist/forms/general.html +114 -19
  40. package/dist/generate/theme.html +59 -15
  41. package/dist/index.html +127 -16
  42. package/dist/index2.html +195 -33
  43. package/dist/index3.html +138 -25
  44. package/dist/js/adminlte.js +179 -272
  45. package/dist/js/adminlte.js.map +1 -1
  46. package/dist/js/adminlte.min.js +3 -3
  47. package/dist/js/adminlte.min.js.map +1 -1
  48. package/dist/layout/collapsed-sidebar-without-hover.html +943 -0
  49. package/dist/layout/collapsed-sidebar.html +91 -12
  50. package/dist/layout/fixed-complete.html +93 -15
  51. package/dist/layout/fixed-footer.html +92 -13
  52. package/dist/layout/fixed-header.html +92 -13
  53. package/dist/layout/fixed-sidebar.html +93 -13
  54. package/dist/layout/layout-custom-area.html +102 -15
  55. package/dist/layout/layout-rtl.html +92 -13
  56. package/dist/layout/logo-switch.html +44 -11
  57. package/dist/layout/sidebar-mini.html +91 -12
  58. package/dist/layout/unfixed-sidebar.html +92 -13
  59. package/dist/tables/simple.html +163 -36
  60. package/dist/widgets/cards.html +106 -13
  61. package/dist/widgets/info-box.html +178 -30
  62. package/dist/widgets/small-box.html +95 -13
  63. package/index.html +1 -1
  64. package/package.json +28 -28
  65. package/release.md +75 -0
  66. package/src/scss/_accessibility.scss +44 -6
  67. package/src/scss/_app-footer.scss +9 -0
  68. package/src/scss/_app-sidebar.scss +55 -44
  69. package/src/scss/_bootstrap-variables.scss +1 -1
  70. package/src/scss/_cards.scss +6 -4
  71. package/src/scss/_dropdown.scss +5 -28
  72. package/src/scss/adminlte.scss +1 -1
  73. package/src/scss/pages/_login_and_register.scss +1 -1
  74. package/src/ts/accessibility.ts +22 -12
  75. package/src/ts/adminlte.ts +2 -14
  76. package/src/ts/card-widget.ts +4 -2
  77. package/src/ts/layout.ts +34 -16
  78. package/src/ts/push-menu.ts +238 -72
  79. package/src/ts/treeview.ts +19 -1
  80. package/src/ts/util/index.ts +10 -0
  81. package/README 2.md +0 -106
package/dist/UI/icons.html CHANGED
@@ -4,12 +4,14 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Icons</title>
7
+
7
8
  <!--begin::Accessibility Meta Tags-->
8
9
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
10
  <meta name="color-scheme" content="light dark" />
10
11
  <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
12
  <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
13
  <!--end::Accessibility Meta Tags-->
14
+
13
15
  <!--begin::Primary Meta Tags-->
14
16
  <meta name="title" content="AdminLTE 4 | Icons" />
15
17
  <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
22
24
  content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
23
25
  />
24
26
  <!--end::Primary Meta Tags-->
27
+
25
28
  <!--begin::Accessibility Features-->
26
29
  <!-- Skip links will be dynamically added by accessibility.js -->
27
30
  <meta name="supported-color-schemes" content="light dark" />
28
31
  <link rel="preload" href="../css/adminlte.css" as="style" />
29
32
  <!--end::Accessibility Features-->
33
+
30
34
  <!--begin::Fonts-->
31
35
  <link
32
36
  rel="stylesheet"
@@ -34,9 +38,10 @@
34
38
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
35
39
  crossorigin="anonymous"
36
40
  media="print"
37
- onload="this.media='all'"
41
+ onload="this.media = 'all'"
38
42
  />
39
43
  <!--end::Fonts-->
44
+
40
45
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
41
46
  <link
42
47
  rel="stylesheet"
@@ -44,6 +49,7 @@
44
49
  crossorigin="anonymous"
45
50
  />
46
51
  <!--end::Third Party Plugin(OverlayScrollbars)-->
52
+
47
53
  <!--begin::Third Party Plugin(Bootstrap Icons)-->
48
54
  <link
49
55
  rel="stylesheet"
@@ -51,13 +57,14 @@
51
57
  crossorigin="anonymous"
52
58
  />
53
59
  <!--end::Third Party Plugin(Bootstrap Icons)-->
60
+
54
61
  <!--begin::Required Plugin(AdminLTE)-->
55
62
  <link rel="stylesheet" href="../css/adminlte.css" />
56
63
  <!--end::Required Plugin(AdminLTE)-->
57
64
  </head>
58
65
  <!--end::Head-->
59
66
  <!--begin::Body-->
60
- <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
67
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
61
68
  <!--begin::App Wrapper-->
62
69
  <div class="app-wrapper">
63
70
  <!--begin::Header-->
@@ -71,10 +78,15 @@
71
78
  <i class="bi bi-list"></i>
72
79
  </a>
73
80
  </li>
74
- <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
75
- <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
81
+ <li class="nav-item d-none d-md-block">
82
+ <a href="#" class="nav-link">Home</a>
83
+ </li>
84
+ <li class="nav-item d-none d-md-block">
85
+ <a href="#" class="nav-link">Contact</a>
86
+ </li>
76
87
  </ul>
77
88
  <!--end::Start Navbar Links-->
89
+
78
90
  <!--begin::End Navbar Links-->
79
91
  <ul class="navbar-nav ms-auto">
80
92
  <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
84
96
  </a>
85
97
  </li>
86
98
  <!--end::Navbar Search-->
99
+
87
100
  <!--begin::Messages Dropdown Menu-->
88
101
  <li class="nav-item dropdown">
89
102
  <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
173
186
  </div>
174
187
  </li>
175
188
  <!--end::Messages Dropdown Menu-->
189
+
176
190
  <!--begin::Notifications Dropdown Menu-->
177
191
  <li class="nav-item dropdown">
178
192
  <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
201
215
  </div>
202
216
  </li>
203
217
  <!--end::Notifications Dropdown Menu-->
218
+
204
219
  <!--begin::Fullscreen Toggle-->
205
220
  <li class="nav-item">
206
221
  <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
209
224
  </a>
210
225
  </li>
211
226
  <!--end::Fullscreen Toggle-->
227
+
212
228
  <!--begin::User Menu Dropdown-->
213
229
  <li class="nav-item dropdown user-menu">
214
230
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,17 +253,23 @@
237
253
  <li class="user-body">
238
254
  <!--begin::Row-->
239
255
  <div class="row">
240
- <div class="col-4 text-center"><a href="#">Followers</a></div>
241
- <div class="col-4 text-center"><a href="#">Sales</a></div>
242
- <div class="col-4 text-center"><a href="#">Friends</a></div>
256
+ <div class="col-4 text-center">
257
+ <a href="#">Followers</a>
258
+ </div>
259
+ <div class="col-4 text-center">
260
+ <a href="#">Sales</a>
261
+ </div>
262
+ <div class="col-4 text-center">
263
+ <a href="#">Friends</a>
264
+ </div>
243
265
  </div>
244
266
  <!--end::Row-->
245
267
  </li>
246
268
  <!--end::Menu Body-->
247
269
  <!--begin::Menu Footer-->
248
270
  <li class="user-footer">
249
- <a href="#" class="btn btn-default btn-flat">Profile</a>
250
- <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
271
+ <a href="#" class="btn btn-outline-secondary">Profile</a>
272
+ <a href="#" class="btn btn-outline-danger float-end">Sign out</a>
251
273
  </li>
252
274
  <!--end::Menu Footer-->
253
275
  </ul>
@@ -360,7 +382,7 @@
360
382
  <i class="nav-icon bi bi-clipboard-fill"></i>
361
383
  <p>
362
384
  Layout Options
363
- <span class="nav-badge badge text-bg-secondary me-3">6</span>
385
+ <span class="nav-badge badge text-bg-secondary me-3">7</span>
364
386
  <i class="nav-arrow bi bi-chevron-right"></i>
365
387
  </p>
366
388
  </a>
@@ -413,6 +435,12 @@
413
435
  <p>Sidebar Mini <small>+ Collapsed</small></p>
414
436
  </a>
415
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>
416
444
  <li class="nav-item">
417
445
  <a href="../layout/logo-switch.html" class="nav-link">
418
446
  <i class="nav-icon bi bi-circle"></i>
@@ -490,6 +518,7 @@
490
518
  </li>
491
519
  </ul>
492
520
  </li>
521
+
493
522
  <li class="nav-header">EXAMPLES</li>
494
523
  <li class="nav-item">
495
524
  <a href="#" class="nav-link">
@@ -554,6 +583,7 @@
554
583
  </li>
555
584
  </ul>
556
585
  </li>
586
+
557
587
  <li class="nav-header">DOCUMENTATIONS</li>
558
588
  <li class="nav-item">
559
589
  <a href="../docs/introduction.html" class="nav-link">
@@ -605,12 +635,48 @@
605
635
  </p>
606
636
  </a>
607
637
  <ul class="nav nav-treeview">
638
+ <li class="nav-item">
639
+ <a href="../docs/javascript/layout.html" class="nav-link">
640
+ <i class="nav-icon bi bi-circle"></i>
641
+ <p>Layout</p>
642
+ </a>
643
+ </li>
644
+ <li class="nav-item">
645
+ <a href="../docs/javascript/pushmenu.html" class="nav-link">
646
+ <i class="nav-icon bi bi-circle"></i>
647
+ <p>PushMenu</p>
648
+ </a>
649
+ </li>
608
650
  <li class="nav-item">
609
651
  <a href="../docs/javascript/treeview.html" class="nav-link">
610
652
  <i class="nav-icon bi bi-circle"></i>
611
653
  <p>Treeview</p>
612
654
  </a>
613
655
  </li>
656
+ <li class="nav-item">
657
+ <a href="../docs/javascript/card-widget.html" class="nav-link">
658
+ <i class="nav-icon bi bi-circle"></i>
659
+ <p>Card Widget</p>
660
+ </a>
661
+ </li>
662
+ <li class="nav-item">
663
+ <a href="../docs/javascript/direct-chat.html" class="nav-link">
664
+ <i class="nav-icon bi bi-circle"></i>
665
+ <p>Direct Chat</p>
666
+ </a>
667
+ </li>
668
+ <li class="nav-item">
669
+ <a href="../docs/javascript/fullscreen.html" class="nav-link">
670
+ <i class="nav-icon bi bi-circle"></i>
671
+ <p>Fullscreen</p>
672
+ </a>
673
+ </li>
674
+ <li class="nav-item">
675
+ <a href="../docs/javascript/accessibility.html" class="nav-link">
676
+ <i class="nav-icon bi bi-circle"></i>
677
+ <p>Accessibility</p>
678
+ </a>
679
+ </li>
614
680
  </ul>
615
681
  </li>
616
682
  <li class="nav-item">
@@ -637,6 +703,7 @@
637
703
  <p>License</p>
638
704
  </a>
639
705
  </li>
706
+
640
707
  <li class="nav-header">MULTI LEVEL EXAMPLE</li>
641
708
  <li class="nav-item">
642
709
  <a href="#" class="nav-link">
@@ -702,6 +769,7 @@
702
769
  <p>Level 1</p>
703
770
  </a>
704
771
  </li>
772
+
705
773
  <li class="nav-header">LABELS</li>
706
774
  <li class="nav-item">
707
775
  <a href="#" class="nav-link">
@@ -736,7 +804,9 @@
736
804
  <div class="container-fluid">
737
805
  <!--begin::Row-->
738
806
  <div class="row">
739
- <div class="col-sm-6"><h3 class="mb-0">Icons</h3></div>
807
+ <div class="col-sm-6">
808
+ <h3 class="mb-0">Icons</h3>
809
+ </div>
740
810
  <div class="col-sm-6">
741
811
  <ol class="breadcrumb float-sm-end">
742
812
  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -759,7 +829,9 @@
759
829
  <!-- The icons -->
760
830
  <div class="col-12">
761
831
  <div class="card card-primary card-outline">
762
- <div class="card-header"><h3 class="card-title">Icons</h3></div>
832
+ <div class="card-header">
833
+ <h3 class="card-title">Icons</h3>
834
+ </div>
763
835
  <div class="card-body">
764
836
  <p>You can use any font library you like with AdminLTE 4.</p>
765
837
  <strong>Recommendations</strong>
@@ -790,7 +862,7 @@
790
862
  <!--end::To the end-->
791
863
  <!--begin::Copyright-->
792
864
  <strong>
793
- Copyright &copy; 2014-2025&nbsp;
865
+ Copyright &copy; 2014-2026&nbsp;
794
866
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
795
867
  </strong>
796
868
  All rights reserved.
@@ -827,7 +899,15 @@
827
899
  };
828
900
  document.addEventListener('DOMContentLoaded', function () {
829
901
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
830
- if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
902
+
903
+ // Disable OverlayScrollbars on mobile devices to prevent touch interference
904
+ const isMobile = window.innerWidth <= 992;
905
+
906
+ if (
907
+ sidebarWrapper &&
908
+ OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
909
+ !isMobile
910
+ ) {
831
911
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
832
912
  scrollbars: {
833
913
  theme: Default.scrollbarTheme,
package/dist/UI/timeline.html CHANGED
@@ -4,12 +4,14 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Timeline Elements</title>
7
+
7
8
  <!--begin::Accessibility Meta Tags-->
8
9
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
10
  <meta name="color-scheme" content="light dark" />
10
11
  <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
12
  <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
13
  <!--end::Accessibility Meta Tags-->
14
+
13
15
  <!--begin::Primary Meta Tags-->
14
16
  <meta name="title" content="AdminLTE 4 | Timeline Elements" />
15
17
  <meta name="author" content="ColorlibHQ" />
@@ -22,11 +24,13 @@
22
24
  content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
23
25
  />
24
26
  <!--end::Primary Meta Tags-->
27
+
25
28
  <!--begin::Accessibility Features-->
26
29
  <!-- Skip links will be dynamically added by accessibility.js -->
27
30
  <meta name="supported-color-schemes" content="light dark" />
28
31
  <link rel="preload" href="../css/adminlte.css" as="style" />
29
32
  <!--end::Accessibility Features-->
33
+
30
34
  <!--begin::Fonts-->
31
35
  <link
32
36
  rel="stylesheet"
@@ -34,9 +38,10 @@
34
38
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
35
39
  crossorigin="anonymous"
36
40
  media="print"
37
- onload="this.media='all'"
41
+ onload="this.media = 'all'"
38
42
  />
39
43
  <!--end::Fonts-->
44
+
40
45
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
41
46
  <link
42
47
  rel="stylesheet"
@@ -44,6 +49,7 @@
44
49
  crossorigin="anonymous"
45
50
  />
46
51
  <!--end::Third Party Plugin(OverlayScrollbars)-->
52
+
47
53
  <!--begin::Third Party Plugin(Bootstrap Icons)-->
48
54
  <link
49
55
  rel="stylesheet"
@@ -51,13 +57,14 @@
51
57
  crossorigin="anonymous"
52
58
  />
53
59
  <!--end::Third Party Plugin(Bootstrap Icons)-->
60
+
54
61
  <!--begin::Required Plugin(AdminLTE)-->
55
62
  <link rel="stylesheet" href="../css/adminlte.css" />
56
63
  <!--end::Required Plugin(AdminLTE)-->
57
64
  </head>
58
65
  <!--end::Head-->
59
66
  <!--begin::Body-->
60
- <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
67
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
61
68
  <!--begin::App Wrapper-->
62
69
  <div class="app-wrapper">
63
70
  <!--begin::Header-->
@@ -71,10 +78,15 @@
71
78
  <i class="bi bi-list"></i>
72
79
  </a>
73
80
  </li>
74
- <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Home</a></li>
75
- <li class="nav-item d-none d-md-block"><a href="#" class="nav-link">Contact</a></li>
81
+ <li class="nav-item d-none d-md-block">
82
+ <a href="#" class="nav-link">Home</a>
83
+ </li>
84
+ <li class="nav-item d-none d-md-block">
85
+ <a href="#" class="nav-link">Contact</a>
86
+ </li>
76
87
  </ul>
77
88
  <!--end::Start Navbar Links-->
89
+
78
90
  <!--begin::End Navbar Links-->
79
91
  <ul class="navbar-nav ms-auto">
80
92
  <!--begin::Navbar Search-->
@@ -84,6 +96,7 @@
84
96
  </a>
85
97
  </li>
86
98
  <!--end::Navbar Search-->
99
+
87
100
  <!--begin::Messages Dropdown Menu-->
88
101
  <li class="nav-item dropdown">
89
102
  <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -173,6 +186,7 @@
173
186
  </div>
174
187
  </li>
175
188
  <!--end::Messages Dropdown Menu-->
189
+
176
190
  <!--begin::Notifications Dropdown Menu-->
177
191
  <li class="nav-item dropdown">
178
192
  <a class="nav-link" data-bs-toggle="dropdown" href="#">
@@ -201,6 +215,7 @@
201
215
  </div>
202
216
  </li>
203
217
  <!--end::Notifications Dropdown Menu-->
218
+
204
219
  <!--begin::Fullscreen Toggle-->
205
220
  <li class="nav-item">
206
221
  <a class="nav-link" href="#" data-lte-toggle="fullscreen">
@@ -209,6 +224,7 @@
209
224
  </a>
210
225
  </li>
211
226
  <!--end::Fullscreen Toggle-->
227
+
212
228
  <!--begin::User Menu Dropdown-->
213
229
  <li class="nav-item dropdown user-menu">
214
230
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -237,17 +253,23 @@
237
253
  <li class="user-body">
238
254
  <!--begin::Row-->
239
255
  <div class="row">
240
- <div class="col-4 text-center"><a href="#">Followers</a></div>
241
- <div class="col-4 text-center"><a href="#">Sales</a></div>
242
- <div class="col-4 text-center"><a href="#">Friends</a></div>
256
+ <div class="col-4 text-center">
257
+ <a href="#">Followers</a>
258
+ </div>
259
+ <div class="col-4 text-center">
260
+ <a href="#">Sales</a>
261
+ </div>
262
+ <div class="col-4 text-center">
263
+ <a href="#">Friends</a>
264
+ </div>
243
265
  </div>
244
266
  <!--end::Row-->
245
267
  </li>
246
268
  <!--end::Menu Body-->
247
269
  <!--begin::Menu Footer-->
248
270
  <li class="user-footer">
249
- <a href="#" class="btn btn-default btn-flat">Profile</a>
250
- <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
271
+ <a href="#" class="btn btn-outline-secondary">Profile</a>
272
+ <a href="#" class="btn btn-outline-danger float-end">Sign out</a>
251
273
  </li>
252
274
  <!--end::Menu Footer-->
253
275
  </ul>
@@ -360,7 +382,7 @@
360
382
  <i class="nav-icon bi bi-clipboard-fill"></i>
361
383
  <p>
362
384
  Layout Options
363
- <span class="nav-badge badge text-bg-secondary me-3">6</span>
385
+ <span class="nav-badge badge text-bg-secondary me-3">7</span>
364
386
  <i class="nav-arrow bi bi-chevron-right"></i>
365
387
  </p>
366
388
  </a>
@@ -413,6 +435,12 @@
413
435
  <p>Sidebar Mini <small>+ Collapsed</small></p>
414
436
  </a>
415
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>
416
444
  <li class="nav-item">
417
445
  <a href="../layout/logo-switch.html" class="nav-link">
418
446
  <i class="nav-icon bi bi-circle"></i>
@@ -490,6 +518,7 @@
490
518
  </li>
491
519
  </ul>
492
520
  </li>
521
+
493
522
  <li class="nav-header">EXAMPLES</li>
494
523
  <li class="nav-item">
495
524
  <a href="#" class="nav-link">
@@ -554,6 +583,7 @@
554
583
  </li>
555
584
  </ul>
556
585
  </li>
586
+
557
587
  <li class="nav-header">DOCUMENTATIONS</li>
558
588
  <li class="nav-item">
559
589
  <a href="../docs/introduction.html" class="nav-link">
@@ -605,12 +635,48 @@
605
635
  </p>
606
636
  </a>
607
637
  <ul class="nav nav-treeview">
638
+ <li class="nav-item">
639
+ <a href="../docs/javascript/layout.html" class="nav-link">
640
+ <i class="nav-icon bi bi-circle"></i>
641
+ <p>Layout</p>
642
+ </a>
643
+ </li>
644
+ <li class="nav-item">
645
+ <a href="../docs/javascript/pushmenu.html" class="nav-link">
646
+ <i class="nav-icon bi bi-circle"></i>
647
+ <p>PushMenu</p>
648
+ </a>
649
+ </li>
608
650
  <li class="nav-item">
609
651
  <a href="../docs/javascript/treeview.html" class="nav-link">
610
652
  <i class="nav-icon bi bi-circle"></i>
611
653
  <p>Treeview</p>
612
654
  </a>
613
655
  </li>
656
+ <li class="nav-item">
657
+ <a href="../docs/javascript/card-widget.html" class="nav-link">
658
+ <i class="nav-icon bi bi-circle"></i>
659
+ <p>Card Widget</p>
660
+ </a>
661
+ </li>
662
+ <li class="nav-item">
663
+ <a href="../docs/javascript/direct-chat.html" class="nav-link">
664
+ <i class="nav-icon bi bi-circle"></i>
665
+ <p>Direct Chat</p>
666
+ </a>
667
+ </li>
668
+ <li class="nav-item">
669
+ <a href="../docs/javascript/fullscreen.html" class="nav-link">
670
+ <i class="nav-icon bi bi-circle"></i>
671
+ <p>Fullscreen</p>
672
+ </a>
673
+ </li>
674
+ <li class="nav-item">
675
+ <a href="../docs/javascript/accessibility.html" class="nav-link">
676
+ <i class="nav-icon bi bi-circle"></i>
677
+ <p>Accessibility</p>
678
+ </a>
679
+ </li>
614
680
  </ul>
615
681
  </li>
616
682
  <li class="nav-item">
@@ -637,6 +703,7 @@
637
703
  <p>License</p>
638
704
  </a>
639
705
  </li>
706
+
640
707
  <li class="nav-header">MULTI LEVEL EXAMPLE</li>
641
708
  <li class="nav-item">
642
709
  <a href="#" class="nav-link">
@@ -702,6 +769,7 @@
702
769
  <p>Level 1</p>
703
770
  </a>
704
771
  </li>
772
+
705
773
  <li class="nav-header">LABELS</li>
706
774
  <li class="nav-item">
707
775
  <a href="#" class="nav-link">
@@ -736,7 +804,9 @@
736
804
  <div class="container-fluid">
737
805
  <!--begin::Row-->
738
806
  <div class="row">
739
- <div class="col-sm-6"><h3 class="mb-0">Timeline</h3></div>
807
+ <div class="col-sm-6">
808
+ <h3 class="mb-0">Timeline</h3>
809
+ </div>
740
810
  <div class="col-sm-6">
741
811
  <ol class="breadcrumb float-sm-end">
742
812
  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -759,16 +829,19 @@
759
829
  <!-- The time line -->
760
830
  <div class="timeline">
761
831
  <!-- timeline time label -->
762
- <div class="time-label"><span class="text-bg-danger">10 Feb. 2023</span></div>
832
+ <div class="time-label">
833
+ <span class="text-bg-danger">10 Feb. 2023</span>
834
+ </div>
763
835
  <!-- /.timeline-label -->
764
836
  <!-- timeline item -->
765
837
  <div>
766
- <i class="timeline-icon bi bi-envelope text-bg-primary"></i>
838
+ <i class="timeline-icon bi bi-envelope text-bg-primary"> </i>
767
839
  <div class="timeline-item">
768
840
  <span class="time"> <i class="bi bi-clock-fill"></i> 12:05 </span>
769
841
  <h3 class="timeline-header">
770
842
  <a href="#">Support Team</a> sent you an email
771
843
  </h3>
844
+
772
845
  <div class="timeline-body">
773
846
  Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning
774
847
  heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo
@@ -784,7 +857,7 @@
784
857
  <!-- END timeline item -->
785
858
  <!-- timeline item -->
786
859
  <div>
787
- <i class="timeline-icon bi bi-person text-bg-success"></i>
860
+ <i class="timeline-icon bi bi-person text-bg-success"> </i>
788
861
  <div class="timeline-item">
789
862
  <span class="time"> <i class="bi bi-clock-fill"></i> 5 mins ago </span>
790
863
  <h3 class="timeline-header no-border">
@@ -795,7 +868,7 @@
795
868
  <!-- END timeline item -->
796
869
  <!-- timeline item -->
797
870
  <div>
798
- <i class="timeline-icon bi bi-chat-text-fill text-bg-warning"></i>
871
+ <i class="timeline-icon bi bi-chat-text-fill text-bg-warning"> </i>
799
872
  <div class="timeline-item">
800
873
  <span class="time"> <i class="bi bi-clock-fill"></i> 27 mins ago </span>
801
874
  <h3 class="timeline-header">
@@ -812,11 +885,13 @@
812
885
  </div>
813
886
  <!-- END timeline item -->
814
887
  <!-- timeline time label -->
815
- <div class="time-label"><span class="text-bg-success">3 Jan. 2023</span></div>
888
+ <div class="time-label">
889
+ <span class="text-bg-success">3 Jan. 2023</span>
890
+ </div>
816
891
  <!-- /.timeline-label -->
817
892
  <!-- timeline item -->
818
893
  <div>
819
- <i class="timeline-icon bi bi-camera text-bg-primary"></i>
894
+ <i class="timeline-icon bi bi-camera text-bg-primary"> </i>
820
895
  <div class="timeline-item">
821
896
  <span class="time"> <i class="bi bi-clock-fill"></i> 2 days ago </span>
822
897
  <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
@@ -832,9 +907,12 @@
832
907
  <!-- timeline item -->
833
908
  <div>
834
909
  <i class="timeline-icon bi bi-camera-film text-bg-info"></i>
910
+
835
911
  <div class="timeline-item">
836
912
  <span class="time"> <i class="bi bi-clock-fill"></i> 5 days ago </span>
913
+
837
914
  <h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
915
+
838
916
  <div class="timeline-body">
839
917
  <div class="ratio ratio-16x9">
840
918
  <iframe
@@ -849,7 +927,9 @@
849
927
  </div>
850
928
  </div>
851
929
  <!-- END timeline item -->
852
- <div><i class="timeline-icon bi bi-clock-fill text-bg-secondary"></i></div>
930
+ <div>
931
+ <i class="timeline-icon bi bi-clock-fill text-bg-secondary"> </i>
932
+ </div>
853
933
  </div>
854
934
  </div>
855
935
  <!-- /.col -->
@@ -868,7 +948,7 @@
868
948
  <!--end::To the end-->
869
949
  <!--begin::Copyright-->
870
950
  <strong>
871
- Copyright &copy; 2014-2025&nbsp;
951
+ Copyright &copy; 2014-2026&nbsp;
872
952
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
873
953
  </strong>
874
954
  All rights reserved.
@@ -905,7 +985,15 @@
905
985
  };
906
986
  document.addEventListener('DOMContentLoaded', function () {
907
987
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
908
- if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
988
+
989
+ // Disable OverlayScrollbars on mobile devices to prevent touch interference
990
+ const isMobile = window.innerWidth <= 992;
991
+
992
+ if (
993
+ sidebarWrapper &&
994
+ OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
995
+ !isMobile
996
+ ) {
909
997
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
910
998
  scrollbars: {
911
999
  theme: Default.scrollbarTheme,