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/pages/UI/timeline.astro CHANGED
@@ -1,28 +1,36 @@
1
1
  ---
2
- import Head from '@components/_head.astro';
3
- import Footer from '@components/dashboard/_footer.astro';
4
- import Topbar from '@components/dashboard/_topbar.astro';
5
- import Sidenav from '@components/dashboard/_sidenav.astro';
6
- import Scripts from '@components/_scripts.astro';
2
+ import Head from "@components/_head.astro";
3
+ import Footer from "@components/dashboard/_footer.astro";
4
+ import Topbar from "@components/dashboard/_topbar.astro";
5
+ import Sidenav from "@components/dashboard/_sidenav.astro";
6
+ import Scripts from "@components/_scripts.astro";
7
7
 
8
- const title = 'AdminLTE 4 | Timeline Elements'
9
- const path = '../../../dist'
10
- const mainPage = 'ui-elements'
11
- const page = 'timeline'
8
+ const title = "AdminLTE 4 | Timeline Elements";
9
+ const path = "../../../dist";
10
+ const mainPage = "ui-elements";
11
+ const page = "timeline";
12
12
  ---
13
+
13
14
  <!DOCTYPE html>
14
15
  <html lang="en">
16
+ <!--begin::Head-->
15
17
  <head>
16
18
  <Head title={title} path={path} />
17
19
  </head>
20
+ <!--end::Head-->
21
+ <!--begin::Body-->
18
22
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
23
+ <!--begin::App Wrapper-->
19
24
  <div class="app-wrapper">
20
25
  <Topbar path={path} />
21
26
  <Sidenav path={path} mainPage={mainPage} page={page} />
22
- <!-- Main content -->
27
+ <!--begin::App Main-->
23
28
  <main class="app-main">
29
+ <!--begin::App Content Header-->
24
30
  <div class="app-content-header">
31
+ <!--begin::Container-->
25
32
  <div class="container-fluid">
33
+ <!--begin::Row-->
26
34
  <div class="row">
27
35
  <div class="col-sm-6">
28
36
  <h3 class="mb-0">Timeline</h3>
@@ -30,14 +38,20 @@ const page = 'timeline'
30
38
  <div class="col-sm-6">
31
39
  <ol class="breadcrumb float-sm-end">
32
40
  <li class="breadcrumb-item"><a href="#">Home</a></li>
33
- <li class="breadcrumb-item active" aria-current="page">Timeline</li>
41
+ <li class="breadcrumb-item active" aria-current="page">
42
+ Timeline
43
+ </li>
34
44
  </ol>
35
45
  </div>
36
46
  </div>
47
+ <!--end::Row-->
37
48
  </div>
49
+ <!--end::Container-->
38
50
  </div>
39
- <!-- Main content -->
51
+ <!--end::App Content Header-->
52
+ <!--begin::App Content-->
40
53
  <div class="app-content">
54
+ <!--begin::Container-->
41
55
  <div class="container-fluid">
42
56
  <!-- Timelime example -->
43
57
  <div class="row">
@@ -51,16 +65,24 @@ const page = 'timeline'
51
65
  <!-- /.timeline-label -->
52
66
  <!-- timeline item -->
53
67
  <div>
54
- <i class="timeline-icon fa-solid fa-envelope text-bg-primary"></i>
68
+ <i
69
+ class="timeline-icon bi bi-envelope text-bg-primary"
70
+ >
71
+ </i>
55
72
  <div class="timeline-item">
56
- <span class="time"><i class="fa-solid fa-clock"></i> 12:05</span>
57
- <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
73
+ <span class="time">
74
+ <i class="bi bi-clock-fill"></i> 12:05
75
+ </span>
76
+ <h3 class="timeline-header">
77
+ <a href="#">Support Team</a> sent you an email
78
+ </h3>
58
79
 
59
80
  <div class="timeline-body">
60
- Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
61
- weebly ning heekya handango imeem plugg dopplr jibjab, movity
62
- jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
63
- quora plaxo ideeli hulu weebly balihoo...
81
+ Etsy doostang zoodles disqus groupon greplin oooj voxy
82
+ zoodles, weebly ning heekya handango imeem plugg dopplr
83
+ jibjab, movity jajah plickers sifteo edmodo ifttt
84
+ zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu
85
+ weebly balihoo...
64
86
  </div>
65
87
  <div class="timeline-footer">
66
88
  <a class="btn btn-primary btn-sm">Read more</a>
@@ -71,23 +93,35 @@ const page = 'timeline'
71
93
  <!-- END timeline item -->
72
94
  <!-- timeline item -->
73
95
  <div>
74
- <i class="timeline-icon fa-solid fa-user text-bg-success"></i>
96
+ <i class="timeline-icon bi bi-person text-bg-success">
97
+ </i>
75
98
  <div class="timeline-item">
76
- <span class="time"><i class="fa-solid fa-clock"></i> 5 mins ago</span>
77
- <h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request</h3>
99
+ <span class="time">
100
+ <i class="bi bi-clock-fill"></i> 5 mins ago
101
+ </span>
102
+ <h3 class="timeline-header no-border">
103
+ <a href="#">Sarah Young</a> accepted your friend request
104
+ </h3>
78
105
  </div>
79
106
  </div>
80
107
  <!-- END timeline item -->
81
108
  <!-- timeline item -->
82
109
  <div>
83
- <i class="timeline-icon fa-solid fa-comments text-bg-warning"></i>
110
+ <i
111
+ class="timeline-icon bi bi-chat-text-fill text-bg-warning"
112
+ >
113
+ </i>
84
114
  <div class="timeline-item">
85
- <span class="time"><i class="fa-solid fa-clock"></i> 27 mins ago</span>
86
- <h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
115
+ <span class="time">
116
+ <i class="bi bi-clock-fill"></i> 27 mins ago
117
+ </span>
118
+ <h3 class="timeline-header">
119
+ <a href="#">Jay White</a> commented on your post
120
+ </h3>
87
121
  <div class="timeline-body">
88
- Take me to your leader!
89
- Switzerland is small and neutral!
90
- We are more like Germany, ambitious and misunderstood!
122
+ Take me to your leader! Switzerland is small and
123
+ neutral! We are more like Germany, ambitious and
124
+ misunderstood!
91
125
  </div>
92
126
  <div class="timeline-footer">
93
127
  <a class="btn btn-warning btn-sm">View comment</a>
@@ -102,57 +136,86 @@ const page = 'timeline'
102
136
  <!-- /.timeline-label -->
103
137
  <!-- timeline item -->
104
138
  <div>
105
- <i class="timeline-icon fa-solid fa-camera text-bg-primary"></i>
139
+ <i class="timeline-icon bi bi-camera text-bg-primary">
140
+ </i>
106
141
  <div class="timeline-item">
107
- <span class="time"><i class="fa-solid fa-clock"></i> 2 days ago</span>
108
- <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
142
+ <span class="time">
143
+ <i class="bi bi-clock-fill"></i> 2 days ago
144
+ </span>
145
+ <h3 class="timeline-header">
146
+ <a href="#">Mina Lee</a> uploaded new photos
147
+ </h3>
109
148
  <div class="timeline-body">
110
- <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
111
- <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
112
- <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
113
- <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
149
+ <img
150
+ src={path + "/assets/img/user1-128x128.jpg"}
151
+ alt="..."
152
+ />
153
+ <img
154
+ src={path + "/assets/img/user1-128x128.jpg"}
155
+ alt="..."
156
+ />
157
+ <img
158
+ src={path + "/assets/img/user1-128x128.jpg"}
159
+ alt="..."
160
+ />
161
+ <img
162
+ src={path + "/assets/img/user1-128x128.jpg"}
163
+ alt="..."
164
+ />
114
165
  </div>
115
166
  </div>
116
167
  </div>
117
168
  <!-- END timeline item -->
118
169
  <!-- timeline item -->
119
170
  <div>
120
- <i class="timeline-icon fa-solid fa-video text-bg-info"></i>
171
+ <i class="timeline-icon bi bi-camera-film text-bg-info"></i>
121
172
 
122
173
  <div class="timeline-item">
123
- <span class="time"><i class="fa-solid fa-clock"></i> 5 days ago</span>
174
+ <span class="time">
175
+ <i class="bi bi-clock-fill"></i> 5 days ago
176
+ </span>
124
177
 
125
- <h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
178
+ <h3 class="timeline-header">
179
+ <a href="#">Mr. Doe</a> shared a video
180
+ </h3>
126
181
 
127
182
  <div class="timeline-body">
128
183
  <div class="ratio ratio-16x9">
129
- <iframe src="https://www.youtube.com/embed/tMWkeBIohBs" allowfullscreen></iframe>
184
+ <iframe
185
+ src="https://www.youtube.com/embed/tMWkeBIohBs"
186
+ allowfullscreen></iframe>
130
187
  </div>
131
188
  </div>
132
189
  <div class="timeline-footer">
133
- <a href="#" class="btn btn-sm text-bg-warning">See comments</a>
190
+ <a href="#" class="btn btn-sm text-bg-warning">
191
+ See comments
192
+ </a>
134
193
  </div>
135
194
  </div>
136
195
  </div>
137
196
  <!-- END timeline item -->
138
197
  <div>
139
- <i class="timeline-icon fa-solid fa-clock text-bg-secondary"></i>
198
+ <i
199
+ class="timeline-icon bi bi-clock-fill text-bg-secondary"
200
+ >
201
+ </i>
140
202
  </div>
141
203
  </div>
142
204
  </div>
143
205
  <!-- /.col -->
144
206
  </div>
145
207
  <!-- /.row -->
146
- </div><!-- /.container-fluid -->
208
+ </div>
209
+ <!--end::Container-->
147
210
  </div>
148
- <!-- /.content -->
211
+ <!--end::App Content-->
149
212
  </main>
150
- <!-- /.app-content -->
151
-
213
+ <!--end::App Main-->
152
214
  <Footer />
153
215
  </div>
154
- <!-- ./app-wrapper -->
155
-
216
+ <!--end::App Wrapper-->
217
+ <!--begin::Script-->
156
218
  <Scripts path={path} />
157
- </body>
219
+ <!--end::Script-->
220
+ </body><!--end::Body-->
158
221
  </html>
package/src/html/pages/docs/browser-support.astro CHANGED
@@ -2,28 +2,36 @@
2
2
  import Head from "@components/_head.astro";
3
3
  import Footer from "@components/dashboard/_footer.astro";
4
4
  import Topbar from "@components/dashboard/_topbar.astro";
5
- import BrowserSupport from "@components/docs/browser-support/index.md";
5
+ import BrowserSupport from "@components/docs/browser-support.mdx";
6
6
  import Sidenav from "@components/dashboard/_sidenav.astro";
7
7
  import Scripts from "@components/_scripts.astro";
8
+
8
9
  const title = "Browser Support | AdminLTE 4";
9
- const path = '../../../dist'
10
+ const path = "../../../dist";
10
11
  const mainPage = "docs";
11
12
  const page = "browser-support";
12
13
  ---
13
14
 
14
15
  <!DOCTYPE html>
15
16
  <html lang="en">
17
+ <!--begin::Head-->
16
18
  <head>
17
19
  <Head title={title} path={path} />
18
20
  </head>
21
+ <!--end::Head-->
22
+ <!--begin::Body-->
19
23
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
24
+ <!--begin::App Wrapper-->
20
25
  <div class="app-wrapper">
21
26
  <Topbar path={path} />
22
27
  <Sidenav path={path} mainPage={mainPage} page={page} />
23
- <!-- Main content -->
28
+ <!--begin::App Main-->
24
29
  <main class="app-main">
30
+ <!--begin::App Content Header-->
25
31
  <div class="app-content-header">
32
+ <!--begin::Container-->
26
33
  <div class="container-fluid">
34
+ <!--begin::Row-->
27
35
  <div class="row">
28
36
  <div class="col-sm-6">
29
37
  <h3 class="mb-0">Browser Support</h3>
@@ -37,22 +45,27 @@ const page = "browser-support";
37
45
  </ol>
38
46
  </div>
39
47
  </div>
48
+ <!--end::Row-->
40
49
  </div>
50
+ <!--end::Container-->
41
51
  </div>
42
- <!-- Main content -->
52
+ <!--end::App Content Header-->
53
+ <!--begin::App Content-->
43
54
  <div class="app-content">
55
+ <!--begin::Container-->
44
56
  <div class="container-fluid">
45
57
  <BrowserSupport />
46
- </div><!-- /.container-fluid -->
58
+ </div>
59
+ <!--end::Container-->
47
60
  </div>
48
- <!-- /.content -->
61
+ <!--end::App Content-->
49
62
  </main>
50
- <!-- /.app-content -->
51
-
63
+ <!--end::App Main-->
52
64
  <Footer />
53
65
  </div>
54
- <!-- ./app-wrapper -->
55
-
66
+ <!--end::App Wrapper-->
67
+ <!--begin::Script-->
56
68
  <Scripts path={path} />
57
- </body>
69
+ <!--end::Script-->
70
+ </body><!--end::Body-->
58
71
  </html>
package/src/html/pages/docs/color-mode.astro CHANGED
@@ -4,27 +4,34 @@ import Footer from "@components/dashboard/_footer.astro";
4
4
  import Topbar from "@components/dashboard/_topbar.astro";
5
5
  import Sidenav from "@components/dashboard/_sidenav.astro";
6
6
  import Scripts from "@components/_scripts.astro";
7
- import NavbarHtml from "@components/docs/color-mode/navbar-html.md";
8
- import ToggleScript from "@components/docs/color-mode/toggle-script.md";
7
+ import ColorMode from "@components/docs/color-mode.mdx";
8
+
9
9
  const title = "Color Mode | AdminLTE 4";
10
- const path = '../../../dist'
10
+ const path = "../../../dist";
11
11
  const mainPage = "docs";
12
12
  const page = "color-mode";
13
13
  ---
14
14
 
15
15
  <!DOCTYPE html>
16
16
  <html lang="en">
17
+ <!--begin::Head-->
17
18
  <head>
18
19
  <Head title={title} path={path} />
19
20
  </head>
21
+ <!--end::Head-->
22
+ <!--begin::Body-->
20
23
  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
24
+ <!--begin::App Wrapper-->
21
25
  <div class="app-wrapper">
22
26
  <Topbar path={path} />
23
27
  <Sidenav path={path} mainPage={mainPage} page={page} />
24
- <!-- Main content -->
28
+ <!--begin::App Main-->
25
29
  <main class="app-main">
30
+ <!--begin::App Content Header-->
26
31
  <div class="app-content-header">
32
+ <!--begin::Container-->
27
33
  <div class="container-fluid">
34
+ <!--begin::Row-->
28
35
  <div class="row">
29
36
  <div class="col-sm-6">
30
37
  <h3 class="mb-0">Color Mode Toggle</h3>
@@ -33,30 +40,47 @@ const page = "color-mode";
33
40
  <ol class="breadcrumb float-sm-end">
34
41
  <li class="breadcrumb-item"><a href="#">Docs</a></li>
35
42
  <li class="breadcrumb-item active" aria-current="page">
36
- General Form
43
+ Color Mode
37
44
  </li>
38
45
  </ol>
39
46
  </div>
40
47
  </div>
48
+ <!--end::Row-->
41
49
  </div>
50
+ <!--end::Container-->
42
51
  </div>
43
- <!-- Main content -->
52
+ <!--end::App Content Header-->
53
+ <!--begin::App Content-->
44
54
  <div class="app-content">
55
+ <!--begin::Container-->
45
56
  <div class="container-fluid">
57
+ <!--begin::Row-->
46
58
  <div class="row g-4">
59
+ <div class="col-12">
60
+ <div class="callout callout-info">
61
+ <h5 class="fw-bold">Tips</h5>
62
+ <p>
63
+ <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/" target="_blank" rel="noopener noreferrer" class="callout-link">
64
+ Color modes in Bootstrap
65
+ </a> allow you to switch between light and dark modes. You can do this using the data-bs-theme attribute. You can also create your own custom color modes.
66
+
67
+ </p>
68
+ </div>
69
+ </div>
47
70
  <!-- Start column -->
48
71
  <div class="col-12">
49
- <!-- Navbar -->
72
+ <!--begin::Header-->
50
73
  <nav class="navbar navbar-expand bg-body">
74
+ <!--begin::Container-->
51
75
  <div class="container-fluid">
52
- <!-- Start navbar links -->
76
+ <!--begin::Start Navbar links-->
53
77
  <ul class="navbar-nav">
54
78
  <li class="nav-item">
55
79
  <a
56
80
  class="nav-link"
57
81
  data-lte-toggle="sidebar"
58
82
  href="#"
59
- role="button"><i class="fa-solid fa-bars"></i></a
83
+ role="button"><i class="bi bi-list"></i></a
60
84
  >
61
85
  </li>
62
86
  <li class="nav-item d-none d-md-block">
@@ -66,6 +90,8 @@ const page = "color-mode";
66
90
  <a href="#" class="nav-link">Contact</a>
67
91
  </li>
68
92
  </ul>
93
+ <!--end::Start Navbar links-->
94
+ <!--begin::End Navbar links-->
69
95
  <ul class="navbar-nav ms-auto">
70
96
  <li class="nav-item dropdown">
71
97
  <button
@@ -79,10 +105,13 @@ const page = "color-mode";
79
105
  <span class="theme-icon-active">
80
106
  <i class="my-1"></i>
81
107
  </span>
108
+ <span class="d-lg-none ms-2" id="bd-theme-text"
109
+ >Toggle theme</span
110
+ >
82
111
  </button>
83
112
  <ul
84
113
  class="dropdown-menu dropdown-menu-end"
85
- aria-labelledby="bd-theme"
114
+ aria-labelledby="bd-theme-text"
86
115
  style="--bs-dropdown-min-width: 8rem;"
87
116
  >
88
117
  <li>
@@ -90,10 +119,11 @@ const page = "color-mode";
90
119
  type="button"
91
120
  class="dropdown-item d-flex align-items-center active"
92
121
  data-bs-theme-value="light"
122
+ aria-pressed="false"
93
123
  >
94
- <i class="fa-regular fa-sun me-2"></i>
124
+ <i class="bi bi-sun-fill me-2"></i>
95
125
  Light
96
- <i class="fa-solid fa-check ms-auto d-none"></i>
126
+ <i class="bi bi-check-lg ms-auto d-none"></i>
97
127
  </button>
98
128
  </li>
99
129
  <li>
@@ -101,10 +131,11 @@ const page = "color-mode";
101
131
  type="button"
102
132
  class="dropdown-item d-flex align-items-center"
103
133
  data-bs-theme-value="dark"
134
+ aria-pressed="false"
104
135
  >
105
- <i class="fa-solid fa-moon me-2"></i>
136
+ <i class="bi bi-moon-fill me-2"></i>
106
137
  Dark
107
- <i class="fa-solid fa-check ms-auto d-none"></i>
138
+ <i class="bi bi-check-lg ms-auto d-none"></i>
108
139
  </button>
109
140
  </li>
110
141
  <li>
@@ -112,36 +143,38 @@ const page = "color-mode";
112
143
  type="button"
113
144
  class="dropdown-item d-flex align-items-center"
114
145
  data-bs-theme-value="auto"
146
+ aria-pressed="true"
115
147
  >
116
- <i class="fa-solid fa-circle-half-stroke me-2"
148
+ <i class="bi bi-circle-fill-half-stroke me-2"
117
149
  ></i>
118
150
  Auto
119
- <i class="fa-solid fa-check ms-auto d-none"></i>
151
+ <i class="bi bi-check-lg ms-auto d-none"></i>
120
152
  </button>
121
153
  </li>
122
154
  </ul>
123
155
  </li>
124
156
  </ul>
157
+ <!--end::End Navbar links-->
125
158
  </div>
159
+ <!--end::Container-->
126
160
  </nav>
161
+ <!--end::Header-->
127
162
  </div>
128
163
  <!-- Start column -->
129
164
  <div class="col-12">
130
- <NavbarHtml />
131
-
132
- <ToggleScript />
165
+ <ColorMode />
133
166
  </div>
134
167
  </div>
135
- <!-- /.row -->
136
- </div><!-- /.container-fluid -->
168
+ <!--end::Row-->
169
+ </div>
170
+ <!--end::Container-->
137
171
  </div>
138
- <!-- /.content -->
172
+ <!--end::App Content-->
139
173
  </main>
140
- <!-- /.app-content -->
141
-
174
+ <!--end::App Main-->
142
175
  <Footer />
143
176
  </div>
144
- <!-- ./app-wrapper -->
177
+ <!--end::App Wrapper-->
145
178
 
146
179
  <Scripts path={path} />
147
180
 
@@ -175,25 +208,40 @@ const page = "color-mode";
175
208
 
176
209
  setTheme(getPreferredTheme());
177
210
 
178
- const showActiveTheme = (theme) => {
211
+ const showActiveTheme = (theme, focus = false) => {
212
+ const themeSwitcher = document.querySelector("#bd-theme");
213
+
214
+ if (!themeSwitcher) {
215
+ return;
216
+ }
217
+
218
+ const themeSwitcherText = document.querySelector("#bd-theme-text");
179
219
  const activeThemeIcon = document.querySelector(
180
220
  ".theme-icon-active i"
181
221
  );
182
222
  const btnToActive = document.querySelector(
183
- '[data-bs-theme-value="' + theme + '"]'
223
+ `[data-bs-theme-value="${theme}"]`
184
224
  );
185
225
  const svgOfActiveBtn = btnToActive
186
226
  .querySelector("i")
187
227
  .getAttribute("class");
188
228
 
189
- document
190
- .querySelectorAll("[data-bs-theme-value]")
191
- .forEach((element) => {
192
- element.classList.remove("active");
193
- });
229
+ for (const element of document.querySelectorAll(
230
+ "[data-bs-theme-value]"
231
+ )) {
232
+ element.classList.remove("active");
233
+ element.setAttribute("aria-pressed", "false");
234
+ }
194
235
 
195
236
  btnToActive.classList.add("active");
237
+ btnToActive.setAttribute("aria-pressed", "true");
196
238
  activeThemeIcon.setAttribute("class", svgOfActiveBtn);
239
+ const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
240
+ themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
241
+
242
+ if (focus) {
243
+ themeSwitcher.focus();
244
+ }
197
245
  };
198
246
 
199
247
  window
@@ -207,18 +255,19 @@ const page = "color-mode";
207
255
  window.addEventListener("DOMContentLoaded", () => {
208
256
  showActiveTheme(getPreferredTheme());
209
257
 
210
- document
211
- .querySelectorAll("[data-bs-theme-value]")
212
- .forEach((toggle) => {
213
- toggle.addEventListener("click", () => {
214
- const theme = toggle.getAttribute("data-bs-theme-value");
215
- localStorage.setItem("theme", theme);
216
- setTheme(theme);
217
- showActiveTheme(theme);
218
- });
258
+ for (const toggle of document.querySelectorAll(
259
+ "[data-bs-theme-value]"
260
+ )) {
261
+ toggle.addEventListener("click", () => {
262
+ const theme = toggle.getAttribute("data-bs-theme-value");
263
+ localStorage.setItem("theme", theme);
264
+ setTheme(theme);
265
+ showActiveTheme(theme, true);
219
266
  });
267
+ }
220
268
  });
221
269
  })();
222
270
  </script>
223
- </body>
271
+ <!--end::Script-->
272
+ </body><!--end::Body-->
224
273
  </html>