admin-lte 4.0.0-rc4 → 4.0.0-rc6

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 (69) hide show
  1. package/.browserslistrc +1 -0
  2. package/.claude/settings.local.json +22 -17
  3. package/CHANGELOG.md +95 -0
  4. package/CLAUDE.md +61 -88
  5. package/README.md +76 -19
  6. package/SECURITY.md +99 -0
  7. package/dist/UI/general.html +219 -70
  8. package/dist/UI/icons.html +50 -12
  9. package/dist/UI/timeline.html +64 -18
  10. package/dist/css/adminlte.css +102 -112
  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 +102 -112
  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 +47 -11
  19. package/dist/docs/color-mode.html +63 -23
  20. package/dist/docs/components/main-header.html +67 -17
  21. package/dist/docs/components/main-sidebar.html +47 -11
  22. package/dist/docs/faq.html +47 -11
  23. package/dist/docs/how-to-contribute.html +47 -11
  24. package/dist/docs/introduction.html +47 -11
  25. package/dist/docs/javascript/pushmenu.html +876 -0
  26. package/dist/docs/javascript/treeview.html +47 -11
  27. package/dist/docs/layout.html +49 -11
  28. package/dist/docs/license.html +47 -11
  29. package/dist/examples/lockscreen.html +22 -2
  30. package/dist/examples/login-v2.html +30 -5
  31. package/dist/examples/login.html +30 -5
  32. package/dist/examples/register-v2.html +30 -5
  33. package/dist/examples/register.html +30 -5
  34. package/dist/forms/general.html +70 -17
  35. package/dist/generate/theme.html +58 -14
  36. package/dist/index.html +83 -14
  37. package/dist/index2.html +151 -31
  38. package/dist/index3.html +94 -23
  39. package/dist/js/adminlte.js +102 -16
  40. package/dist/js/adminlte.js.map +1 -1
  41. package/dist/js/adminlte.min.js +2 -2
  42. package/dist/js/adminlte.min.js.map +1 -1
  43. package/dist/layout/collapsed-sidebar.html +47 -10
  44. package/dist/layout/fixed-complete.html +49 -13
  45. package/dist/layout/fixed-footer.html +48 -11
  46. package/dist/layout/fixed-header.html +48 -11
  47. package/dist/layout/fixed-sidebar.html +49 -11
  48. package/dist/layout/layout-custom-area.html +58 -13
  49. package/dist/layout/layout-rtl.html +48 -11
  50. package/dist/layout/logo-switch.html +43 -10
  51. package/dist/layout/sidebar-mini.html +47 -10
  52. package/dist/layout/unfixed-sidebar.html +48 -11
  53. package/dist/tables/simple.html +119 -34
  54. package/dist/widgets/cards.html +62 -11
  55. package/dist/widgets/info-box.html +134 -28
  56. package/dist/widgets/small-box.html +51 -11
  57. package/index.html +1 -1
  58. package/package.json +26 -26
  59. package/src/scss/_accessibility.scss +0 -6
  60. package/src/scss/_app-sidebar.scss +7 -1
  61. package/src/scss/_cards.scss +6 -4
  62. package/src/scss/_dropdown.scss +5 -28
  63. package/src/scss/adminlte.scss +1 -1
  64. package/src/ts/accessibility.ts +13 -5
  65. package/src/ts/adminlte.ts +1 -1
  66. package/src/ts/card-widget.ts +4 -2
  67. package/src/ts/push-menu.ts +81 -7
  68. package/src/ts/treeview.ts +19 -1
  69. package/README 2.md +0 -106
@@ -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 | General UI 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 | General UI 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>
@@ -490,6 +512,7 @@
490
512
  </li>
491
513
  </ul>
492
514
  </li>
515
+
493
516
  <li class="nav-header">EXAMPLES</li>
494
517
  <li class="nav-item">
495
518
  <a href="#" class="nav-link">
@@ -554,6 +577,7 @@
554
577
  </li>
555
578
  </ul>
556
579
  </li>
580
+
557
581
  <li class="nav-header">DOCUMENTATIONS</li>
558
582
  <li class="nav-item">
559
583
  <a href="../docs/introduction.html" class="nav-link">
@@ -637,6 +661,7 @@
637
661
  <p>License</p>
638
662
  </a>
639
663
  </li>
664
+
640
665
  <li class="nav-header">MULTI LEVEL EXAMPLE</li>
641
666
  <li class="nav-item">
642
667
  <a href="#" class="nav-link">
@@ -702,6 +727,7 @@
702
727
  <p>Level 1</p>
703
728
  </a>
704
729
  </li>
730
+
705
731
  <li class="nav-header">LABELS</li>
706
732
  <li class="nav-item">
707
733
  <a href="#" class="nav-link">
@@ -736,7 +762,9 @@
736
762
  <div class="container-fluid">
737
763
  <!--begin::Row-->
738
764
  <div class="row">
739
- <div class="col-sm-6"><h3 class="mb-0">General UI Elements</h3></div>
765
+ <div class="col-sm-6">
766
+ <h3 class="mb-0">General UI Elements</h3>
767
+ </div>
740
768
  <div class="col-sm-6">
741
769
  <ol class="breadcrumb float-sm-end">
742
770
  <li class="breadcrumb-item"><a href="#">Home</a></li>
@@ -775,7 +803,9 @@
775
803
  <!--begin::Accordion-->
776
804
  <div class="card card-primary card-outline mb-4">
777
805
  <!--begin::Header-->
778
- <div class="card-header"><div class="card-title">Accordion</div></div>
806
+ <div class="card-header">
807
+ <div class="card-title">Accordion</div>
808
+ </div>
779
809
  <!--end::Header-->
780
810
  <!--begin::Body-->
781
811
  <div class="card-body">
@@ -877,7 +907,9 @@
877
907
  <!--begin::Alert-->
878
908
  <div class="card card-success card-outline mb-4">
879
909
  <!--begin::Header-->
880
- <div class="card-header"><div class="card-title">Alert</div></div>
910
+ <div class="card-header">
911
+ <div class="card-title">Alert</div>
912
+ </div>
881
913
  <!--end::Header-->
882
914
  <!--begin::Body-->
883
915
  <div class="card-body">
@@ -924,7 +956,9 @@
924
956
  <!--begin::Badge-->
925
957
  <div class="card card-warning card-outline mb-4">
926
958
  <!--begin::Header-->
927
- <div class="card-header"><div class="card-title">Badge</div></div>
959
+ <div class="card-header">
960
+ <div class="card-title">Badge</div>
961
+ </div>
928
962
  <!--end::Header-->
929
963
  <!--begin::Body-->
930
964
  <div class="card-body">
@@ -982,7 +1016,9 @@
982
1016
  <!--begin::Button-->
983
1017
  <div class="card card-danger card-outline mb-4">
984
1018
  <!--begin::Header-->
985
- <div class="card-header"><div class="card-title">Button</div></div>
1019
+ <div class="card-header">
1020
+ <div class="card-title">Button</div>
1021
+ </div>
986
1022
  <!--end::Header-->
987
1023
  <!--begin::Body-->
988
1024
  <div class="card-body">
@@ -1048,7 +1084,9 @@
1048
1084
  <!--begin::Button Group-->
1049
1085
  <div class="card card-info card-outline mb-4">
1050
1086
  <!--begin::Header-->
1051
- <div class="card-header"><div class="card-title">Button Group</div></div>
1087
+ <div class="card-header">
1088
+ <div class="card-title">Button Group</div>
1089
+ </div>
1052
1090
  <!--end::Header-->
1053
1091
  <!--begin::Body-->
1054
1092
  <div class="card-body">
@@ -1079,8 +1117,10 @@
1079
1117
  >
1080
1118
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" />
1081
1119
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
1120
+
1082
1121
  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off" />
1083
1122
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
1123
+
1084
1124
  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off" />
1085
1125
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
1086
1126
  </div>
@@ -1098,6 +1138,7 @@
1098
1138
  checked
1099
1139
  />
1100
1140
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
1141
+
1101
1142
  <input
1102
1143
  type="radio"
1103
1144
  class="btn-check"
@@ -1106,6 +1147,7 @@
1106
1147
  autocomplete="off"
1107
1148
  />
1108
1149
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
1150
+
1109
1151
  <input
1110
1152
  type="radio"
1111
1153
  class="btn-check"
@@ -1133,8 +1175,12 @@
1133
1175
  Dropdown
1134
1176
  </button>
1135
1177
  <ul class="dropdown-menu">
1136
- <li><a class="dropdown-item" href="#">Dropdown link</a></li>
1137
- <li><a class="dropdown-item" href="#">Dropdown link</a></li>
1178
+ <li>
1179
+ <a class="dropdown-item" href="#">Dropdown link</a>
1180
+ </li>
1181
+ <li>
1182
+ <a class="dropdown-item" href="#">Dropdown link</a>
1183
+ </li>
1138
1184
  </ul>
1139
1185
  </div>
1140
1186
  </div>
@@ -1145,7 +1191,9 @@
1145
1191
  <!--begin::Collapse-->
1146
1192
  <div class="card card-primary card-outline mb-4">
1147
1193
  <!--begin::Header-->
1148
- <div class="card-header"><div class="card-title">Collapse</div></div>
1194
+ <div class="card-header">
1195
+ <div class="card-title">Collapse</div>
1196
+ </div>
1149
1197
  <!--end::Header-->
1150
1198
  <!--begin::Body-->
1151
1199
  <div class="card-body">
@@ -1184,7 +1232,9 @@
1184
1232
  <!--begin::Dropdowns-->
1185
1233
  <div class="card card-success card-outline mb-4">
1186
1234
  <!--begin::Header-->
1187
- <div class="card-header"><div class="card-title">Dropdowns</div></div>
1235
+ <div class="card-header">
1236
+ <div class="card-title">Dropdowns</div>
1237
+ </div>
1188
1238
  <!--end::Header-->
1189
1239
  <!--begin::Body-->
1190
1240
  <div class="card-body">
@@ -1199,10 +1249,18 @@
1199
1249
  </button>
1200
1250
  <ul class="dropdown-menu">
1201
1251
  <li><a class="dropdown-item" href="#">Action</a></li>
1202
- <li><a class="dropdown-item" href="#">Another action</a></li>
1203
- <li><a class="dropdown-item" href="#">Something else here</a></li>
1204
- <li><hr class="dropdown-divider" /></li>
1205
- <li><a class="dropdown-item" href="#">Separated link</a></li>
1252
+ <li>
1253
+ <a class="dropdown-item" href="#">Another action</a>
1254
+ </li>
1255
+ <li>
1256
+ <a class="dropdown-item" href="#">Something else here</a>
1257
+ </li>
1258
+ <li>
1259
+ <hr class="dropdown-divider" />
1260
+ </li>
1261
+ <li>
1262
+ <a class="dropdown-item" href="#">Separated link</a>
1263
+ </li>
1206
1264
  </ul>
1207
1265
  </div>
1208
1266
  <div class="btn-group">
@@ -1216,10 +1274,18 @@
1216
1274
  </button>
1217
1275
  <ul class="dropdown-menu">
1218
1276
  <li><a class="dropdown-item" href="#">Action</a></li>
1219
- <li><a class="dropdown-item" href="#">Another action</a></li>
1220
- <li><a class="dropdown-item" href="#">Something else here</a></li>
1221
- <li><hr class="dropdown-divider" /></li>
1222
- <li><a class="dropdown-item" href="#">Separated link</a></li>
1277
+ <li>
1278
+ <a class="dropdown-item" href="#">Another action</a>
1279
+ </li>
1280
+ <li>
1281
+ <a class="dropdown-item" href="#">Something else here</a>
1282
+ </li>
1283
+ <li>
1284
+ <hr class="dropdown-divider" />
1285
+ </li>
1286
+ <li>
1287
+ <a class="dropdown-item" href="#">Separated link</a>
1288
+ </li>
1223
1289
  </ul>
1224
1290
  </div>
1225
1291
  <hr />
@@ -1235,10 +1301,18 @@
1235
1301
  </button>
1236
1302
  <ul class="dropdown-menu">
1237
1303
  <li><a class="dropdown-item" href="#">Action</a></li>
1238
- <li><a class="dropdown-item" href="#">Another action</a></li>
1239
- <li><a class="dropdown-item" href="#">Something else here</a></li>
1240
- <li><hr class="dropdown-divider" /></li>
1241
- <li><a class="dropdown-item" href="#">Separated link</a></li>
1304
+ <li>
1305
+ <a class="dropdown-item" href="#">Another action</a>
1306
+ </li>
1307
+ <li>
1308
+ <a class="dropdown-item" href="#">Something else here</a>
1309
+ </li>
1310
+ <li>
1311
+ <hr class="dropdown-divider" />
1312
+ </li>
1313
+ <li>
1314
+ <a class="dropdown-item" href="#">Separated link</a>
1315
+ </li>
1242
1316
  </ul>
1243
1317
  </div>
1244
1318
  <div class="btn-group">
@@ -1253,10 +1327,18 @@
1253
1327
  </button>
1254
1328
  <ul class="dropdown-menu">
1255
1329
  <li><a class="dropdown-item" href="#">Action</a></li>
1256
- <li><a class="dropdown-item" href="#">Another action</a></li>
1257
- <li><a class="dropdown-item" href="#">Something else here</a></li>
1258
- <li><hr class="dropdown-divider" /></li>
1259
- <li><a class="dropdown-item" href="#">Separated link</a></li>
1330
+ <li>
1331
+ <a class="dropdown-item" href="#">Another action</a>
1332
+ </li>
1333
+ <li>
1334
+ <a class="dropdown-item" href="#">Something else here</a>
1335
+ </li>
1336
+ <li>
1337
+ <hr class="dropdown-divider" />
1338
+ </li>
1339
+ <li>
1340
+ <a class="dropdown-item" href="#">Separated link</a>
1341
+ </li>
1260
1342
  </ul>
1261
1343
  </div>
1262
1344
  </div>
@@ -1266,7 +1348,9 @@
1266
1348
  <!--begin::List Group-->
1267
1349
  <div class="card card-warning card-outline mb-4">
1268
1350
  <!--begin::Header-->
1269
- <div class="card-header"><div class="card-title">List Group</div></div>
1351
+ <div class="card-header">
1352
+ <div class="card-title">List Group</div>
1353
+ </div>
1270
1354
  <!--end::Header-->
1271
1355
  <!--begin::Body-->
1272
1356
  <div class="card-body">
@@ -1300,7 +1384,9 @@
1300
1384
  <!--begin::Navbar-->
1301
1385
  <div class="card card-danger card-outline mb-4">
1302
1386
  <!--begin::Header-->
1303
- <div class="card-header"><div class="card-title">Navbar</div></div>
1387
+ <div class="card-header">
1388
+ <div class="card-title">Navbar</div>
1389
+ </div>
1304
1390
  <!--end::Header-->
1305
1391
  <!--begin::Body-->
1306
1392
  <div class="card-body">
@@ -1323,7 +1409,9 @@
1323
1409
  <li class="nav-item">
1324
1410
  <a class="nav-link active" aria-current="page" href="#">Home</a>
1325
1411
  </li>
1326
- <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
1412
+ <li class="nav-item">
1413
+ <a class="nav-link" href="#">Link</a>
1414
+ </li>
1327
1415
  <li class="nav-item dropdown">
1328
1416
  <a
1329
1417
  class="nav-link dropdown-toggle"
@@ -1335,10 +1423,18 @@
1335
1423
  Dropdown
1336
1424
  </a>
1337
1425
  <ul class="dropdown-menu">
1338
- <li><a class="dropdown-item" href="#">Action</a></li>
1339
- <li><a class="dropdown-item" href="#">Another action</a></li>
1340
- <li><hr class="dropdown-divider" /></li>
1341
- <li><a class="dropdown-item" href="#">Something else here</a></li>
1426
+ <li>
1427
+ <a class="dropdown-item" href="#">Action</a>
1428
+ </li>
1429
+ <li>
1430
+ <a class="dropdown-item" href="#">Another action</a>
1431
+ </li>
1432
+ <li>
1433
+ <hr class="dropdown-divider" />
1434
+ </li>
1435
+ <li>
1436
+ <a class="dropdown-item" href="#">Something else here</a>
1437
+ </li>
1342
1438
  </ul>
1343
1439
  </li>
1344
1440
  <li class="nav-item">
@@ -1364,17 +1460,29 @@
1364
1460
  <!--begin::Pagination-->
1365
1461
  <div class="card card-info card-outline mb-4">
1366
1462
  <!--begin::Header-->
1367
- <div class="card-header"><div class="card-title">Pagination</div></div>
1463
+ <div class="card-header">
1464
+ <div class="card-title">Pagination</div>
1465
+ </div>
1368
1466
  <!--end::Header-->
1369
1467
  <!--begin::Body-->
1370
1468
  <div class="card-body">
1371
1469
  <nav aria-label="Page navigation example">
1372
1470
  <ul class="pagination">
1373
- <li class="page-item"><a class="page-link" href="#">Previous</a></li>
1374
- <li class="page-item"><a class="page-link" href="#">1</a></li>
1375
- <li class="page-item"><a class="page-link" href="#">2</a></li>
1376
- <li class="page-item"><a class="page-link" href="#">3</a></li>
1377
- <li class="page-item"><a class="page-link" href="#">Next</a></li>
1471
+ <li class="page-item">
1472
+ <a class="page-link" href="#">Previous</a>
1473
+ </li>
1474
+ <li class="page-item">
1475
+ <a class="page-link" href="#">1</a>
1476
+ </li>
1477
+ <li class="page-item">
1478
+ <a class="page-link" href="#">2</a>
1479
+ </li>
1480
+ <li class="page-item">
1481
+ <a class="page-link" href="#">3</a>
1482
+ </li>
1483
+ <li class="page-item">
1484
+ <a class="page-link" href="#">Next</a>
1485
+ </li>
1378
1486
  </ul>
1379
1487
  </nav>
1380
1488
  <hr />
@@ -1385,9 +1493,15 @@
1385
1493
  <span aria-hidden="true">&laquo;</span>
1386
1494
  </a>
1387
1495
  </li>
1388
- <li class="page-item"><a class="page-link" href="#">1</a></li>
1389
- <li class="page-item"><a class="page-link" href="#">2</a></li>
1390
- <li class="page-item"><a class="page-link" href="#">3</a></li>
1496
+ <li class="page-item">
1497
+ <a class="page-link" href="#">1</a>
1498
+ </li>
1499
+ <li class="page-item">
1500
+ <a class="page-link" href="#">2</a>
1501
+ </li>
1502
+ <li class="page-item">
1503
+ <a class="page-link" href="#">3</a>
1504
+ </li>
1391
1505
  <li class="page-item">
1392
1506
  <a class="page-link" href="#" aria-label="Next">
1393
1507
  <span aria-hidden="true">&raquo;</span>
@@ -1398,13 +1512,21 @@
1398
1512
  <hr />
1399
1513
  <nav aria-label="...">
1400
1514
  <ul class="pagination">
1401
- <li class="page-item disabled"><a class="page-link">Previous</a></li>
1515
+ <li class="page-item disabled">
1516
+ <a class="page-link">Previous</a>
1517
+ </li>
1402
1518
  <li class="page-item active" aria-current="page">
1403
1519
  <a class="page-link" href="#">1</a>
1404
1520
  </li>
1405
- <li class="page-item"><a class="page-link" href="#">2</a></li>
1406
- <li class="page-item"><a class="page-link" href="#">3</a></li>
1407
- <li class="page-item"><a class="page-link" href="#">Next</a></li>
1521
+ <li class="page-item">
1522
+ <a class="page-link" href="#">2</a>
1523
+ </li>
1524
+ <li class="page-item">
1525
+ <a class="page-link" href="#">3</a>
1526
+ </li>
1527
+ <li class="page-item">
1528
+ <a class="page-link" href="#">Next</a>
1529
+ </li>
1408
1530
  </ul>
1409
1531
  </nav>
1410
1532
  </div>
@@ -1414,7 +1536,9 @@
1414
1536
  <!--begin::Placeholder-->
1415
1537
  <div class="card card-secondary card-outline mb-4">
1416
1538
  <!--begin::Header-->
1417
- <div class="card-header"><div class="card-title">Placeholder</div></div>
1539
+ <div class="card-header">
1540
+ <div class="card-title">Placeholder</div>
1541
+ </div>
1418
1542
  <!--end::Header-->
1419
1543
  <!--begin::Body-->
1420
1544
  <div class="card-body">
@@ -1439,7 +1563,9 @@
1439
1563
  <!--begin::Progress-->
1440
1564
  <div class="card card-primary card-outline mb-4">
1441
1565
  <!--begin::Header-->
1442
- <div class="card-header"><div class="card-title">Progress</div></div>
1566
+ <div class="card-header">
1567
+ <div class="card-title">Progress</div>
1568
+ </div>
1443
1569
  <!--end::Header-->
1444
1570
  <!--begin::Body-->
1445
1571
  <div class="card-body">
@@ -1512,7 +1638,9 @@
1512
1638
  <!--begin::Toast-->
1513
1639
  <div class="card card-primary card-outline mb-4">
1514
1640
  <!--begin::Header-->
1515
- <div class="card-header"><div class="card-title">Toast</div></div>
1641
+ <div class="card-header">
1642
+ <div class="card-title">Toast</div>
1643
+ </div>
1516
1644
  <!--end::Header-->
1517
1645
  <!--begin::Body-->
1518
1646
  <div class="card-body">
@@ -1599,7 +1727,8 @@
1599
1727
  >
1600
1728
  <div class="toast-header">
1601
1729
  <i class="bi bi-circle me-2"></i>
1602
- <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1730
+ <strong class="me-auto">Bootstrap</strong>
1731
+ <small>11 mins ago</small>
1603
1732
  <button
1604
1733
  type="button"
1605
1734
  class="btn-close"
@@ -1618,7 +1747,8 @@
1618
1747
  >
1619
1748
  <div class="toast-header">
1620
1749
  <i class="bi bi-circle me-2"></i>
1621
- <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1750
+ <strong class="me-auto">Bootstrap</strong>
1751
+ <small>11 mins ago</small>
1622
1752
  <button
1623
1753
  type="button"
1624
1754
  class="btn-close"
@@ -1637,7 +1767,8 @@
1637
1767
  >
1638
1768
  <div class="toast-header">
1639
1769
  <i class="bi bi-circle me-2"></i>
1640
- <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1770
+ <strong class="me-auto">Bootstrap</strong>
1771
+ <small>11 mins ago</small>
1641
1772
  <button
1642
1773
  type="button"
1643
1774
  class="btn-close"
@@ -1656,7 +1787,8 @@
1656
1787
  >
1657
1788
  <div class="toast-header">
1658
1789
  <i class="bi bi-circle me-2"></i>
1659
- <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1790
+ <strong class="me-auto">Bootstrap</strong>
1791
+ <small>11 mins ago</small>
1660
1792
  <button
1661
1793
  type="button"
1662
1794
  class="btn-close"
@@ -1675,7 +1807,8 @@
1675
1807
  >
1676
1808
  <div class="toast-header">
1677
1809
  <i class="bi bi-circle me-2"></i>
1678
- <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1810
+ <strong class="me-auto">Bootstrap</strong>
1811
+ <small>11 mins ago</small>
1679
1812
  <button
1680
1813
  type="button"
1681
1814
  class="btn-close"
@@ -1694,7 +1827,8 @@
1694
1827
  >
1695
1828
  <div class="toast-header">
1696
1829
  <i class="bi bi-circle me-2"></i>
1697
- <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1830
+ <strong class="me-auto">Bootstrap</strong>
1831
+ <small>11 mins ago</small>
1698
1832
  <button
1699
1833
  type="button"
1700
1834
  class="btn-close"
@@ -1713,7 +1847,8 @@
1713
1847
  >
1714
1848
  <div class="toast-header">
1715
1849
  <i class="bi bi-circle me-2"></i>
1716
- <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1850
+ <strong class="me-auto">Bootstrap</strong>
1851
+ <small>11 mins ago</small>
1717
1852
  <button
1718
1853
  type="button"
1719
1854
  class="btn-close"
@@ -1732,7 +1867,8 @@
1732
1867
  >
1733
1868
  <div class="toast-header">
1734
1869
  <i class="bi bi-circle me-2"></i>
1735
- <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1870
+ <strong class="me-auto">Bootstrap</strong>
1871
+ <small>11 mins ago</small>
1736
1872
  <button
1737
1873
  type="button"
1738
1874
  class="btn-close"
@@ -1751,7 +1887,8 @@
1751
1887
  >
1752
1888
  <div class="toast-header">
1753
1889
  <i class="bi bi-circle me-2"></i>
1754
- <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small>
1890
+ <strong class="me-auto">Bootstrap</strong>
1891
+ <small>11 mins ago</small>
1755
1892
  <button
1756
1893
  type="button"
1757
1894
  class="btn-close"
@@ -1769,7 +1906,9 @@
1769
1906
  <!--begin::Tooltip-->
1770
1907
  <div class="card card-primary card-outline mb-4">
1771
1908
  <!--begin::Header-->
1772
- <div class="card-header"><div class="card-title">Tooltip</div></div>
1909
+ <div class="card-header">
1910
+ <div class="card-title">Tooltip</div>
1911
+ </div>
1773
1912
  <!--end::Header-->
1774
1913
  <!--begin::Body-->
1775
1914
  <div class="card-body">
@@ -1800,7 +1939,9 @@
1800
1939
  <!--begin::Spinner-->
1801
1940
  <div class="card card-success card-outline mb-4">
1802
1941
  <!--begin::Header-->
1803
- <div class="card-header"><div class="card-title">Spinner</div></div>
1942
+ <div class="card-header">
1943
+ <div class="card-title">Spinner</div>
1944
+ </div>
1804
1945
  <!--end::Header-->
1805
1946
  <!--begin::Body-->
1806
1947
  <div class="card-body">
@@ -1886,7 +2027,15 @@
1886
2027
  };
1887
2028
  document.addEventListener('DOMContentLoaded', function () {
1888
2029
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1889
- if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
2030
+
2031
+ // Disable OverlayScrollbars on mobile devices to prevent touch interference
2032
+ const isMobile = window.innerWidth <= 992;
2033
+
2034
+ if (
2035
+ sidebarWrapper &&
2036
+ OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined &&
2037
+ !isMobile
2038
+ ) {
1890
2039
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1891
2040
  scrollbars: {
1892
2041
  theme: Default.scrollbarTheme,