admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

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 (151) hide show
  1. package/.bundlewatch.config.json +2 -2
  2. package/.cache/.eslintcache +1 -0
  3. package/.cache/.stylelintcache +1 -0
  4. package/.eslintignore +1 -0
  5. package/.eslintrc.json +16 -0
  6. package/.stylelintrc.json +47 -0
  7. package/LICENSE +1 -1
  8. package/README.md +5 -6
  9. package/dist/css/adminlte.css +2383 -2754
  10. package/dist/css/adminlte.css.map +1 -1
  11. package/dist/css/adminlte.min.css +2 -2
  12. package/dist/css/adminlte.min.css.map +1 -1
  13. package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2377 -2749
  14. package/dist/css/adminlte.rtl.css.map +1 -0
  15. package/dist/css/adminlte.rtl.min.css +7 -0
  16. package/dist/css/adminlte.rtl.min.css.map +1 -0
  17. package/dist/js/adminlte.js +173 -182
  18. package/dist/js/adminlte.js.map +1 -1
  19. package/dist/js/adminlte.min.js +6 -1
  20. package/dist/js/adminlte.min.js.map +1 -1
  21. package/dist/pages/UI/timeline.html +698 -0
  22. package/dist/pages/docs/browser-support.html +614 -0
  23. package/dist/pages/docs/color-mode.html +855 -0
  24. package/dist/pages/docs/components/main-header.html +926 -0
  25. package/dist/pages/docs/layout.html +617 -0
  26. package/dist/pages/docs.html +617 -0
  27. package/dist/pages/examples/login.html +114 -187
  28. package/dist/pages/examples/register.html +117 -190
  29. package/dist/pages/forms/general.html +598 -647
  30. package/dist/pages/index.html +1091 -0
  31. package/dist/pages/index2.html +1452 -0
  32. package/dist/pages/index3.html +950 -0
  33. package/dist/pages/layout/fixed-sidebar.html +590 -638
  34. package/dist/pages/layout/layout-rtl.html +623 -0
  35. package/dist/pages/layout/sidebar-mini.html +623 -0
  36. package/dist/pages/layout/unfixed-sidebar.html +589 -638
  37. package/dist/pages/tables/simple.html +837 -938
  38. package/dist/pages/widgets/cards.html +814 -698
  39. package/dist/pages/widgets/info-box.html +864 -951
  40. package/dist/pages/widgets/small-box.html +625 -678
  41. package/index.html +1 -6
  42. package/package.json +53 -36
  43. package/src/config/assets.config.mjs +8 -0
  44. package/src/config/astro.config.mjs +17 -0
  45. package/src/config/postcss.config.mjs +15 -0
  46. package/src/config/rollup.config.js +20 -0
  47. package/src/html/.eslintrc.json +24 -0
  48. package/src/html/.tsconfig.json +4 -0
  49. package/src/html/components/_head.astro +31 -0
  50. package/src/html/components/_scripts.astro +40 -0
  51. package/src/html/components/dashboard/_footer.astro +12 -0
  52. package/src/html/components/dashboard/_sidenav.astro +323 -0
  53. package/src/{partials/dashboard/_topbar.html → html/components/dashboard/_topbar.astro} +20 -46
  54. package/src/html/components/docs/browser-support/index.md +22 -0
  55. package/src/html/components/docs/color-mode/navbar-html.md +80 -0
  56. package/src/{partials/_scripts.html → html/components/docs/color-mode/toggle-script.md} +5 -52
  57. package/src/html/components/docs/components/main-header-1.md +159 -0
  58. package/src/html/components/docs/introduction/index.md +35 -0
  59. package/src/html/env.d.ts +1 -0
  60. package/src/html/pages/UI/timeline.astro +158 -0
  61. package/src/html/pages/docs/browser-support.astro +58 -0
  62. package/src/html/pages/docs/color-mode.astro +224 -0
  63. package/src/html/pages/docs/components/main-header.astro +232 -0
  64. package/src/html/pages/docs/index.astro +58 -0
  65. package/src/html/pages/docs/layout.astro +77 -0
  66. package/src/{pages/examples/login.html → html/pages/examples/login.astro} +13 -13
  67. package/src/{pages/examples/register.html → html/pages/examples/register.astro} +13 -13
  68. package/src/{pages/forms/general.html → html/pages/forms/general.astro} +26 -30
  69. package/src/{index.html → html/pages/index.astro} +266 -189
  70. package/src/{index2.html → html/pages/index2.astro} +229 -284
  71. package/src/{index3.html → html/pages/index3.astro} +151 -169
  72. package/src/{pages/layout/fixed-sidebar.html → html/pages/layout/fixed-sidebar.astro} +26 -29
  73. package/src/html/pages/layout/layout-rtl.astro +84 -0
  74. package/src/html/pages/layout/sidebar-mini.astro +83 -0
  75. package/src/{pages/layout/unfixed-sidebar.html → html/pages/layout/unfixed-sidebar.astro} +26 -30
  76. package/src/{pages/tables/simple.html → html/pages/tables/simple.astro} +26 -30
  77. package/src/html/pages/widgets/cards.astro +308 -0
  78. package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +26 -31
  79. package/src/html/pages/widgets/small-box.astro +121 -0
  80. package/src/scss/_app-footer.scss +15 -0
  81. package/src/scss/_app-header.scss +26 -0
  82. package/src/scss/_app-main.scss +20 -0
  83. package/src/scss/_app-sidebar.scss +429 -0
  84. package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
  85. package/src/scss/_bootstrap-variables.scss +41 -26
  86. package/src/scss/_callouts.scss +34 -0
  87. package/src/scss/_cards.scss +30 -224
  88. package/src/scss/_direct-chat.scss +15 -9
  89. package/src/scss/_docs.scss +4 -0
  90. package/src/scss/_dropdown.scss +7 -5
  91. package/src/scss/_info-box.scss +2 -6
  92. package/src/scss/_miscellaneous.scss +0 -455
  93. package/src/scss/_mixins.scss +0 -6
  94. package/src/scss/_root.scss +2 -58
  95. package/src/scss/_small-box.scss +15 -38
  96. package/src/scss/_table.scss +0 -50
  97. package/src/scss/_timeline.scss +120 -0
  98. package/src/scss/_variables-dark.scss +15 -8
  99. package/src/scss/_variables.scss +30 -135
  100. package/src/scss/adminlte.scss +1 -1
  101. package/src/scss/mixins/_animations.scss +4 -0
  102. package/src/scss/mixins/_scrollbar.scss +2 -2
  103. package/src/scss/pages/_login_and_register.scss +1 -2
  104. package/src/scss/parts/_core.scss +7 -15
  105. package/src/scss/parts/_extra-components.scss +1 -2
  106. package/src/ts/adminlte.ts +0 -2
  107. package/src/ts/card-widget.ts +42 -18
  108. package/src/ts/direct-chat.ts +33 -8
  109. package/src/ts/layout.ts +6 -4
  110. package/src/ts/push-menu.ts +94 -145
  111. package/src/ts/treeview.ts +17 -23
  112. package/src/ts/util/index.ts +2 -2
  113. package/src/utils/index.js +11 -0
  114. package/tsconfig.json +11 -3
  115. package/.stylelintrc +0 -40
  116. package/CHECKLIST.md +0 -0
  117. package/dist/css/rtl/adminlte.rtl.css.map +0 -1
  118. package/dist/css/rtl/adminlte.rtl.min.css +0 -7
  119. package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
  120. package/dist/index.html +0 -1065
  121. package/dist/index2.html +0 -1629
  122. package/dist/index3.html +0 -1015
  123. package/gulpfile.js +0 -315
  124. package/src/pages/widgets/cards.html +0 -143
  125. package/src/pages/widgets/small-box.html +0 -124
  126. package/src/partials/_head.html +0 -31
  127. package/src/partials/dashboard/_footer.html +0 -9
  128. package/src/partials/dashboard/_sidenav.html +0 -244
  129. package/src/scss/_brand-container.scss +0 -72
  130. package/src/scss/_content-header.scss +0 -9
  131. package/src/scss/_content-wrapper.scss +0 -6
  132. package/src/scss/_content.scss +0 -3
  133. package/src/scss/_layout-fixed.scss +0 -43
  134. package/src/scss/_layout-mobile.scss +0 -22
  135. package/src/scss/_main-footer.scss +0 -28
  136. package/src/scss/_main-header.scss +0 -40
  137. package/src/scss/_main-sidebar.scss +0 -63
  138. package/src/scss/_nav-sidebar.scss +0 -66
  139. package/src/scss/_products.scss +0 -55
  140. package/src/scss/_sidebar-close.scss +0 -6
  141. package/src/scss/_sidebar-collapse.scss +0 -120
  142. package/src/scss/_sidebar-horizontal.scss +0 -67
  143. package/src/scss/_sidebar.scss +0 -11
  144. package/src/scss/_users-list.scss +0 -45
  145. package/src/scss/mixins/_brand-variant.scss +0 -9
  146. package/src/scss/mixins/_cards.scss +0 -53
  147. package/src/scss/mixins/_direct-chat.scss +0 -17
  148. package/src/scss/mixins/_header-variant.scss +0 -22
  149. package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
  150. package/src/scss/mixins/_nav-treeview-light.scss +0 -89
  151. package/src/scss/mixins/_sidebar-color.scss +0 -9
package/dist/pages/widgets/cards.html CHANGED
@@ -1,244 +1,192 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <!-- For RTL verison -->
4
- <!-- <html lang="en" dir="rtl"> -->
5
3
 
6
4
  <head>
7
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8
- <!-- Primary Meta Tags -->
9
- <title>AdminLTE 4 | Widgets - Cards</title>
10
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
- <meta name="title" content="AdminLTE 4 | Widgets - Cards">
12
- <meta name="author" content="ColorlibHQ">
13
- <meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard featuring over 800 components, 10+ plugins and 20 example pages using Vanilla JS.">
14
- <meta name="keywords" 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" />
15
- <!-- By adding ../../css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is light. -->
16
- <meta name="color-scheme" content="light dark">
17
- <!-- By adding ../../css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is dark. -->
18
- <!-- <meta name="color-scheme" content="dark light"> -->
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
+ <!-- Primary Meta Tags -->
7
+ <title>AdminLTE 4 | Widgets - Cards</title>
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <meta name="title" content="AdminLTE 4 | Widgets - Cards">
10
+ <meta name="author" content="ColorlibHQ">
11
+ <meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
12
+ <meta name="keywords" 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">
19
13
 
20
- <!-- OPTIONAL LINKS -->
14
+ <!-- OPTIONAL LINKS -->
21
15
 
22
- <!-- Google Font: Source Sans Pro -->
23
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
16
+ <!-- Google Font: Source Sans Pro -->
17
+ <link rel="preconnect" href="https://fonts.googleapis.com">
18
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
24
20
 
25
- <!-- overlayScrollbars -->
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/styles/overlayscrollbars.min.css" integrity="sha256-57dSpDS5wv9AYEEmLxcPfrVnygNCdqDWOXyoR46L9H0=" crossorigin="anonymous">
21
+ <!-- overlayscrollbars -->
22
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css" integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY=" crossorigin="anonymous">
27
23
 
28
- <!-- Font Awesome -->
29
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css" integrity="sha256-Z1K5uhUaJXA7Ll0XrZ/0JhX4lAtZFpT6jkKrEDT0drU=" crossorigin="anonymous">
24
+ <!-- @fortawesome/fontawesome-free -->
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css" integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc=" crossorigin="anonymous">
30
26
 
31
- <!-- REQUIRED LINKS -->
27
+ <!-- REQUIRED LINKS -->
32
28
 
33
- <!-- Theme style -->
34
- <link rel="stylesheet" href="../../css/adminlte.css">
29
+ <!-- Theme style -->
30
+ <link rel="stylesheet" href="../../../dist/css/adminlte.css">
31
+ </head>
35
32
 
36
- <!-- For RTL verison use ../../css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
37
- <!-- <link rel="stylesheet" href="../../css/rtl/adminlte.rtl.css""> -->
33
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
34
+ <div class="app-wrapper">
35
+ <!-- Navbar -->
36
+ <nav class="app-header navbar navbar-expand bg-body">
37
+ <div class="container-fluid">
38
+ <!-- Start navbar links -->
39
+ <ul class="navbar-nav">
40
+ <li class="nav-item">
41
+ <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
42
+ </li>
43
+ <li class="nav-item d-none d-md-block">
44
+ <a href="#" class="nav-link">Home</a>
45
+ </li>
46
+ <li class="nav-item d-none d-md-block">
47
+ <a href="#" class="nav-link">Contact</a>
48
+ </li>
49
+ </ul>
50
+ <!-- End navbar links -->
38
51
 
39
- </head>
52
+ <ul class="navbar-nav ms-auto">
53
+ <!-- Navbar Search -->
54
+ <li class="nav-item">
55
+ <a class="nav-link" data-widget="navbar-search" href="#" role="button">
56
+ <i class="fa-solid fa-search"></i>
57
+ </a>
58
+ </li>
40
59
 
41
- <body class="layout-fixed">
42
- <div class="wrapper">
43
- <!-- Navbar -->
44
- <nav class="main-header navbar navbar-expand navbar-light">
45
- <div class="container-fluid">
46
- <!-- Start navbar links -->
47
- <ul class="navbar-nav">
48
- <li class="nav-item">
49
- <a class="nav-link" data-lte-toggle="sidebar-full" href="#" role="button">
50
- <i class="fa-solid fa-bars"></i>
51
- </a>
52
- </li>
53
- <li class="nav-item d-none d-md-block">
54
- <a href="#" class="nav-link">Home</a>
55
- </li>
56
- <li class="nav-item d-none d-md-block">
57
- <a href="#" class="nav-link">Contact</a>
58
- </li>
59
- </ul>
60
-
61
- <!-- End navbar links -->
62
- <ul class="navbar-nav ms-auto">
63
- <!-- Navbar Search -->
64
- <li class="nav-item">
65
- <a class="nav-link" data-widget="navbar-search" href="#" role="button">
66
- <i class="fa-solid fa-search"></i>
67
- </a>
68
- </li>
69
-
70
- <!-- Messages Dropdown Menu -->
71
- <li class="nav-item dropdown">
72
- <a class="nav-link" data-bs-toggle="dropdown" href="#">
73
- <i class="fa-regular fa-comments"></i>
74
- <span class="navbar-badge badge text-bg-danger">3</span>
75
- </a>
76
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
77
- <a href="#" class="dropdown-item">
78
- <!-- Message Start -->
79
- <div class="d-flex">
80
- <div class="flex-shrink-0">
81
- <img src="../../assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
82
- </div>
83
- <div class="flex-grow-1">
84
- <h3 class="dropdown-item-title">
85
- Brad Diesel
86
- <span class="float-end fs-7 text-danger">
87
- <i class="fa-solid fa-star"></i>
88
- </span>
89
- </h3>
90
- <p class="fs-7">Call me whenever you can...</p>
91
- <p class="fs-7 text-muted">
92
- <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
93
- </p>
94
- </div>
95
- </div>
96
- <!-- Message End -->
97
- </a>
98
- <div class="dropdown-divider"></div>
99
- <a href="#" class="dropdown-item">
100
- <!-- Message Start -->
101
- <div class="d-flex">
102
- <div class="flex-shrink-0">
103
- <img src="../../assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
104
- </div>
105
- <div class="flex-grow-1">
106
- <h3 class="dropdown-item-title">
107
- John Pierce
108
- <span class="float-end fs-7 text-muted">
109
- <i class="fa-solid fa-star"></i>
110
- </span>
111
- </h3>
112
- <p class="fs-7">I got your message bro</p>
113
- <p class="fs-7 text-muted">
114
- <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
115
- </p>
116
- </div>
117
- </div>
118
- <!-- Message End -->
119
- </a>
120
- <div class="dropdown-divider"></div>
121
- <a href="#" class="dropdown-item">
122
- <!-- Message Start -->
123
- <div class="d-flex">
124
- <div class="flex-shrink-0">
125
- <img src="../../assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
126
- </div>
127
- <div class="flex-grow-1">
128
- <h3 class="dropdown-item-title">
129
- Nora Silvester
130
- <span class="float-end fs-7 text-warning">
131
- <i class="fa-solid fa-star"></i>
132
- </span>
133
- </h3>
134
- <p class="fs-7">The subject goes here</p>
135
- <p class="fs-7 text-muted">
136
- <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
137
- </p>
138
- </div>
139
- </div>
140
- <!-- Message End -->
141
- </a>
142
- <div class="dropdown-divider"></div>
143
- <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
144
- </div>
145
- </li>
146
- <!-- Notifications Dropdown Menu -->
147
- <li class="nav-item dropdown">
148
- <a class="nav-link" data-bs-toggle="dropdown" href="#">
149
- <i class="fa-regular fa-bell"></i>
150
- <span class="navbar-badge badge text-bg-warning">15</span>
151
- </a>
152
- <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
153
- <span class="dropdown-item dropdown-header">15 Notifications</span>
154
- <div class="dropdown-divider"></div>
155
- <a href="#" class="dropdown-item">
156
- <i class="fa-solid fa-envelope me-2"></i> 4 new messages
157
- <span class="float-end text-muted fs-7">3 mins</span>
158
- </a>
159
- <div class="dropdown-divider"></div>
160
- <a href="#" class="dropdown-item">
161
- <i class="fa-solid fa-users me-2"></i> 8 friend requests
162
- <span class="float-end text-muted fs-7">12 hours</span>
163
- </a>
164
- <div class="dropdown-divider"></div>
165
- <a href="#" class="dropdown-item">
166
- <i class="fa-solid fa-file me-2"></i> 3 new reports
167
- <span class="float-end text-muted fs-7">2 days</span>
168
- </a>
169
- <div class="dropdown-divider"></div>
170
- <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
171
- </div>
172
- </li>
173
- <li class="nav-item dropdown user-menu">
174
- <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
175
- <img src="../../assets/img/user2-160x160.jpg" class="user-image img-circle shadow" alt="User Image">
176
- <span class="d-none d-md-inline">Alexander Pierce</span>
177
- </a>
178
- <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
179
- <!-- User image -->
180
- <li class="user-header text-bg-primary">
181
- <img src="../../assets/img/user2-160x160.jpg" class="img-circle shadow" alt="User Image">
182
-
183
- <p>
184
- Alexander Pierce - Web Developer
185
- <small>Member since Nov. 2012</small>
186
- </p>
187
- </li>
188
- <!-- Menu Body -->
189
- <li class="user-body">
190
- <div class="row">
191
- <div class="col-4 text-center">
192
- <a href="#">Followers</a>
193
- </div>
194
- <div class="col-4 text-center">
195
- <a href="#">Sales</a>
196
- </div>
197
- <div class="col-4 text-center">
198
- <a href="#">Friends</a>
199
- </div>
200
- </div>
201
- <!-- /.row -->
202
- </li>
203
- <!-- Menu Footer-->
204
- <li class="user-footer">
205
- <a href="#" class="btn btn-default btn-flat">Profile</a>
206
- <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
207
- </li>
208
- </ul>
209
- </li>
210
- <li class="nav-item dropdown">
211
- <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
212
- <span class="theme-icon-active">
213
- <i class="my-1"></i>
214
- </span>
215
- </button>
216
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
217
- <li>
218
- <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
219
- <i class="fa-regular fa-sun me-2 opacity-50"></i>
220
- Light
221
- <i class="fa-solid fa-check ms-auto d-none"></i>
222
- </button>
223
- </li>
224
- <li>
225
- <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
226
- <i class="fa-solid fa-moon me-2 opacity-50"></i>
227
- Dark
228
- <i class="fa-solid fa-check ms-auto d-none"></i>
229
- </button>
230
- </li>
231
- <li>
232
- <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
233
- <i class="fa-solid fa-circle-half-stroke me-2 opacity-50"></i>
234
- Auto
235
- <i class="fa-solid fa-check ms-auto d-none"></i>
236
- </button>
237
- </li>
238
- </ul>
239
- </li>
240
- <!-- TODO tackel in v4.1 -->
241
- <!-- <li class="nav-item">
60
+ <!-- Messages Dropdown Menu -->
61
+ <li class="nav-item dropdown">
62
+ <a class="nav-link" data-bs-toggle="dropdown" href="#">
63
+ <i class="fa-regular fa-comments"></i>
64
+ <span class="navbar-badge badge text-bg-danger">3</span>
65
+ </a>
66
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
67
+ <a href="#" class="dropdown-item">
68
+ <!-- Message Start -->
69
+ <div class="d-flex">
70
+ <div class="flex-shrink-0">
71
+ <img src="../../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
72
+ </div>
73
+ <div class="flex-grow-1">
74
+ <h3 class="dropdown-item-title">
75
+ Brad Diesel
76
+ <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
77
+ </h3>
78
+ <p class="fs-7">Call me whenever you can...</p>
79
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
80
+ </div>
81
+ </div>
82
+ <!-- Message End -->
83
+ </a>
84
+ <div class="dropdown-divider"></div>
85
+ <a href="#" class="dropdown-item">
86
+ <!-- Message Start -->
87
+ <div class="d-flex">
88
+ <div class="flex-shrink-0">
89
+ <img src="../../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
90
+ </div>
91
+ <div class="flex-grow-1">
92
+ <h3 class="dropdown-item-title">
93
+ John Pierce
94
+ <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
95
+ </h3>
96
+ <p class="fs-7">I got your message bro</p>
97
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
98
+ </div>
99
+ </div>
100
+ <!-- Message End -->
101
+ </a>
102
+ <div class="dropdown-divider"></div>
103
+ <a href="#" class="dropdown-item">
104
+ <!-- Message Start -->
105
+ <div class="d-flex">
106
+ <div class="flex-shrink-0">
107
+ <img src="../../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
108
+ </div>
109
+ <div class="flex-grow-1">
110
+ <h3 class="dropdown-item-title">
111
+ Nora Silvester
112
+ <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
113
+ </h3>
114
+ <p class="fs-7">The subject goes here</p>
115
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
116
+ </div>
117
+ </div>
118
+ <!-- Message End -->
119
+ </a>
120
+ <div class="dropdown-divider"></div>
121
+ <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
122
+ </div>
123
+ </li>
124
+ <!-- Notifications Dropdown Menu -->
125
+ <li class="nav-item dropdown">
126
+ <a class="nav-link" data-bs-toggle="dropdown" href="#">
127
+ <i class="fa-regular fa-bell"></i>
128
+ <span class="navbar-badge badge text-bg-warning">15</span>
129
+ </a>
130
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
131
+ <span class="dropdown-item dropdown-header">15 Notifications</span>
132
+ <div class="dropdown-divider"></div>
133
+ <a href="#" class="dropdown-item">
134
+ <i class="fa-solid fa-envelope me-2"></i> 4 new messages
135
+ <span class="float-end text-secondary fs-7">3 mins</span>
136
+ </a>
137
+ <div class="dropdown-divider"></div>
138
+ <a href="#" class="dropdown-item">
139
+ <i class="fa-solid fa-users me-2"></i> 8 friend requests
140
+ <span class="float-end text-secondary fs-7">12 hours</span>
141
+ </a>
142
+ <div class="dropdown-divider"></div>
143
+ <a href="#" class="dropdown-item">
144
+ <i class="fa-solid fa-file me-2"></i> 3 new reports
145
+ <span class="float-end text-secondary fs-7">2 days</span>
146
+ </a>
147
+ <div class="dropdown-divider"></div>
148
+ <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
149
+ </div>
150
+ </li>
151
+ <li class="nav-item dropdown user-menu">
152
+ <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
153
+ <img src="../../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
154
+ <span class="d-none d-md-inline">Alexander Pierce</span>
155
+ </a>
156
+ <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
157
+ <!-- User image -->
158
+ <li class="user-header text-bg-primary">
159
+ <img src="../../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
160
+
161
+ <p>
162
+ Alexander Pierce - Web Developer
163
+ <small>Member since Nov. 2023</small>
164
+ </p>
165
+ </li>
166
+ <!-- Menu Body -->
167
+ <li class="user-body">
168
+ <div class="row">
169
+ <div class="col-4 text-center">
170
+ <a href="#">Followers</a>
171
+ </div>
172
+ <div class="col-4 text-center">
173
+ <a href="#">Sales</a>
174
+ </div>
175
+ <div class="col-4 text-center">
176
+ <a href="#">Friends</a>
177
+ </div>
178
+ </div>
179
+ <!-- /.row -->
180
+ </li>
181
+ <!-- Menu Footer-->
182
+ <li class="user-footer">
183
+ <a href="#" class="btn btn-default btn-flat">Profile</a>
184
+ <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
185
+ </li>
186
+ </ul>
187
+ </li>
188
+ <!-- TODO tackel in v4.1 -->
189
+ <!-- <li class="nav-item">
242
190
  <a class="nav-link" data-widget="fullscreen" href="#" role="button">
243
191
  <i class="fa-solid fa-expand-arrows-alt"></i>
244
192
  </a>
@@ -248,485 +196,653 @@
248
196
  <i class="fa-solid fa-th-large"></i>
249
197
  </a>
250
198
  </li> -->
251
- </ul>
252
- </div>
253
- </nav>
254
- <!-- /.navbar -->
255
-
256
-
257
- <!-- Main Sidebar Container -->
258
- <aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
259
- <div class="brand-container">
260
- <a href="javascript:;" class="brand-link">
261
- <img src="../../assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
262
- <span class="brand-text fw-light">AdminLTE 4</span>
263
- </a>
264
- <a class="pushmenu mx-1" data-lte-toggle="sidebar-mini" href="javascript:;" role="button">
265
- <i class="fa-solid fa-angle-double-left"></i>
266
- </a>
267
- </div>
268
- <!-- Sidebar -->
269
- <div class="sidebar">
270
- <nav class="mt-2">
271
- <!-- Sidebar Menu -->
272
- <ul class="nav nav-pills nav-sidebar flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
273
- <li class="nav-item ">
274
- <a href="javascript:;" class="nav-link ">
275
- <i class="nav-icon fa-solid fa-circle"></i>
276
- <p>
277
- Dashboard
278
- <i class="end fa-solid fa-angle-right"></i>
279
- </p>
280
- </a>
281
- <ul class="nav nav-treeview">
282
- <li class="nav-item">
283
- <a href="../../index.html" class="nav-link ">
284
- <i class="nav-icon fa-regular fa-circle"></i>
285
- <p>Dashboard v1</p>
286
- </a>
287
- </li>
288
- <li class="nav-item">
289
- <a href="../../index2.html" class="nav-link ">
290
- <i class="nav-icon fa-regular fa-circle"></i>
291
- <p>Dashboard v2</p>
292
- </a>
293
- </li>
294
- <li class="nav-item">
295
- <a href="../../index3.html" class="nav-link ">
296
- <i class="nav-icon fa-regular fa-circle"></i>
297
- <p>Dashboard v3</p>
298
- </a>
299
- </li>
300
- </ul>
301
- </li>
302
- <li class="nav-item menu-open">
303
- <a href="javascript:;" class="nav-link active">
304
- <i class="nav-icon fa-solid fa-circle"></i>
305
- <p>
306
- Widgets
307
- <i class="end fa-solid fa-angle-right"></i>
308
- </p>
309
- </a>
310
- <ul class="nav nav-treeview">
311
- <li class="nav-item">
312
- <a href="../../pages/widgets/small-box.html" class="nav-link ">
313
- <i class="nav-icon fa-regular fa-circle"></i>
314
- <p>Small Box</p>
315
- </a>
316
- </li>
317
- <li class="nav-item">
318
- <a href="../../pages/widgets/info-box.html" class="nav-link ">
319
- <i class="nav-icon fa-regular fa-circle"></i>
320
- <p>info Box</p>
321
- </a>
322
- </li>
323
- <li class="nav-item">
324
- <a href="../../pages/widgets/cards.html" class="nav-link active">
325
- <i class="nav-icon fa-regular fa-circle"></i>
326
- <p>Cards</p>
327
- </a>
328
- </li>
329
- </ul>
330
- </li>
331
-
332
- <li class="nav-item ">
333
- <a href="javascript:;" class="nav-link ">
334
- <i class="nav-icon fa-solid fa-circle"></i>
335
- <p>
336
- Layout Options
337
- <span class="badge text-bg-info float-end me-3">6</span>
338
- <i class="end fa-solid fa-angle-right"></i>
339
- </p>
340
- </a>
341
- <ul class="nav nav-treeview">
342
- <li class="nav-item">
343
- <a href="../../pages/layout/unfixed-sidebar.html" class="nav-link ">
344
- <i class="nav-icon fa-regular fa-circle"></i>
345
- <p>Unfixed Sidebar</p>
346
- </a>
347
- </li>
348
- <li class="nav-item">
349
- <a href="../../pages/layout/fixed-sidebar.html" class="nav-link ">
350
- <i class="nav-icon fa-regular fa-circle"></i>
351
- <p>Fixed Sidebar</p>
352
- </a>
353
- </li>
354
- </ul>
355
- </li>
356
- <li class="nav-item ">
357
- <a href="javascript:;" class="nav-link ">
358
- <i class="nav-icon fa-solid fa-circle"></i>
359
- <p>
360
- Forms
361
- <i class="end fa-solid fa-angle-right"></i>
362
- </p>
363
- </a>
364
- <ul class="nav nav-treeview">
365
- <li class="nav-item">
366
- <a href="../../pages/forms/general.html" class="nav-link ">
367
- <i class="nav-icon fa-regular fa-circle"></i>
368
- <p>General Elements</p>
369
- </a>
370
- </li>
371
- </ul>
372
- </li>
373
- <li class="nav-item ">
374
- <a href="javascript:;" class="nav-link ">
375
- <i class="nav-icon fa-solid fa-circle"></i>
376
- <p>
377
- Tables
378
- <i class="end fa-solid fa-angle-right"></i>
379
- </p>
380
- </a>
381
- <ul class="nav nav-treeview">
382
- <li class="nav-item">
383
- <a href="../../pages/tables/simple.html" class="nav-link ">
384
- <i class="nav-icon fa-regular fa-circle"></i>
385
- <p>Simple Tables</p>
386
- </a>
387
- </li>
388
- </ul>
389
- </li>
390
- <li class="nav-header">EXAMPLES</li>
391
- <li class="nav-item">
392
- <a href="javascript:;" class="nav-link">
393
- <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
394
- <p>
395
- Login & Register
396
- <i class="end fa-solid fa-angle-right"></i>
397
- </p>
398
- </a>
399
- <ul class="nav nav-treeview">
400
- <li class="nav-item">
401
- <a href="../../pages/examples/login.html" class="nav-link ">
402
- <i class="nav-icon fa-regular fa-circle"></i>
403
- <p>Login v1</p>
404
- </a>
405
- </li>
406
- <li class="nav-item">
407
- <a href="../../pages/examples/register.html" class="nav-link ">
408
- <i class="nav-icon fa-regular fa-circle"></i>
409
- <p>Register v1</p>
410
- </a>
411
- </li>
412
- </ul>
413
- </li>
414
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
415
- <li class="nav-item">
416
- <a href="javascript:;" class="nav-link">
417
- <i class="nav-icon fa-solid fa-circle"></i>
418
- <p>Level 1</p>
419
- </a>
420
- </li>
421
- <li class="nav-item">
422
- <a href="javascript:;" class="nav-link">
423
- <i class="nav-icon fa-solid fa-circle"></i>
424
- <p>
425
- Level 1
426
- <i class="end fa-solid fa-angle-right"></i>
427
- </p>
428
- </a>
429
- <ul class="nav nav-treeview">
430
- <li class="nav-item">
431
- <a href="javascript:;" class="nav-link">
432
- <i class="nav-icon fa-regular fa-circle"></i>
433
- <p>Level 2</p>
434
- </a>
435
- </li>
436
- <li class="nav-item">
437
- <a href="javascript:;" class="nav-link">
438
- <i class="nav-icon fa-regular fa-circle"></i>
439
- <p>
440
- Level 2
441
- <i class="end fa-solid fa-angle-right"></i>
442
- </p>
443
- </a>
444
- <ul class="nav nav-treeview">
445
- <li class="nav-item">
446
- <a href="javascript:;" class="nav-link">
447
- <i class="nav-icon fa-regular fa-dot-circle"></i>
448
- <p>Level 3</p>
449
- </a>
450
- </li>
451
- <li class="nav-item">
452
- <a href="javascript:;" class="nav-link">
453
- <i class="nav-icon fa-regular fa-dot-circle"></i>
454
- <p>Level 3</p>
455
- </a>
456
- </li>
457
- <li class="nav-item">
458
- <a href="javascript:;" class="nav-link">
459
- <i class="nav-icon fa-regular fa-dot-circle"></i>
460
- <p>Level 3</p>
461
- </a>
462
- </li>
463
- </ul>
464
- </li>
465
- <li class="nav-item">
466
- <a href="javascript:;" class="nav-link">
467
- <i class="nav-icon fa-regular fa-circle"></i>
468
- <p>Level 2</p>
469
- </a>
470
- </li>
471
- </ul>
472
- </li>
473
- <li class="nav-item">
474
- <a href="javascript:;" class="nav-link">
475
- <i class="nav-icon fa-solid fa-circle"></i>
476
- <p>Level 1</p>
477
- </a>
478
- </li>
479
- <li class="nav-header">LABELS</li>
480
- <li class="nav-item">
481
- <a href="javascript:;" class="nav-link">
482
- <i class="nav-icon fa-regular fa-circle text-danger"></i>
483
- <p class="text">Important</p>
484
- </a>
485
- </li>
486
- <li class="nav-item">
487
- <a href="javascript:;" class="nav-link">
488
- <i class="nav-icon fa-regular fa-circle text-warning"></i>
489
- <p>Warning</p>
490
- </a>
491
- </li>
492
- <li class="nav-item">
493
- <a href="javascript:;" class="nav-link">
494
- <i class="nav-icon fa-regular fa-circle text-info"></i>
495
- <p>Informational</p>
496
- </a>
497
- </li>
498
- </ul>
499
- </nav>
500
- </div>
501
- <!-- /.sidebar -->
502
- </aside>
503
-
504
- <!-- Main content -->
505
- <main class="content-wrapper">
506
- <div class="content-header">
507
- <div class="container-fluid">
508
- <div class="row mb-2">
509
- <div class="col-sm-6">
510
- <h3>Cards</h3>
199
+ </ul>
511
200
  </div>
512
- <div class="col-sm-6">
513
- <ol class="breadcrumb float-sm-end">
514
- <li class="breadcrumb-item">
515
- <a href="#">Home</a>
516
- </li>
517
- <li class="breadcrumb-item active" aria-current="page">Cards</li>
518
- </ol>
201
+ </nav>
202
+ <!-- /.navbar -->
203
+ <!-- Sidebar Container -->
204
+ <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
205
+ <div class="sidebar-brand">
206
+ <a href="../../index.html" class="brand-link">
207
+ <img src="../../../dist/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
208
+ <span class="brand-text fw-light">AdminLTE 4</span>
209
+ </a>
519
210
  </div>
520
- </div>
521
- </div>
522
- </div>
523
- <!-- Main content -->
524
- <div class="content">
525
- <div class="container-fluid">
526
- <h4 class="mb-2 mt-4">Cards</h4>
527
- <h5 class="mb-2">Abilities</h5>
528
- <div class="row">
529
- <div class="col-md-3">
530
- <div class="card card-primary collapsed-card">
531
- <div class="card-header">
532
- <h3 class="card-title">Expandable</h3>
533
-
534
- <div class="card-tools">
535
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
536
- <i class="fa-solid fa-plus"></i>
537
- </button>
538
- </div>
539
- <!-- /.card-tools -->
540
- </div>
541
- <!-- /.card-header -->
542
- <div class="card-body">
543
- The body of the card
544
- </div>
545
- <!-- /.card-body -->
546
- </div>
547
- <!-- /.card -->
211
+ <!-- Sidebar -->
212
+ <div class="sidebar-wrapper">
213
+ <nav class="mt-2">
214
+ <!-- Sidebar Menu -->
215
+ <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
216
+ <li class="nav-item">
217
+ <a href="javascript:;" class="nav-link">
218
+ <i class="nav-icon fa-solid fa-gauge-high"></i>
219
+ <p>
220
+ Dashboard
221
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
222
+ </p>
223
+ </a>
224
+ <ul class="nav nav-treeview">
225
+ <li class="nav-item">
226
+ <a href="../../index.html" class="nav-link">
227
+ <i class="nav-icon fa-regular fa-circle"></i>
228
+ <p>Dashboard v1</p>
229
+ </a>
230
+ </li>
231
+ <li class="nav-item">
232
+ <a href="../../index2.html" class="nav-link">
233
+ <i class="nav-icon fa-regular fa-circle"></i>
234
+ <p>Dashboard v2</p>
235
+ </a>
236
+ </li>
237
+ <li class="nav-item">
238
+ <a href="../../index3.html" class="nav-link">
239
+ <i class="nav-icon fa-regular fa-circle"></i>
240
+ <p>Dashboard v3</p>
241
+ </a>
242
+ </li>
243
+ </ul>
244
+ </li>
245
+ <li class="nav-item menu-open">
246
+ <a href="javascript:;" class="nav-link active">
247
+ <i class="nav-icon fa-solid fa-box-open"></i>
248
+ <p>
249
+ Widgets
250
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
251
+ </p>
252
+ </a>
253
+ <ul class="nav nav-treeview">
254
+ <li class="nav-item">
255
+ <a href="../../widgets/small-box.html" class="nav-link">
256
+ <i class="nav-icon fa-regular fa-circle"></i>
257
+ <p>Small Box</p>
258
+ </a>
259
+ </li>
260
+ <li class="nav-item">
261
+ <a href="../../widgets/info-box.html" class="nav-link">
262
+ <i class="nav-icon fa-regular fa-circle"></i>
263
+ <p>info Box</p>
264
+ </a>
265
+ </li>
266
+ <li class="nav-item">
267
+ <a href="../../widgets/cards.html" class="nav-link active">
268
+ <i class="nav-icon fa-regular fa-circle"></i>
269
+ <p>Cards</p>
270
+ </a>
271
+ </li>
272
+ </ul>
273
+ </li>
274
+
275
+ <li class="nav-item">
276
+ <a href="javascript:;" class="nav-link">
277
+ <i class="nav-icon fa-solid fa-copy"></i>
278
+ <p>
279
+ Layout Options
280
+ <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
281
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
282
+ </p>
283
+ </a>
284
+ <ul class="nav nav-treeview">
285
+ <li class="nav-item">
286
+ <a href="../../layout/unfixed-sidebar.html" class="nav-link">
287
+ <i class="nav-icon fa-regular fa-circle"></i>
288
+ <p>Unfixed Sidebar</p>
289
+ </a>
290
+ </li>
291
+ <li class="nav-item">
292
+ <a href="../../layout/fixed-sidebar.html" class="nav-link">
293
+ <i class="nav-icon fa-regular fa-circle"></i>
294
+ <p>Fixed Sidebar</p>
295
+ </a>
296
+ </li>
297
+ <li class="nav-item">
298
+ <a href="../../layout/sidebar-mini.html" class="nav-link">
299
+ <i class="nav-icon fa-regular fa-circle"></i>
300
+ <p>Sidebar Mini</p>
301
+ </a>
302
+ </li>
303
+ <li class="nav-item">
304
+ <a href="../../layout/layout-rtl.html" class="nav-link">
305
+ <i class="nav-icon fa-regular fa-circle"></i>
306
+ <p>Layout RTL</p>
307
+ </a>
308
+ </li>
309
+ </ul>
310
+ </li>
311
+ <li class="nav-item">
312
+ <a href="javascript:;" class="nav-link">
313
+ <i class="nav-icon fa-solid fa-tree"></i>
314
+ <p>
315
+ UI Elements
316
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
317
+ </p>
318
+ </a>
319
+ <ul class="nav nav-treeview">
320
+ <li class="nav-item">
321
+ <a href="../../UI/timeline.html" class="nav-link">
322
+ <i class="nav-icon fa-regular fa-circle"></i>
323
+ <p>Timeline</p>
324
+ </a>
325
+ </li>
326
+ </ul>
327
+ </li>
328
+ <li class="nav-item">
329
+ <a href="javascript:;" class="nav-link">
330
+ <i class="nav-icon fa-solid fa-pen-to-square"></i>
331
+ <p>
332
+ Forms
333
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
334
+ </p>
335
+ </a>
336
+ <ul class="nav nav-treeview">
337
+ <li class="nav-item">
338
+ <a href="../../forms/general.html" class="nav-link">
339
+ <i class="nav-icon fa-regular fa-circle"></i>
340
+ <p>General Elements</p>
341
+ </a>
342
+ </li>
343
+ </ul>
344
+ </li>
345
+ <li class="nav-item">
346
+ <a href="javascript:;" class="nav-link">
347
+ <i class="nav-icon fa-solid fa-table"></i>
348
+ <p>
349
+ Tables
350
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
351
+ </p>
352
+ </a>
353
+ <ul class="nav nav-treeview">
354
+ <li class="nav-item">
355
+ <a href="../../tables/simple.html" class="nav-link">
356
+ <i class="nav-icon fa-regular fa-circle"></i>
357
+ <p>Simple Tables</p>
358
+ </a>
359
+ </li>
360
+ </ul>
361
+ </li>
362
+
363
+ <li class="nav-header">EXAMPLES</li>
364
+ <li class="nav-item">
365
+ <a href="javascript:;" class="nav-link">
366
+ <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
367
+ <p>
368
+ Login & Register
369
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
370
+ </p>
371
+ </a>
372
+ <ul class="nav nav-treeview">
373
+ <li class="nav-item">
374
+ <a href="../../examples/login.html" class="nav-link ">
375
+ <i class="nav-icon fa-regular fa-circle"></i>
376
+ <p>Login v1</p>
377
+ </a>
378
+ </li>
379
+ <li class="nav-item">
380
+ <a href="../../examples/register.html" class="nav-link ">
381
+ <i class="nav-icon fa-regular fa-circle"></i>
382
+ <p>Register v1</p>
383
+ </a>
384
+ </li>
385
+ </ul>
386
+ </li>
387
+
388
+ <li class="nav-header">DOCUMENTATIONS</li>
389
+ <li class="nav-item">
390
+ <a href="../../docs/index.html" class="nav-link">
391
+ <i class="nav-icon fa-solid fa-download"></i>
392
+ <p>Installation</p>
393
+ </a>
394
+ </li>
395
+ <li class="nav-item">
396
+ <a href="../../docs/layout.html" class="nav-link">
397
+ <i class="nav-icon fa-solid fa-grip"></i>
398
+ <p>Layout</p>
399
+ </a>
400
+ </li>
401
+ <li class="nav-item">
402
+ <a href="../../docs/color-mode.html" class="nav-link">
403
+ <i class="nav-icon fa-solid fa-star-half-stroke"></i>
404
+ <p>Color Mode</p>
405
+ </a>
406
+ </li>
407
+ <li class="nav-item">
408
+ <a href="javascript:;" class="nav-link">
409
+ <i class="nav-icon fa-solid fa-swatchbook"></i>
410
+ <p>
411
+ Components
412
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
413
+ </p>
414
+ </a>
415
+ <ul class="nav nav-treeview">
416
+ <li class="nav-item">
417
+ <a href="../../docs/components/main-header.html" class="nav-link">
418
+ <i class="nav-icon fa-regular fa-circle"></i>
419
+ <p>Main Header</p>
420
+ </a>
421
+ </li>
422
+ </ul>
423
+ </li>
424
+ <li class="nav-item">
425
+ <a href="../../docs/browser-support.html" class="nav-link">
426
+ <i class="nav-icon fa-solid fa-edge"></i>
427
+ <p>Browser Support</p>
428
+ </a>
429
+ </li>
430
+
431
+ <li class="nav-header">MULTI LEVEL EXAMPLE</li>
432
+ <li class="nav-item">
433
+ <a href="javascript:;" class="nav-link">
434
+ <i class="nav-icon fa-solid fa-circle"></i>
435
+ <p>Level 1</p>
436
+ </a>
437
+ </li>
438
+ <li class="nav-item">
439
+ <a href="javascript:;" class="nav-link">
440
+ <i class="nav-icon fa-solid fa-circle"></i>
441
+ <p>
442
+ Level 1
443
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
444
+ </p>
445
+ </a>
446
+ <ul class="nav nav-treeview">
447
+ <li class="nav-item">
448
+ <a href="javascript:;" class="nav-link">
449
+ <i class="nav-icon fa-regular fa-circle"></i>
450
+ <p>Level 2</p>
451
+ </a>
452
+ </li>
453
+ <li class="nav-item">
454
+ <a href="javascript:;" class="nav-link">
455
+ <i class="nav-icon fa-regular fa-circle"></i>
456
+ <p>
457
+ Level 2
458
+ <i class="nav-arrow fa-solid fa-angle-right"></i>
459
+ </p>
460
+ </a>
461
+ <ul class="nav nav-treeview">
462
+ <li class="nav-item">
463
+ <a href="javascript:;" class="nav-link">
464
+ <i class="nav-icon fa-regular fa-dot-circle"></i>
465
+ <p>Level 3</p>
466
+ </a>
467
+ </li>
468
+ <li class="nav-item">
469
+ <a href="javascript:;" class="nav-link">
470
+ <i class="nav-icon fa-regular fa-dot-circle"></i>
471
+ <p>Level 3</p>
472
+ </a>
473
+ </li>
474
+ <li class="nav-item">
475
+ <a href="javascript:;" class="nav-link">
476
+ <i class="nav-icon fa-regular fa-dot-circle"></i>
477
+ <p>Level 3</p>
478
+ </a>
479
+ </li>
480
+ </ul>
481
+ </li>
482
+ <li class="nav-item">
483
+ <a href="javascript:;" class="nav-link">
484
+ <i class="nav-icon fa-regular fa-circle"></i>
485
+ <p>Level 2</p>
486
+ </a>
487
+ </li>
488
+ </ul>
489
+ </li>
490
+ <li class="nav-item">
491
+ <a href="javascript:;" class="nav-link">
492
+ <i class="nav-icon fa-solid fa-circle"></i>
493
+ <p>Level 1</p>
494
+ </a>
495
+ </li>
496
+ <li class="nav-header">LABELS</li>
497
+ <li class="nav-item">
498
+ <a href="javascript:;" class="nav-link">
499
+ <i class="nav-icon fa-regular fa-circle text-danger"></i>
500
+ <p class="text">Important</p>
501
+ </a>
502
+ </li>
503
+ <li class="nav-item">
504
+ <a href="javascript:;" class="nav-link">
505
+ <i class="nav-icon fa-regular fa-circle text-warning"></i>
506
+ <p>Warning</p>
507
+ </a>
508
+ </li>
509
+ <li class="nav-item">
510
+ <a href="javascript:;" class="nav-link">
511
+ <i class="nav-icon fa-regular fa-circle text-info"></i>
512
+ <p>Informational</p>
513
+ </a>
514
+ </li>
515
+ </ul>
516
+ </nav>
548
517
  </div>
549
- <!-- /.col -->
550
- <div class="col-md-3">
551
- <div class="card card-success">
552
- <div class="card-header">
553
- <h3 class="card-title">Collapsable</h3>
554
-
555
- <div class="card-tools">
556
- <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
557
- <i class="fa-solid fa-minus"></i>
558
- </button>
559
- </div>
560
- <!-- /.card-tools -->
561
- </div>
562
- <!-- /.card-header -->
563
- <div class="card-body">
564
- The body of the card
518
+ <!-- /.sidebar -->
519
+ </aside>
520
+ <!-- Main content -->
521
+ <main class="app-main">
522
+ <div class="app-content-header">
523
+ <div class="container-fluid">
524
+ <div class="row">
525
+ <div class="col-sm-6">
526
+ <h3 class="mb-0">Cards</h3>
527
+ </div>
528
+ <div class="col-sm-6">
529
+ <ol class="breadcrumb float-sm-end">
530
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
531
+ <li class="breadcrumb-item active" aria-current="page">Cards</li>
532
+ </ol>
533
+ </div>
534
+ </div>
565
535
  </div>
566
- <!-- /.card-body -->
567
- </div>
568
- <!-- /.card -->
569
536
  </div>
570
- <!-- /.col -->
571
- <div class="col-md-3">
572
- <div class="card card-warning">
573
- <div class="card-header">
574
- <h3 class="card-title">Removable</h3>
575
-
576
- <div class="card-tools">
577
- <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
578
- <i class="fa-solid fa-times"></i>
579
- </button>
580
- </div>
581
- <!-- /.card-tools -->
582
- </div>
583
- <!-- /.card-header -->
584
- <div class="card-body">
585
- The body of the card
586
- </div>
587
- <!-- /.card-body -->
588
- </div>
589
- <!-- /.card -->
537
+ <!-- Main content -->
538
+ <div class="app-content">
539
+ <div class="container-fluid">
540
+ <h4 class="mb-2">Cards</h4>
541
+
542
+ <h5 class="mb-2">Abilities</h5>
543
+ <div class="row">
544
+ <div class="col-md-3">
545
+ <div class="card card-primary collapsed-card">
546
+ <div class="card-header">
547
+ <h3 class="card-title">Expandable</h3>
548
+
549
+ <div class="card-tools">
550
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
551
+ </button>
552
+ </div>
553
+ <!-- /.card-tools -->
554
+ </div>
555
+ <!-- /.card-header -->
556
+ <div class="card-body">
557
+ The body of the card
558
+ </div>
559
+ <!-- /.card-body -->
560
+ </div>
561
+ <!-- /.card -->
562
+ </div>
563
+ <!-- /.col -->
564
+ <div class="col-md-3">
565
+ <div class="card card-success">
566
+ <div class="card-header">
567
+ <h3 class="card-title">Collapsable</h3>
568
+
569
+ <div class="card-tools">
570
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
571
+ </button>
572
+ </div>
573
+ <!-- /.card-tools -->
574
+ </div>
575
+ <!-- /.card-header -->
576
+ <div class="card-body">
577
+ The body of the card
578
+ </div>
579
+ <!-- /.card-body -->
580
+ </div>
581
+ <!-- /.card -->
582
+ </div>
583
+ <!-- /.col -->
584
+ <div class="col-md-3">
585
+ <div class="card card-warning">
586
+ <div class="card-header">
587
+ <h3 class="card-title">Removable</h3>
588
+
589
+ <div class="card-tools">
590
+ <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
591
+ </button>
592
+ </div>
593
+ <!-- /.card-tools -->
594
+ </div>
595
+ <!-- /.card-header -->
596
+ <div class="card-body">
597
+ The body of the card
598
+ </div>
599
+ <!-- /.card-body -->
600
+ </div>
601
+ <!-- /.card -->
602
+ </div>
603
+ <!-- /.col -->
604
+ <div class="col-md-3">
605
+ <div class="card card-danger">
606
+ <div class="card-header">
607
+ <h3 class="card-title">Maximizable</h3>
608
+
609
+ <div class="card-tools">
610
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
611
+ </button>
612
+ </div>
613
+ <!-- /.card-tools -->
614
+ </div>
615
+ <!-- /.card-header -->
616
+ <div class="card-body">
617
+ The body of the card
618
+ </div>
619
+ <!-- /.card-body -->
620
+ </div>
621
+ <!-- /.card -->
622
+ </div>
623
+ <!-- /.col -->
624
+ </div>
625
+
626
+ <h5 class="mb-2">Card Outlined</h5>
627
+ <div class="row">
628
+ <div class="col-md-3">
629
+ <div class="card card-outline card-primary collapsed-card">
630
+ <div class="card-header">
631
+ <h3 class="card-title">Expandable</h3>
632
+
633
+ <div class="card-tools">
634
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
635
+ </button>
636
+ </div>
637
+ <!-- /.card-tools -->
638
+ </div>
639
+ <!-- /.card-header -->
640
+ <div class="card-body">
641
+ The body of the card
642
+ </div>
643
+ <!-- /.card-body -->
644
+ </div>
645
+ <!-- /.card -->
646
+ </div>
647
+ <!-- /.col -->
648
+ <div class="col-md-3">
649
+ <div class="card card-outline card-success">
650
+ <div class="card-header">
651
+ <h3 class="card-title">Collapsable</h3>
652
+
653
+ <div class="card-tools">
654
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
655
+ </button>
656
+ </div>
657
+ <!-- /.card-tools -->
658
+ </div>
659
+ <!-- /.card-header -->
660
+ <div class="card-body">
661
+ The body of the card
662
+ </div>
663
+ <!-- /.card-body -->
664
+ </div>
665
+ <!-- /.card -->
666
+ </div>
667
+ <!-- /.col -->
668
+ <div class="col-md-3">
669
+ <div class="card card-outline card-warning">
670
+ <div class="card-header">
671
+ <h3 class="card-title">Removable</h3>
672
+
673
+ <div class="card-tools">
674
+ <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
675
+ </button>
676
+ </div>
677
+ <!-- /.card-tools -->
678
+ </div>
679
+ <!-- /.card-header -->
680
+ <div class="card-body">
681
+ The body of the card
682
+ </div>
683
+ <!-- /.card-body -->
684
+ </div>
685
+ <!-- /.card -->
686
+ </div>
687
+ <!-- /.col -->
688
+ <div class="col-md-3">
689
+ <div class="card card-outline card-danger">
690
+ <div class="card-header">
691
+ <h3 class="card-title">Maximizable</h3>
692
+
693
+ <div class="card-tools">
694
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
695
+ </button>
696
+ </div>
697
+ <!-- /.card-tools -->
698
+ </div>
699
+ <!-- /.card-header -->
700
+ <div class="card-body">
701
+ The body of the card
702
+ </div>
703
+ <!-- /.card-body -->
704
+ </div>
705
+ <!-- /.card -->
706
+ </div>
707
+ <!-- /.col -->
708
+ </div>
709
+
710
+ <h5 class="mb-2">Card with <code>.text-bg-*</code> </h5>
711
+ <div class="row">
712
+ <div class="col-md-3">
713
+ <div class="card text-bg-primary collapsed-card">
714
+ <div class="card-header">
715
+ <h3 class="card-title">Expandable</h3>
716
+
717
+ <div class="card-tools">
718
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
719
+ </button>
720
+ </div>
721
+ <!-- /.card-tools -->
722
+ </div>
723
+ <!-- /.card-header -->
724
+ <div class="card-body">
725
+ The body of the card
726
+ </div>
727
+ <!-- /.card-body -->
728
+ </div>
729
+ <!-- /.card -->
730
+ </div>
731
+ <!-- /.col -->
732
+ <div class="col-md-3">
733
+ <div class="card text-bg-success">
734
+ <div class="card-header">
735
+ <h3 class="card-title">Collapsable</h3>
736
+
737
+ <div class="card-tools">
738
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
739
+ </button>
740
+ </div>
741
+ <!-- /.card-tools -->
742
+ </div>
743
+ <!-- /.card-header -->
744
+ <div class="card-body">
745
+ The body of the card
746
+ </div>
747
+ <!-- /.card-body -->
748
+ </div>
749
+ <!-- /.card -->
750
+ </div>
751
+ <!-- /.col -->
752
+ <div class="col-md-3">
753
+ <div class="card text-bg-warning">
754
+ <div class="card-header">
755
+ <h3 class="card-title">Removable</h3>
756
+
757
+ <div class="card-tools">
758
+ <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
759
+ </button>
760
+ </div>
761
+ <!-- /.card-tools -->
762
+ </div>
763
+ <!-- /.card-header -->
764
+ <div class="card-body">
765
+ The body of the card
766
+ </div>
767
+ <!-- /.card-body -->
768
+ </div>
769
+ <!-- /.card -->
770
+ </div>
771
+ <!-- /.col -->
772
+ <div class="col-md-3">
773
+ <div class="card text-bg-danger">
774
+ <div class="card-header">
775
+ <h3 class="card-title">Maximizable</h3>
776
+
777
+ <div class="card-tools">
778
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
779
+ </button>
780
+ </div>
781
+ <!-- /.card-tools -->
782
+ </div>
783
+ <!-- /.card-header -->
784
+ <div class="card-body">
785
+ The body of the card
786
+ </div>
787
+ <!-- /.card-body -->
788
+ </div>
789
+ <!-- /.card -->
790
+ </div>
791
+ <!-- /.col -->
792
+ </div>
793
+ <!-- /.row -->
794
+ </div><!-- /.container-fluid -->
590
795
  </div>
591
- <!-- /.col -->
592
- <div class="col-md-3">
593
- <div class="card card-danger">
594
- <div class="card-header">
595
- <h3 class="card-title">Maximizable</h3>
596
-
597
- <div class="card-tools">
598
- <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize">
599
- <i class="fa-solid fa-expand"></i>
600
- </button>
601
- </div>
602
- <!-- /.card-tools -->
603
- </div>
604
- <!-- /.card-header -->
605
- <div class="card-body">
606
- The body of the card
607
- </div>
608
- <!-- /.card-body -->
609
- </div>
610
- <!-- /.card -->
796
+ <!-- /.content -->
797
+ </main>
798
+ <!-- /.app-content -->
799
+
800
+ <!-- Main Footer -->
801
+ <footer class="app-footer">
802
+ <!-- To the end -->
803
+ <div class="float-end d-none d-sm-inline">
804
+ Anything you want
611
805
  </div>
612
- <!-- /.col -->
613
- </div>
614
- <!-- /.row -->
615
- </div><!-- /.container-fluid -->
616
- </div>
617
- <!-- /.content -->
618
- </main>
619
- <!-- /.content-wrapper -->
620
-
621
- <!-- Main Footer -->
622
- <footer class="main-footer">
623
- <!-- To the end -->
624
- <div class="float-end d-none d-sm-inline">
625
- Anything you want
626
- </div>
627
- <!-- Default to the start -->
628
- <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
629
- </footer>
630
-
631
- </div>
632
- <!-- ./wrapper -->
633
-
634
- <!-- OPTIONAL SCRIPTS -->
635
- <!-- overlayScrollbars -->
636
- <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-/dwBbLeVyyWBtWfH3jHdL2oVVmLKoGnEFzoOSL3nJC0=" crossorigin="anonymous"></script>
637
-
638
- <!-- OPTIONAL SCRIPT For Bootstrap 5 -->
639
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
640
-
641
- <!-- Bootstrap 5 -->
642
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
643
-
644
- <!-- REQUIRED SCRIPTS -->
645
- <!-- AdminLTE App -->
646
- <script src="../../js/adminlte.js"></script>
647
-
648
- <!-- OPTIONAL SCRIPTS -->
649
- <script>
650
- const SELECTOR_SIDEBAR = '.sidebar'
651
- const Default = {
652
- scrollbarTheme: 'os-theme-light',
653
- scrollbarAutoHide: 'leave'
654
- }
655
-
656
- document.addEventListener("DOMContentLoaded", function() {
657
- if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
658
- OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR), {
659
- scrollbars: {
660
- theme: Default.scrollbarTheme,
661
- autoHide: Default.scrollbarAutoHide,
662
- clickScroll: true
806
+ <!-- Default to the start -->
807
+ <strong>Copyright &copy; 2014-2023 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
808
+ </footer>
809
+ </div>
810
+ <!-- ./app-wrapper -->
811
+
812
+ <!-- OPTIONAL SCRIPTS --><!-- overlayscrollbars -->
813
+ <script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
814
+
815
+ <!-- @popperjs for Bootstrap 5 -->
816
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
817
+
818
+ <!-- Bootstrap 5 -->
819
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
820
+
821
+ <!-- REQUIRED SCRIPTS --><!-- AdminLTE App -->
822
+ <script src="../../../dist/js/adminlte.js"></script>
823
+
824
+ <!-- OPTIONAL SCRIPTS -->
825
+ <script>
826
+ const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
827
+ const Default = {
828
+ scrollbarTheme: 'os-theme-light',
829
+ scrollbarAutoHide: 'leave',
830
+ scrollbarClickScroll: true
663
831
  }
664
- })
665
- }
666
- })
667
- </script>
668
-
669
- <!-- DON'T USE THIS IN PRODUCTION -->
670
- <script>
671
- // Color Mode Toggler
672
- (() => {
673
- 'use strict'
674
-
675
- const storedTheme = localStorage.getItem('theme')
676
-
677
- const getPreferredTheme = () => {
678
- if (storedTheme) {
679
- return storedTheme
680
- }
681
-
682
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
683
- }
684
-
685
- const setTheme = function (theme) {
686
- if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
687
- document.documentElement.setAttribute('data-bs-theme', 'dark')
688
- } else {
689
- document.documentElement.setAttribute('data-bs-theme', theme)
690
- }
691
- }
692
-
693
- setTheme(getPreferredTheme())
694
-
695
- const showActiveTheme = theme => {
696
- const activeThemeIcon = document.querySelector('.theme-icon-active i')
697
- const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
698
- const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
699
-
700
- document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
701
- element.classList.remove('active')
702
- })
703
-
704
- btnToActive.classList.add('active')
705
- activeThemeIcon.setAttribute('class', svgOfActiveBtn)
706
- }
707
-
708
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
709
- if (storedTheme !== 'light' || storedTheme !== 'dark') {
710
- setTheme(getPreferredTheme())
711
- }
712
- })
713
-
714
- window.addEventListener('DOMContentLoaded', () => {
715
- showActiveTheme(getPreferredTheme())
716
-
717
- document.querySelectorAll('[data-bs-theme-value]')
718
- .forEach(toggle => {
719
- toggle.addEventListener('click', () => {
720
- const theme = toggle.getAttribute('data-bs-theme-value')
721
- localStorage.setItem('theme', theme)
722
- setTheme(theme)
723
- showActiveTheme(theme)
724
- })
725
- })
726
- })
727
- })()
728
- </script>
729
832
 
833
+ document.addEventListener("DOMContentLoaded", function() {
834
+ const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
835
+ if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
836
+ OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
837
+ scrollbars: {
838
+ theme: Default.scrollbarTheme,
839
+ autoHide: Default.scrollbarAutoHide,
840
+ clickScroll: Default.scrollbarClickScroll
841
+ }
842
+ })
843
+ }
844
+ })
845
+ </script>
730
846
  </body>
731
847
 
732
848
  </html>