admin-lte 4.0.0-alpha2 → 4.0.0-beta1

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 (142) hide show
  1. package/.bundlewatch.config.json +6 -6
  2. package/.cache/.eslintcache +1 -1
  3. package/.cache/.stylelintcache +1 -1
  4. package/.gitpod.yml +1 -1
  5. package/README.md +9 -4
  6. package/dist/assets/img/AdminLTEFullLogo.png +0 -0
  7. package/dist/css/adminlte.css +879 -418
  8. package/dist/css/adminlte.css.map +1 -1
  9. package/dist/css/adminlte.min.css +2 -2
  10. package/dist/css/adminlte.min.css.map +1 -1
  11. package/dist/css/adminlte.rtl.css +886 -416
  12. package/dist/css/adminlte.rtl.css.map +1 -1
  13. package/dist/css/adminlte.rtl.min.css +2 -2
  14. package/dist/css/adminlte.rtl.min.css.map +1 -1
  15. package/dist/js/adminlte.js +178 -96
  16. package/dist/js/adminlte.js.map +1 -1
  17. package/dist/js/adminlte.min.js +3 -3
  18. package/dist/js/adminlte.min.js.map +1 -1
  19. package/dist/pages/UI/general.html +895 -0
  20. package/dist/pages/UI/timeline.html +309 -515
  21. package/dist/pages/docs/browser-support.html +265 -433
  22. package/dist/pages/docs/color-mode.html +482 -615
  23. package/dist/pages/docs/components/main-header.html +516 -703
  24. package/dist/pages/docs/components/main-sidebar.html +550 -0
  25. package/dist/pages/docs/faq.html +433 -0
  26. package/dist/pages/docs/how-to-contribute.html +474 -0
  27. package/dist/pages/docs/introduction.html +463 -0
  28. package/dist/pages/docs/javascript/treeview.html +453 -0
  29. package/dist/pages/docs/layout.html +293 -433
  30. package/dist/pages/docs/license.html +436 -0
  31. package/dist/pages/examples/lockscreen.html +69 -0
  32. package/dist/pages/examples/login-v2.html +88 -0
  33. package/dist/pages/examples/login.html +49 -100
  34. package/dist/pages/examples/register-v2.html +90 -0
  35. package/dist/pages/examples/register.html +50 -103
  36. package/dist/pages/forms/general.html +430 -454
  37. package/dist/pages/index.html +466 -740
  38. package/dist/pages/index2.html +672 -1041
  39. package/dist/pages/index3.html +371 -629
  40. package/dist/pages/layout/collapsed-sidebar.html +441 -0
  41. package/dist/pages/layout/fixed-complete.html +541 -0
  42. package/dist/pages/layout/fixed-sidebar.html +263 -446
  43. package/dist/pages/layout/layout-rtl.html +263 -445
  44. package/dist/pages/layout/logo-switch.html +234 -0
  45. package/dist/pages/layout/sidebar-mini.html +263 -445
  46. package/dist/pages/layout/unfixed-sidebar.html +263 -445
  47. package/dist/pages/tables/simple.html +314 -499
  48. package/dist/pages/widgets/cards.html +326 -629
  49. package/dist/pages/widgets/info-box.html +348 -674
  50. package/dist/pages/widgets/small-box.html +279 -465
  51. package/index.html +6 -10
  52. package/package.json +34 -30
  53. package/src/assets/img/AdminLTEFullLogo.png +0 -0
  54. package/src/config/astro.config.mjs +3 -1
  55. package/src/html/.prettierrc.js +11 -0
  56. package/src/html/components/_head.astro +32 -26
  57. package/src/html/components/_scripts.astro +27 -28
  58. package/src/html/components/dashboard/_footer.astro +14 -8
  59. package/src/html/components/dashboard/_sidenav.astro +352 -113
  60. package/src/html/components/dashboard/_topbar.astro +99 -50
  61. package/src/html/components/docs/{browser-support/index.md → browser-support.mdx} +2 -1
  62. package/src/html/components/docs/color-mode.mdx +169 -0
  63. package/src/html/components/docs/components/{main-header-1.md → main-header.mdx} +60 -21
  64. package/src/html/components/docs/components/main-sidebar.mdx +129 -0
  65. package/src/html/components/docs/faq.mdx +11 -0
  66. package/src/html/components/docs/how-to-contribute.mdx +34 -0
  67. package/src/html/components/docs/{introduction/index.md → introduction.mdx} +30 -5
  68. package/src/html/components/docs/license.mdx +9 -0
  69. package/src/html/components/javascript/treeview.mdx +39 -0
  70. package/src/html/pages/UI/general.astro +1451 -0
  71. package/src/html/pages/UI/timeline.astro +111 -48
  72. package/src/html/pages/docs/browser-support.astro +24 -11
  73. package/src/html/pages/docs/color-mode.astro +91 -42
  74. package/src/html/pages/docs/components/main-header.astro +134 -46
  75. package/src/html/pages/docs/components/main-sidebar.astro +71 -0
  76. package/src/html/pages/docs/faq.astro +71 -0
  77. package/src/html/pages/docs/how-to-contribute.astro +71 -0
  78. package/src/html/pages/docs/{index.astro → introduction.astro} +24 -11
  79. package/src/html/pages/docs/javascript/treeview.astro +71 -0
  80. package/src/html/pages/docs/layout.astro +62 -19
  81. package/src/html/pages/docs/license.astro +71 -0
  82. package/src/html/pages/examples/lockscreen.astro +63 -0
  83. package/src/html/pages/examples/login-v2.astro +109 -0
  84. package/src/html/pages/examples/login.astro +34 -16
  85. package/src/html/pages/examples/register-v2.astro +116 -0
  86. package/src/html/pages/examples/register.astro +36 -18
  87. package/src/html/pages/forms/general.astro +568 -37
  88. package/src/html/pages/index.astro +403 -157
  89. package/src/html/pages/index2.astro +715 -255
  90. package/src/html/pages/index3.astro +298 -197
  91. package/src/html/pages/layout/collapsed-sidebar.astro +110 -0
  92. package/src/html/pages/layout/fixed-complete.astro +209 -0
  93. package/src/html/pages/layout/fixed-sidebar.astro +52 -27
  94. package/src/html/pages/layout/layout-rtl.astro +53 -28
  95. package/src/html/pages/layout/logo-switch.astro +212 -0
  96. package/src/html/pages/layout/sidebar-mini.astro +53 -28
  97. package/src/html/pages/layout/unfixed-sidebar.astro +51 -27
  98. package/src/html/pages/tables/simple.astro +226 -86
  99. package/src/html/pages/widgets/cards.astro +137 -72
  100. package/src/html/pages/widgets/info-box.astro +96 -41
  101. package/src/html/pages/widgets/small-box.astro +93 -32
  102. package/src/scss/_app-content.scss +52 -0
  103. package/src/scss/_app-footer.scss +1 -1
  104. package/src/scss/_app-main.scss +6 -5
  105. package/src/scss/_app-sidebar.scss +244 -70
  106. package/src/scss/_bootstrap-variables.scss +26 -22
  107. package/src/scss/_callouts.scss +6 -0
  108. package/src/scss/_cards.scss +32 -7
  109. package/src/scss/_compact-mode.scss +79 -0
  110. package/src/scss/_direct-chat.scss +5 -0
  111. package/src/scss/_dropdown.scss +1 -0
  112. package/src/scss/_info-box.scss +2 -10
  113. package/src/scss/_small-box.scss +0 -3
  114. package/src/scss/_timeline.scss +1 -0
  115. package/src/scss/_toasts.scss +33 -0
  116. package/src/scss/_variables.scss +32 -9
  117. package/src/scss/adminlte.scss +1 -2
  118. package/src/scss/mixins/_animations.scss +0 -5
  119. package/src/scss/pages/_lockscreen.scss +75 -0
  120. package/src/scss/pages/_login_and_register.scss +1 -3
  121. package/src/scss/parts/_core.scss +2 -0
  122. package/src/scss/parts/_extra-components.scss +1 -0
  123. package/src/scss/parts/_pages.scss +1 -0
  124. package/src/ts/adminlte.ts +3 -1
  125. package/src/ts/card-widget.ts +20 -52
  126. package/src/ts/direct-chat.ts +5 -4
  127. package/src/ts/fullscreen.ts +110 -0
  128. package/src/ts/layout.ts +5 -4
  129. package/src/ts/push-menu.ts +6 -22
  130. package/src/ts/treeview.ts +34 -11
  131. package/src/ts/util/index.ts +15 -13
  132. package/src/utils/index.js +20 -3
  133. package/.idea/AdminLTE.iml +0 -12
  134. package/.idea/codeStyles/Project.xml +0 -29
  135. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  136. package/.idea/inspectionProfiles/Project_Default.xml +0 -7
  137. package/.idea/modules.xml +0 -8
  138. package/.idea/php.xml +0 -28
  139. package/.idea/vcs.xml +0 -6
  140. package/dist/pages/docs.html +0 -617
  141. package/src/html/components/docs/color-mode/navbar-html.md +0 -80
  142. package/src/html/components/docs/color-mode/toggle-script.md +0 -48
package/src/html/components/dashboard/_sidenav.astro CHANGED
@@ -1,163 +1,282 @@
1
1
  ---
2
- import { convertPathToHtml } from '../../../utils/index.js';
3
- const { path, mainPage, page } = Astro.props
4
- const htmlPath = convertPathToHtml(path)
2
+ import {convertPathToHtml} from "../../../utils/index.js";
3
+ const {path, mainPage, page} = Astro.props;
4
+ const htmlPath = convertPathToHtml(path);
5
5
  ---
6
6
 
7
- <!-- Sidebar Container -->
7
+ <!--begin::Sidebar-->
8
8
  <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
9
+ <!--begin::Sidebar Brand-->
9
10
  <div class="sidebar-brand">
10
- <a href={htmlPath + '/index.html'} class="brand-link">
11
- <img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
11
+ <!--begin::Brand Link-->
12
+ <a href={htmlPath + "/index.html"} class="brand-link">
13
+ <!--begin::Brand Image-->
14
+ <img
15
+ src={path + "/assets/img/AdminLTELogo.png"}
16
+ alt="AdminLTE Logo"
17
+ class="brand-image opacity-75 shadow"
18
+ />
19
+ <!--end::Brand Image-->
20
+ <!--begin::Brand Text-->
12
21
  <span class="brand-text fw-light">AdminLTE 4</span>
22
+ <!--end::Brand Text-->
13
23
  </a>
24
+ <!--end::Brand Link-->
14
25
  </div>
15
- <!-- Sidebar -->
26
+ <!--end::Sidebar Brand-->
27
+ <!--begin::Sidebar Wrapper-->
16
28
  <div class="sidebar-wrapper">
17
29
  <nav class="mt-2">
18
- <!-- Sidebar Menu -->
19
- <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
20
- <li class:list={['nav-item', mainPage === 'dashboard' && 'menu-open']}>
21
- <a href="javascript:;" class:list={['nav-link', mainPage === 'dashboard' && 'active']}>
22
- <i class="nav-icon fa-solid fa-gauge-high"></i>
30
+ <!--begin::Sidebar Menu-->
31
+ <ul
32
+ class="nav sidebar-menu flex-column"
33
+ data-lte-toggle="treeview"
34
+ role="menu"
35
+ data-accordion="false"
36
+ >
37
+ <li class:list={["nav-item", mainPage === "dashboard" && "menu-open"]}>
38
+ <a
39
+ href="#"
40
+ class:list={["nav-link", mainPage === "dashboard" && "active"]}
41
+ >
42
+ <i class="nav-icon bi bi-speedometer"></i>
23
43
  <p>
24
44
  Dashboard
25
- <i class="nav-arrow fa-solid fa-angle-right"></i>
45
+ <i class="nav-arrow bi bi-chevron-right"></i>
26
46
  </p>
27
47
  </a>
28
48
  <ul class="nav nav-treeview">
29
49
  <li class="nav-item">
30
- <a href={htmlPath + '/index.html'} class:list={['nav-link', page === 'index' && 'active']}>
31
- <i class="nav-icon fa-regular fa-circle"></i>
50
+ <a
51
+ href={htmlPath + "/index.html"}
52
+ class:list={["nav-link", page === "index" && "active"]}
53
+ >
54
+ <i class="nav-icon bi bi-circle"></i>
32
55
  <p>Dashboard v1</p>
33
56
  </a>
34
57
  </li>
35
58
  <li class="nav-item">
36
- <a href={htmlPath + '/index2.html'} class:list={['nav-link', page === 'index2' && 'active']}>
37
- <i class="nav-icon fa-regular fa-circle"></i>
59
+ <a
60
+ href={htmlPath + "/index2.html"}
61
+ class:list={["nav-link", page === "index2" && "active"]}
62
+ >
63
+ <i class="nav-icon bi bi-circle"></i>
38
64
  <p>Dashboard v2</p>
39
65
  </a>
40
66
  </li>
41
67
  <li class="nav-item">
42
- <a href={htmlPath + '/index3.html'} class:list={['nav-link', page === 'index3' && 'active']}>
43
- <i class="nav-icon fa-regular fa-circle"></i>
68
+ <a
69
+ href={htmlPath + "/index3.html"}
70
+ class:list={["nav-link", page === "index3" && "active"]}
71
+ >
72
+ <i class="nav-icon bi bi-circle"></i>
44
73
  <p>Dashboard v3</p>
45
74
  </a>
46
75
  </li>
47
76
  </ul>
48
77
  </li>
49
- <li class:list={['nav-item', mainPage === 'widgets' && 'menu-open']}>
50
- <a href="javascript:;" class:list={['nav-link', mainPage === 'widgets' && 'active']}>
51
- <i class="nav-icon fa-solid fa-box-open"></i>
78
+ <li class:list={["nav-item", mainPage === "widgets" && "menu-open"]}>
79
+ <a
80
+ href="#"
81
+ class:list={["nav-link", mainPage === "widgets" && "active"]}
82
+ >
83
+ <i class="nav-icon bi bi-box-seam-fill"></i>
52
84
  <p>
53
85
  Widgets
54
- <i class="nav-arrow fa-solid fa-angle-right"></i>
86
+ <i class="nav-arrow bi bi-chevron-right"></i>
55
87
  </p>
56
88
  </a>
57
89
  <ul class="nav nav-treeview">
58
90
  <li class="nav-item">
59
- <a href={htmlPath + '/widgets/small-box.html'} class:list={['nav-link', page === 'small-box' && 'active']}>
60
- <i class="nav-icon fa-regular fa-circle"></i>
91
+ <a
92
+ href={htmlPath + "/widgets/small-box.html"}
93
+ class:list={["nav-link", page === "small-box" && "active"]}
94
+ >
95
+ <i class="nav-icon bi bi-circle"></i>
61
96
  <p>Small Box</p>
62
97
  </a>
63
98
  </li>
64
99
  <li class="nav-item">
65
- <a href={htmlPath + '/widgets/info-box.html'} class:list={['nav-link', page === 'info-box' && 'active']}>
66
- <i class="nav-icon fa-regular fa-circle"></i>
100
+ <a
101
+ href={htmlPath + "/widgets/info-box.html"}
102
+ class:list={["nav-link", page === "info-box" && "active"]}
103
+ >
104
+ <i class="nav-icon bi bi-circle"></i>
67
105
  <p>info Box</p>
68
106
  </a>
69
107
  </li>
70
108
  <li class="nav-item">
71
- <a href={htmlPath + '/widgets/cards.html'} class:list={['nav-link', page === 'cards' && 'active']}>
72
- <i class="nav-icon fa-regular fa-circle"></i>
109
+ <a
110
+ href={htmlPath + "/widgets/cards.html"}
111
+ class:list={["nav-link", page === "cards" && "active"]}
112
+ >
113
+ <i class="nav-icon bi bi-circle"></i>
73
114
  <p>Cards</p>
74
115
  </a>
75
116
  </li>
76
117
  </ul>
77
118
  </li>
78
-
79
- <li class:list={['nav-item', mainPage === 'layout' && 'menu-open']}>
80
- <a href="javascript:;" class:list={['nav-link', mainPage === 'layout' && 'active']}>
81
- <i class="nav-icon fa-solid fa-copy"></i>
119
+ <li class:list={["nav-item", mainPage === "layout" && "menu-open"]}>
120
+ <a
121
+ href="#"
122
+ class:list={["nav-link", mainPage === "layout" && "active"]}
123
+ >
124
+ <i class="nav-icon bi bi-clipboard-fill"></i>
82
125
  <p>
83
126
  Layout Options
84
- <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
85
- <i class="nav-arrow fa-solid fa-angle-right"></i>
127
+ <span class="nav-badge badge text-bg-secondary me-3"
128
+ >6</span
129
+ >
130
+ <i class="nav-arrow bi bi-chevron-right"></i>
86
131
  </p>
87
132
  </a>
88
133
  <ul class="nav nav-treeview">
89
134
  <li class="nav-item">
90
- <a href={htmlPath + '/layout/unfixed-sidebar.html'} class:list={['nav-link', page === 'unfixed-sidebar' && 'active']}>
91
- <i class="nav-icon fa-regular fa-circle"></i>
92
- <p>Unfixed Sidebar</p>
135
+ <a
136
+ href={htmlPath + "/layout/unfixed-sidebar.html"}
137
+ class:list={[
138
+ "nav-link",
139
+ page === "unfixed-sidebar" && "active",
140
+ ]}
141
+ >
142
+ <i class="nav-icon bi bi-circle"></i>
143
+ <p>Default Sidebar</p>
93
144
  </a>
94
145
  </li>
95
146
  <li class="nav-item">
96
- <a href={htmlPath + '/layout/fixed-sidebar.html'} class:list={['nav-link', page === 'fixed-sidebar' && 'active']}>
97
- <i class="nav-icon fa-regular fa-circle"></i>
147
+ <a
148
+ href={htmlPath + "/layout/fixed-sidebar.html"}
149
+ class:list={["nav-link", page === "fixed-sidebar" && "active"]}
150
+ >
151
+ <i class="nav-icon bi bi-circle"></i>
98
152
  <p>Fixed Sidebar</p>
99
153
  </a>
100
154
  </li>
101
155
  <li class="nav-item">
102
- <a href={htmlPath + '/layout/sidebar-mini.html'} class:list={['nav-link', page === 'sidebar-mini' && 'active']}>
103
- <i class="nav-icon fa-regular fa-circle"></i>
156
+ <a
157
+ href={htmlPath + "/layout/fixed-complete.html"}
158
+ class:list={["nav-link", page === "fixed-complete" && "active"]}
159
+ >
160
+ <i class="nav-icon bi bi-circle"></i>
161
+ <p>Fixed Complete</p>
162
+ </a>
163
+ </li>
164
+ <li class="nav-item">
165
+ <a
166
+ href={htmlPath + "/layout/sidebar-mini.html"}
167
+ class:list={["nav-link", page === "sidebar-mini" && "active"]}
168
+ >
169
+ <i class="nav-icon bi bi-circle"></i>
104
170
  <p>Sidebar Mini</p>
105
171
  </a>
106
172
  </li>
107
173
  <li class="nav-item">
108
- <a href={htmlPath + '/layout/layout-rtl.html'} class:list={['nav-link', page === 'layout-rtl' && 'active']}>
109
- <i class="nav-icon fa-regular fa-circle"></i>
174
+ <a
175
+ href={htmlPath + "/layout/collapsed-sidebar.html"}
176
+ class:list={[
177
+ "nav-link",
178
+ page === "collapsed-sidebar" && "active",
179
+ ]}
180
+ >
181
+ <i class="nav-icon bi bi-circle"></i>
182
+ <p>Sidebar Mini <small>+ Collapsed</small></p>
183
+ </a>
184
+ </li>
185
+ <li class="nav-item">
186
+ <a
187
+ href={htmlPath + "/layout/logo-switch.html"}
188
+ class:list={["nav-link", page === "logo-switch" && "active"]}
189
+ >
190
+ <i class="nav-icon bi bi-circle"></i>
191
+ <p>Sidebar Mini <small>+ Logo Switch</small></p>
192
+ </a>
193
+ </li>
194
+ <li class="nav-item">
195
+ <a
196
+ href={htmlPath + "/layout/layout-rtl.html"}
197
+ class:list={["nav-link", page === "layout-rtl" && "active"]}
198
+ >
199
+ <i class="nav-icon bi bi-circle"></i>
110
200
  <p>Layout RTL</p>
111
201
  </a>
112
202
  </li>
113
203
  </ul>
114
204
  </li>
115
- <li class:list={['nav-item', mainPage === 'ui-elements' && 'menu-open']}>
116
- <a href="javascript:;" class:list={['nav-link', mainPage === 'ui-elements' && 'active']}>
117
- <i class="nav-icon fa-solid fa-tree"></i>
205
+ <li
206
+ class:list={["nav-item", mainPage === "ui-elements" && "menu-open"]}
207
+ >
208
+ <a
209
+ href="#"
210
+ class:list={["nav-link", mainPage === "ui-elements" && "active"]}
211
+ >
212
+ <i class="nav-icon bi bi-tree-fill"></i>
118
213
  <p>
119
214
  UI Elements
120
- <i class="nav-arrow fa-solid fa-angle-right"></i>
215
+ <i class="nav-arrow bi bi-chevron-right"></i>
121
216
  </p>
122
217
  </a>
123
218
  <ul class="nav nav-treeview">
124
219
  <li class="nav-item">
125
- <a href={htmlPath + '/UI/timeline.html'} class:list={['nav-link', page === 'timeline' && 'active']}>
126
- <i class="nav-icon fa-regular fa-circle"></i>
220
+ <a
221
+ href={htmlPath + "/UI/general.html"}
222
+ class:list={["nav-link", page === "general" && "active"]}
223
+ >
224
+ <i class="nav-icon bi bi-circle"></i>
225
+ <p>General</p>
226
+ </a>
227
+ </li>
228
+ <li class="nav-item">
229
+ <a
230
+ href={htmlPath + "/UI/timeline.html"}
231
+ class:list={["nav-link", page === "timeline" && "active"]}
232
+ >
233
+ <i class="nav-icon bi bi-circle"></i>
127
234
  <p>Timeline</p>
128
235
  </a>
129
236
  </li>
130
237
  </ul>
131
238
  </li>
132
- <li class:list={['nav-item', mainPage === 'forms' && 'menu-open']}>
133
- <a href="javascript:;" class:list={['nav-link', mainPage === 'forms' && 'active']}>
134
- <i class="nav-icon fa-solid fa-pen-to-square"></i>
239
+ <li class:list={["nav-item", mainPage === "forms" && "menu-open"]}>
240
+ <a
241
+ href="#"
242
+ class:list={["nav-link", mainPage === "forms" && "active"]}
243
+ >
244
+ <i class="nav-icon bi bi-pencil-square"></i>
135
245
  <p>
136
246
  Forms
137
- <i class="nav-arrow fa-solid fa-angle-right"></i>
247
+ <i class="nav-arrow bi bi-chevron-right"></i>
138
248
  </p>
139
249
  </a>
140
250
  <ul class="nav nav-treeview">
141
251
  <li class="nav-item">
142
- <a href={htmlPath + '/forms/general.html'} class:list={['nav-link', page === 'general' && 'active']}>
143
- <i class="nav-icon fa-regular fa-circle"></i>
252
+ <a
253
+ href={htmlPath + "/forms/general.html"}
254
+ class:list={["nav-link", page === "general" && "active"]}
255
+ >
256
+ <i class="nav-icon bi bi-circle"></i>
144
257
  <p>General Elements</p>
145
258
  </a>
146
259
  </li>
147
260
  </ul>
148
261
  </li>
149
- <li class:list={['nav-item', mainPage === 'tables' && 'menu-open']}>
150
- <a href="javascript:;" class:list={['nav-link', mainPage === 'tables' && 'active']}>
151
- <i class="nav-icon fa-solid fa-table"></i>
262
+ <li class:list={["nav-item", mainPage === "tables" && "menu-open"]}>
263
+ <a
264
+ href="#"
265
+ class:list={["nav-link", mainPage === "tables" && "active"]}
266
+ >
267
+ <i class="nav-icon bi bi-table"></i>
152
268
  <p>
153
269
  Tables
154
- <i class="nav-arrow fa-solid fa-angle-right"></i>
270
+ <i class="nav-arrow bi bi-chevron-right"></i>
155
271
  </p>
156
272
  </a>
157
273
  <ul class="nav nav-treeview">
158
274
  <li class="nav-item">
159
- <a href={htmlPath + '/tables/simple.html'} class:list={['nav-link', page === 'simple' && 'active']}>
160
- <i class="nav-icon fa-regular fa-circle"></i>
275
+ <a
276
+ href={htmlPath + "/tables/simple.html"}
277
+ class:list={["nav-link", page === "simple" && "active"]}
278
+ >
279
+ <i class="nav-icon bi bi-circle"></i>
161
280
  <p>Simple Tables</p>
162
281
  </a>
163
282
  </li>
@@ -166,24 +285,64 @@ const htmlPath = convertPathToHtml(path)
166
285
 
167
286
  <li class="nav-header">EXAMPLES</li>
168
287
  <li class="nav-item">
169
- <a href="javascript:;" class="nav-link">
170
- <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
288
+ <a href="#" class="nav-link">
289
+ <i class="nav-icon bi bi-box-arrow-in-right"></i>
171
290
  <p>
172
- Login & Register
173
- <i class="nav-arrow fa-solid fa-angle-right"></i>
291
+ Auth
292
+ <i class="nav-arrow bi bi-chevron-right"></i>
174
293
  </p>
175
294
  </a>
176
295
  <ul class="nav nav-treeview">
177
296
  <li class="nav-item">
178
- <a href={htmlPath + '/examples/login.html'} class="nav-link ">
179
- <i class="nav-icon fa-regular fa-circle"></i>
180
- <p>Login v1</p>
297
+ <a href="#" class="nav-link">
298
+ <i class="nav-icon bi bi-box-arrow-in-right"></i>
299
+ <p>
300
+ Version 1
301
+ <i class="nav-arrow bi bi-chevron-right"></i>
302
+ </p>
181
303
  </a>
304
+ <ul class="nav nav-treeview">
305
+ <li class="nav-item">
306
+ <a href={htmlPath + "/examples/login.html"} class="nav-link">
307
+ <i class="nav-icon bi bi-circle"></i>
308
+ <p>Login</p>
309
+ </a>
310
+ </li>
311
+ <li class="nav-item">
312
+ <a href={htmlPath + "/examples/register.html"} class="nav-link">
313
+ <i class="nav-icon bi bi-circle"></i>
314
+ <p>Register</p>
315
+ </a>
316
+ </li>
317
+ </ul>
318
+ </li>
319
+ <li class="nav-item">
320
+ <a href="#" class="nav-link">
321
+ <i class="nav-icon bi bi-box-arrow-in-right"></i>
322
+ <p>
323
+ Version 2
324
+ <i class="nav-arrow bi bi-chevron-right"></i>
325
+ </p>
326
+ </a>
327
+ <ul class="nav nav-treeview">
328
+ <li class="nav-item">
329
+ <a href={htmlPath + "/examples/login-v2.html"} class="nav-link">
330
+ <i class="nav-icon bi bi-circle"></i>
331
+ <p>Login</p>
332
+ </a>
333
+ </li>
334
+ <li class="nav-item">
335
+ <a href={htmlPath + "/examples/register-v2.html"} class="nav-link">
336
+ <i class="nav-icon bi bi-circle"></i>
337
+ <p>Register</p>
338
+ </a>
339
+ </li>
340
+ </ul>
182
341
  </li>
183
342
  <li class="nav-item">
184
- <a href={htmlPath + '/examples/register.html'} class="nav-link ">
185
- <i class="nav-icon fa-regular fa-circle"></i>
186
- <p>Register v1</p>
343
+ <a href={htmlPath + "/examples/lockscreen.html"} class="nav-link">
344
+ <i class="nav-icon bi bi-circle"></i>
345
+ <p>Lockscreen</p>
187
346
  </a>
188
347
  </li>
189
348
  </ul>
@@ -191,133 +350,213 @@ const htmlPath = convertPathToHtml(path)
191
350
 
192
351
  <li class="nav-header">DOCUMENTATIONS</li>
193
352
  <li class="nav-item">
194
- <a href={htmlPath + '/docs/index.html'} class:list={['nav-link', page === 'introduction' && 'active']}>
195
- <i class="nav-icon fa-solid fa-download"></i>
353
+ <a
354
+ href={htmlPath + "/docs/introduction.html"}
355
+ class:list={["nav-link", page === "introduction" && "active"]}
356
+ >
357
+ <i class="nav-icon bi bi-download"></i>
196
358
  <p>Installation</p>
197
359
  </a>
198
360
  </li>
199
361
  <li class="nav-item">
200
- <a href={htmlPath + '/docs/layout.html'} class:list={['nav-link', page === 'layout' && 'active']}>
201
- <i class="nav-icon fa-solid fa-grip"></i>
362
+ <a
363
+ href={htmlPath + "/docs/layout.html"}
364
+ class:list={["nav-link", page === "layout" && "active"]}
365
+ >
366
+ <i class="nav-icon bi bi-grip-horizontal"></i>
202
367
  <p>Layout</p>
203
368
  </a>
204
369
  </li>
205
370
  <li class="nav-item">
206
- <a href={htmlPath + '/docs/color-mode.html'} class:list={['nav-link', page === 'color-mode' && 'active']}>
207
- <i class="nav-icon fa-solid fa-star-half-stroke"></i>
371
+ <a
372
+ href={htmlPath + "/docs/color-mode.html"}
373
+ class:list={["nav-link", page === "color-mode" && "active"]}
374
+ >
375
+ <i class="nav-icon bi bi-star-half"></i>
208
376
  <p>Color Mode</p>
209
377
  </a>
210
378
  </li>
211
- <li class:list={['nav-item', mainPage === 'components' && 'menu-open']}>
212
- <a href="javascript:;" class:list={['nav-link', mainPage === 'components' && 'active']}>
213
- <i class="nav-icon fa-solid fa-swatchbook"></i>
379
+ <li class:list={["nav-item", mainPage === "components" && "menu-open"]}>
380
+ <a
381
+ href="#"
382
+ class:list={["nav-link", mainPage === "components" && "active"]}
383
+ >
384
+ <i class="nav-icon bi bi-ui-checks-grid"></i>
214
385
  <p>
215
386
  Components
216
- <i class="nav-arrow fa-solid fa-angle-right"></i>
387
+ <i class="nav-arrow bi bi-chevron-right"></i>
217
388
  </p>
218
389
  </a>
219
390
  <ul class="nav nav-treeview">
220
391
  <li class="nav-item">
221
- <a href={htmlPath + '/docs/components/main-header.html'} class:list={['nav-link', page === 'main-header' && 'active']}>
222
- <i class="nav-icon fa-regular fa-circle"></i>
392
+ <a
393
+ href={htmlPath + "/docs/components/main-header.html"}
394
+ class:list={["nav-link", page === "main-header" && "active"]}
395
+ >
396
+ <i class="nav-icon bi bi-circle"></i>
223
397
  <p>Main Header</p>
224
398
  </a>
225
399
  </li>
400
+ <li class="nav-item">
401
+ <a
402
+ href={htmlPath + "/docs/components/main-sidebar.html"}
403
+ class:list={["nav-link", page === "main-sidebar" && "active"]}
404
+ >
405
+ <i class="nav-icon bi bi-circle"></i>
406
+ <p>Main Sidebar</p>
407
+ </a>
408
+ </li>
409
+ </ul>
410
+ </li>
411
+ <li class:list={["nav-item", mainPage === "javascript" && "menu-open"]}>
412
+ <a
413
+ href="#"
414
+ class:list={["nav-link", mainPage === "javascript" && "active"]}
415
+ >
416
+ <i class="nav-icon bi bi-filetype-js"></i>
417
+ <p>
418
+ Javascript
419
+ <i class="nav-arrow bi bi-chevron-right"></i>
420
+ </p>
421
+ </a>
422
+ <ul class="nav nav-treeview">
423
+ <li class="nav-item">
424
+ <a
425
+ href={htmlPath + "/docs/javascript/treeview.html"}
426
+ class:list={["nav-link", page === "treeview" && "active"]}
427
+ >
428
+ <i class="nav-icon bi bi-circle"></i>
429
+ <p>Treeview</p>
430
+ </a>
431
+ </li>
226
432
  </ul>
227
433
  </li>
228
434
  <li class="nav-item">
229
- <a href={htmlPath + '/docs/browser-support.html'} class:list={['nav-link', page === 'browser-support' && 'active']}>
230
- <i class="nav-icon fa-solid fa-edge"></i>
435
+ <a
436
+ href={htmlPath + "/docs/browser-support.html"}
437
+ class:list={["nav-link", page === "browser-support" && "active"]}
438
+ >
439
+ <i class="nav-icon bi bi-browser-edge"></i>
231
440
  <p>Browser Support</p>
232
441
  </a>
233
442
  </li>
443
+ <li class="nav-item">
444
+ <a
445
+ href={htmlPath + "/docs/how-to-contribute.html"}
446
+ class:list={["nav-link", page === "how-to-contribute" && "active"]}
447
+ >
448
+ <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
449
+ <p>How To Contribute</p>
450
+ </a>
451
+ </li>
452
+ <li class="nav-item">
453
+ <a
454
+ href={htmlPath + "/docs/faq.html"}
455
+ class:list={["nav-link", page === "faq" && "active"]}
456
+ >
457
+ <i class="nav-icon bi bi-question-circle-fill"></i>
458
+ <p>FAQ</p>
459
+ </a>
460
+ </li>
461
+ <li class="nav-item">
462
+ <a
463
+ href={htmlPath + "/docs/license.html"}
464
+ class:list={["nav-link", page === "license" && "active"]}
465
+ >
466
+ <i class="nav-icon bi bi-patch-check-fill"></i>
467
+ <p>License</p>
468
+ </a>
469
+ </li>
234
470
 
235
471
  <li class="nav-header">MULTI LEVEL EXAMPLE</li>
236
472
  <li class="nav-item">
237
- <a href="javascript:;" class="nav-link">
238
- <i class="nav-icon fa-solid fa-circle"></i>
473
+ <a href="#" class="nav-link">
474
+ <i class="nav-icon bi bi-circle-fill"></i>
239
475
  <p>Level 1</p>
240
476
  </a>
241
477
  </li>
242
478
  <li class="nav-item">
243
- <a href="javascript:;" class="nav-link">
244
- <i class="nav-icon fa-solid fa-circle"></i>
479
+ <a href="#" class="nav-link">
480
+ <i class="nav-icon bi bi-circle-fill"></i>
245
481
  <p>
246
482
  Level 1
247
- <i class="nav-arrow fa-solid fa-angle-right"></i>
483
+ <i class="nav-arrow bi bi-chevron-right"></i>
248
484
  </p>
249
485
  </a>
250
486
  <ul class="nav nav-treeview">
251
487
  <li class="nav-item">
252
- <a href="javascript:;" class="nav-link">
253
- <i class="nav-icon fa-regular fa-circle"></i>
488
+ <a href="#" class="nav-link">
489
+ <i class="nav-icon bi bi-circle"></i>
254
490
  <p>Level 2</p>
255
491
  </a>
256
492
  </li>
257
493
  <li class="nav-item">
258
- <a href="javascript:;" class="nav-link">
259
- <i class="nav-icon fa-regular fa-circle"></i>
494
+ <a href="#" class="nav-link">
495
+ <i class="nav-icon bi bi-circle"></i>
260
496
  <p>
261
497
  Level 2
262
- <i class="nav-arrow fa-solid fa-angle-right"></i>
498
+ <i class="nav-arrow bi bi-chevron-right"></i>
263
499
  </p>
264
500
  </a>
265
501
  <ul class="nav nav-treeview">
266
502
  <li class="nav-item">
267
- <a href="javascript:;" class="nav-link">
268
- <i class="nav-icon fa-regular fa-dot-circle"></i>
503
+ <a href="#" class="nav-link">
504
+ <i class="nav-icon bi bi-record-circle-fill"></i>
269
505
  <p>Level 3</p>
270
506
  </a>
271
507
  </li>
272
508
  <li class="nav-item">
273
- <a href="javascript:;" class="nav-link">
274
- <i class="nav-icon fa-regular fa-dot-circle"></i>
509
+ <a href="#" class="nav-link">
510
+ <i class="nav-icon bi bi-record-circle-fill"></i>
275
511
  <p>Level 3</p>
276
512
  </a>
277
513
  </li>
278
514
  <li class="nav-item">
279
- <a href="javascript:;" class="nav-link">
280
- <i class="nav-icon fa-regular fa-dot-circle"></i>
515
+ <a href="#" class="nav-link">
516
+ <i class="nav-icon bi bi-record-circle-fill"></i>
281
517
  <p>Level 3</p>
282
518
  </a>
283
519
  </li>
284
520
  </ul>
285
521
  </li>
286
522
  <li class="nav-item">
287
- <a href="javascript:;" class="nav-link">
288
- <i class="nav-icon fa-regular fa-circle"></i>
523
+ <a href="#" class="nav-link">
524
+ <i class="nav-icon bi bi-circle"></i>
289
525
  <p>Level 2</p>
290
526
  </a>
291
527
  </li>
292
528
  </ul>
293
529
  </li>
294
530
  <li class="nav-item">
295
- <a href="javascript:;" class="nav-link">
296
- <i class="nav-icon fa-solid fa-circle"></i>
531
+ <a href="#" class="nav-link">
532
+ <i class="nav-icon bi bi-circle-fill"></i>
297
533
  <p>Level 1</p>
298
534
  </a>
299
535
  </li>
536
+
300
537
  <li class="nav-header">LABELS</li>
301
538
  <li class="nav-item">
302
- <a href="javascript:;" class="nav-link">
303
- <i class="nav-icon fa-regular fa-circle text-danger"></i>
539
+ <a href="#" class="nav-link">
540
+ <i class="nav-icon bi bi-circle text-danger"></i>
304
541
  <p class="text">Important</p>
305
542
  </a>
306
543
  </li>
307
544
  <li class="nav-item">
308
- <a href="javascript:;" class="nav-link">
309
- <i class="nav-icon fa-regular fa-circle text-warning"></i>
545
+ <a href="#" class="nav-link">
546
+ <i class="nav-icon bi bi-circle text-warning"></i>
310
547
  <p>Warning</p>
311
548
  </a>
312
549
  </li>
313
550
  <li class="nav-item">
314
- <a href="javascript:;" class="nav-link">
315
- <i class="nav-icon fa-regular fa-circle text-info"></i>
551
+ <a href="#" class="nav-link">
552
+ <i class="nav-icon bi bi-circle text-info"></i>
316
553
  <p>Informational</p>
317
554
  </a>
318
555
  </li>
319
556
  </ul>
557
+ <!--end::Sidebar Menu-->
320
558
  </nav>
321
559
  </div>
322
- <!-- /.sidebar -->
560
+ <!--end::Sidebar Wrapper-->
323
561
  </aside>
562
+ <!--end::Sidebar-->