admin-lte 4.0.0-beta1 → 4.0.0-beta3

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 (166) hide show
  1. package/.astro/content-assets.mjs +1 -0
  2. package/.astro/content-modules.mjs +1 -0
  3. package/.astro/content.d.ts +166 -0
  4. package/.astro/data-store.json +1 -0
  5. package/.astro/settings.json +5 -0
  6. package/.astro/types.d.ts +2 -0
  7. package/.prettierrc +6 -0
  8. package/adminlte-v4.0.0-beta1-with-dist.zip +0 -0
  9. package/adminlte-v4.0.0-beta3.zip +0 -0
  10. package/dist/css/adminlte.css +55 -127
  11. package/dist/css/adminlte.css.map +1 -1
  12. package/dist/css/adminlte.min.css +2 -2
  13. package/dist/css/adminlte.min.css.map +1 -1
  14. package/dist/css/adminlte.rtl.css +55 -127
  15. package/dist/css/adminlte.rtl.css.map +1 -1
  16. package/dist/css/adminlte.rtl.min.css +2 -2
  17. package/dist/css/adminlte.rtl.min.css.map +1 -1
  18. package/dist/js/adminlte.js +2 -2
  19. package/dist/js/adminlte.js.map +1 -1
  20. package/dist/js/adminlte.min.js +2 -2
  21. package/dist/js/adminlte.min.js.map +1 -1
  22. package/dist/pages/UI/general.html +1886 -883
  23. package/dist/pages/UI/icons.html +818 -0
  24. package/dist/pages/UI/timeline.html +894 -490
  25. package/dist/pages/docs/browser-support.html +839 -434
  26. package/dist/pages/docs/color-mode.html +985 -539
  27. package/dist/pages/docs/components/main-header.html +1016 -535
  28. package/dist/pages/docs/components/main-sidebar.html +831 -431
  29. package/dist/pages/docs/faq.html +831 -432
  30. package/dist/pages/docs/how-to-contribute.html +904 -472
  31. package/dist/pages/docs/introduction.html +883 -451
  32. package/dist/pages/docs/javascript/treeview.html +837 -443
  33. package/dist/pages/docs/layout.html +835 -473
  34. package/dist/pages/docs/license.html +828 -434
  35. package/dist/pages/examples/lockscreen.html +129 -66
  36. package/dist/pages/examples/login-v2.html +157 -85
  37. package/dist/pages/examples/login.html +147 -80
  38. package/dist/pages/examples/register-v2.html +167 -88
  39. package/dist/pages/examples/register.html +152 -81
  40. package/dist/pages/forms/general.html +1223 -599
  41. package/dist/pages/generate/theme.html +737 -0
  42. package/dist/pages/index.html +1400 -793
  43. package/dist/pages/index2.html +1852 -1051
  44. package/dist/pages/index3.html +1183 -684
  45. package/dist/pages/layout/collapsed-sidebar.html +829 -440
  46. package/dist/pages/layout/fixed-sidebar.html +829 -440
  47. package/dist/pages/layout/layout-custom-area.html +862 -0
  48. package/dist/pages/layout/layout-rtl.html +829 -440
  49. package/dist/pages/layout/logo-switch.html +486 -233
  50. package/dist/pages/layout/sidebar-mini.html +829 -440
  51. package/dist/pages/layout/unfixed-sidebar.html +827 -439
  52. package/dist/pages/tables/simple.html +1079 -686
  53. package/dist/pages/widgets/cards.html +1034 -544
  54. package/dist/pages/widgets/info-box.html +1052 -571
  55. package/dist/pages/widgets/small-box.html +914 -474
  56. package/package.json +25 -24
  57. package/src/scss/_app-content.scss +0 -49
  58. package/src/scss/_app-main.scss +21 -1
  59. package/src/scss/_app-sidebar.scss +1 -6
  60. package/src/scss/_bootstrap-variables.scss +11 -9
  61. package/src/scss/_compact-mode.scss +0 -26
  62. package/src/scss/_variables.scss +19 -7
  63. package/src/scss/adminlte.scss +1 -1
  64. package/src/ts/push-menu.ts +1 -1
  65. package/.bundlewatch.config.json +0 -28
  66. package/.cache/.eslintcache +0 -1
  67. package/.cache/.stylelintcache +0 -1
  68. package/.editorconfig +0 -14
  69. package/.eslintignore +0 -7
  70. package/.eslintrc.json +0 -120
  71. package/.gitattributes +0 -6
  72. package/.gitpod.yml +0 -6
  73. package/.stylelintignore +0 -8
  74. package/.stylelintrc.json +0 -47
  75. package/composer.json +0 -25
  76. package/dist/pages/layout/fixed-complete.html +0 -541
  77. package/src/assets/img/AdminLTEFullLogo.png +0 -0
  78. package/src/assets/img/AdminLTELogo.png +0 -0
  79. package/src/assets/img/avatar.png +0 -0
  80. package/src/assets/img/avatar2.png +0 -0
  81. package/src/assets/img/avatar3.png +0 -0
  82. package/src/assets/img/avatar4.png +0 -0
  83. package/src/assets/img/avatar5.png +0 -0
  84. package/src/assets/img/boxed-bg.jpg +0 -0
  85. package/src/assets/img/boxed-bg.png +0 -0
  86. package/src/assets/img/credit/american-express.png +0 -0
  87. package/src/assets/img/credit/cirrus.png +0 -0
  88. package/src/assets/img/credit/mastercard.png +0 -0
  89. package/src/assets/img/credit/paypal.png +0 -0
  90. package/src/assets/img/credit/paypal2.png +0 -0
  91. package/src/assets/img/credit/visa.png +0 -0
  92. package/src/assets/img/default-150x150.png +0 -0
  93. package/src/assets/img/icons.png +0 -0
  94. package/src/assets/img/photo1.png +0 -0
  95. package/src/assets/img/photo2.png +0 -0
  96. package/src/assets/img/photo3.jpg +0 -0
  97. package/src/assets/img/photo4.jpg +0 -0
  98. package/src/assets/img/prod-1.jpg +0 -0
  99. package/src/assets/img/prod-2.jpg +0 -0
  100. package/src/assets/img/prod-3.jpg +0 -0
  101. package/src/assets/img/prod-4.jpg +0 -0
  102. package/src/assets/img/prod-5.jpg +0 -0
  103. package/src/assets/img/user1-128x128.jpg +0 -0
  104. package/src/assets/img/user2-160x160.jpg +0 -0
  105. package/src/assets/img/user3-128x128.jpg +0 -0
  106. package/src/assets/img/user4-128x128.jpg +0 -0
  107. package/src/assets/img/user5-128x128.jpg +0 -0
  108. package/src/assets/img/user6-128x128.jpg +0 -0
  109. package/src/assets/img/user7-128x128.jpg +0 -0
  110. package/src/assets/img/user8-128x128.jpg +0 -0
  111. package/src/config/assets.config.mjs +0 -8
  112. package/src/config/astro.config.mjs +0 -19
  113. package/src/config/postcss.config.mjs +0 -15
  114. package/src/config/rollup.config.js +0 -20
  115. package/src/html/.eslintrc.json +0 -24
  116. package/src/html/.prettierrc.js +0 -11
  117. package/src/html/.tsconfig.json +0 -4
  118. package/src/html/components/_head.astro +0 -37
  119. package/src/html/components/_scripts.astro +0 -39
  120. package/src/html/components/dashboard/_footer.astro +0 -18
  121. package/src/html/components/dashboard/_sidenav.astro +0 -562
  122. package/src/html/components/dashboard/_topbar.astro +0 -221
  123. package/src/html/components/docs/browser-support.mdx +0 -23
  124. package/src/html/components/docs/color-mode.mdx +0 -169
  125. package/src/html/components/docs/components/main-header.mdx +0 -198
  126. package/src/html/components/docs/components/main-sidebar.mdx +0 -129
  127. package/src/html/components/docs/faq.mdx +0 -11
  128. package/src/html/components/docs/how-to-contribute.mdx +0 -34
  129. package/src/html/components/docs/introduction.mdx +0 -60
  130. package/src/html/components/docs/license.mdx +0 -9
  131. package/src/html/components/javascript/treeview.mdx +0 -39
  132. package/src/html/env.d.ts +0 -1
  133. package/src/html/pages/UI/general.astro +0 -1451
  134. package/src/html/pages/UI/timeline.astro +0 -221
  135. package/src/html/pages/docs/browser-support.astro +0 -71
  136. package/src/html/pages/docs/color-mode.astro +0 -273
  137. package/src/html/pages/docs/components/main-header.astro +0 -320
  138. package/src/html/pages/docs/components/main-sidebar.astro +0 -71
  139. package/src/html/pages/docs/faq.astro +0 -71
  140. package/src/html/pages/docs/how-to-contribute.astro +0 -71
  141. package/src/html/pages/docs/introduction.astro +0 -71
  142. package/src/html/pages/docs/javascript/treeview.astro +0 -71
  143. package/src/html/pages/docs/layout.astro +0 -120
  144. package/src/html/pages/docs/license.astro +0 -71
  145. package/src/html/pages/examples/lockscreen.astro +0 -63
  146. package/src/html/pages/examples/login-v2.astro +0 -109
  147. package/src/html/pages/examples/login.astro +0 -99
  148. package/src/html/pages/examples/register-v2.astro +0 -116
  149. package/src/html/pages/examples/register.astro +0 -102
  150. package/src/html/pages/forms/general.astro +0 -624
  151. package/src/html/pages/index.astro +0 -799
  152. package/src/html/pages/index2.astro +0 -1373
  153. package/src/html/pages/index3.astro +0 -513
  154. package/src/html/pages/layout/collapsed-sidebar.astro +0 -110
  155. package/src/html/pages/layout/fixed-complete.astro +0 -209
  156. package/src/html/pages/layout/fixed-sidebar.astro +0 -109
  157. package/src/html/pages/layout/layout-rtl.astro +0 -109
  158. package/src/html/pages/layout/logo-switch.astro +0 -212
  159. package/src/html/pages/layout/sidebar-mini.astro +0 -108
  160. package/src/html/pages/layout/unfixed-sidebar.astro +0 -107
  161. package/src/html/pages/tables/simple.astro +0 -472
  162. package/src/html/pages/widgets/cards.astro +0 -373
  163. package/src/html/pages/widgets/info-box.astro +0 -413
  164. package/src/html/pages/widgets/small-box.astro +0 -182
  165. package/src/utils/index.js +0 -28
  166. package/tsconfig.json +0 -31
package/src/html/pages/UI/timeline.astro DELETED
@@ -1,221 +0,0 @@
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";
7
-
8
- const title = "AdminLTE 4 | Timeline Elements";
9
- const path = "../../../dist";
10
- const mainPage = "ui-elements";
11
- const page = "timeline";
12
- ---
13
-
14
- <!DOCTYPE html>
15
- <html lang="en">
16
- <!--begin::Head-->
17
- <head>
18
- <Head title={title} path={path} />
19
- </head>
20
- <!--end::Head-->
21
- <!--begin::Body-->
22
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
23
- <!--begin::App Wrapper-->
24
- <div class="app-wrapper">
25
- <Topbar path={path} />
26
- <Sidenav path={path} mainPage={mainPage} page={page} />
27
- <!--begin::App Main-->
28
- <main class="app-main">
29
- <!--begin::App Content Header-->
30
- <div class="app-content-header">
31
- <!--begin::Container-->
32
- <div class="container-fluid">
33
- <!--begin::Row-->
34
- <div class="row">
35
- <div class="col-sm-6">
36
- <h3 class="mb-0">Timeline</h3>
37
- </div>
38
- <div class="col-sm-6">
39
- <ol class="breadcrumb float-sm-end">
40
- <li class="breadcrumb-item"><a href="#">Home</a></li>
41
- <li class="breadcrumb-item active" aria-current="page">
42
- Timeline
43
- </li>
44
- </ol>
45
- </div>
46
- </div>
47
- <!--end::Row-->
48
- </div>
49
- <!--end::Container-->
50
- </div>
51
- <!--end::App Content Header-->
52
- <!--begin::App Content-->
53
- <div class="app-content">
54
- <!--begin::Container-->
55
- <div class="container-fluid">
56
- <!-- Timelime example -->
57
- <div class="row">
58
- <div class="col-md-12">
59
- <!-- The time line -->
60
- <div class="timeline">
61
- <!-- timeline time label -->
62
- <div class="time-label">
63
- <span class="text-bg-danger">10 Feb. 2023</span>
64
- </div>
65
- <!-- /.timeline-label -->
66
- <!-- timeline item -->
67
- <div>
68
- <i
69
- class="timeline-icon bi bi-envelope text-bg-primary"
70
- >
71
- </i>
72
- <div class="timeline-item">
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>
79
-
80
- <div class="timeline-body">
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...
86
- </div>
87
- <div class="timeline-footer">
88
- <a class="btn btn-primary btn-sm">Read more</a>
89
- <a class="btn btn-danger btn-sm">Delete</a>
90
- </div>
91
- </div>
92
- </div>
93
- <!-- END timeline item -->
94
- <!-- timeline item -->
95
- <div>
96
- <i class="timeline-icon bi bi-person text-bg-success">
97
- </i>
98
- <div class="timeline-item">
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>
105
- </div>
106
- </div>
107
- <!-- END timeline item -->
108
- <!-- timeline item -->
109
- <div>
110
- <i
111
- class="timeline-icon bi bi-chat-text-fill text-bg-warning"
112
- >
113
- </i>
114
- <div class="timeline-item">
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>
121
- <div class="timeline-body">
122
- Take me to your leader! Switzerland is small and
123
- neutral! We are more like Germany, ambitious and
124
- misunderstood!
125
- </div>
126
- <div class="timeline-footer">
127
- <a class="btn btn-warning btn-sm">View comment</a>
128
- </div>
129
- </div>
130
- </div>
131
- <!-- END timeline item -->
132
- <!-- timeline time label -->
133
- <div class="time-label">
134
- <span class="text-bg-success">3 Jan. 2023</span>
135
- </div>
136
- <!-- /.timeline-label -->
137
- <!-- timeline item -->
138
- <div>
139
- <i class="timeline-icon bi bi-camera text-bg-primary">
140
- </i>
141
- <div class="timeline-item">
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>
148
- <div class="timeline-body">
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
- />
165
- </div>
166
- </div>
167
- </div>
168
- <!-- END timeline item -->
169
- <!-- timeline item -->
170
- <div>
171
- <i class="timeline-icon bi bi-camera-film text-bg-info"></i>
172
-
173
- <div class="timeline-item">
174
- <span class="time">
175
- <i class="bi bi-clock-fill"></i> 5 days ago
176
- </span>
177
-
178
- <h3 class="timeline-header">
179
- <a href="#">Mr. Doe</a> shared a video
180
- </h3>
181
-
182
- <div class="timeline-body">
183
- <div class="ratio ratio-16x9">
184
- <iframe
185
- src="https://www.youtube.com/embed/tMWkeBIohBs"
186
- allowfullscreen></iframe>
187
- </div>
188
- </div>
189
- <div class="timeline-footer">
190
- <a href="#" class="btn btn-sm text-bg-warning">
191
- See comments
192
- </a>
193
- </div>
194
- </div>
195
- </div>
196
- <!-- END timeline item -->
197
- <div>
198
- <i
199
- class="timeline-icon bi bi-clock-fill text-bg-secondary"
200
- >
201
- </i>
202
- </div>
203
- </div>
204
- </div>
205
- <!-- /.col -->
206
- </div>
207
- <!-- /.row -->
208
- </div>
209
- <!--end::Container-->
210
- </div>
211
- <!--end::App Content-->
212
- </main>
213
- <!--end::App Main-->
214
- <Footer />
215
- </div>
216
- <!--end::App Wrapper-->
217
- <!--begin::Script-->
218
- <Scripts path={path} />
219
- <!--end::Script-->
220
- </body><!--end::Body-->
221
- </html>
package/src/html/pages/docs/browser-support.astro DELETED
@@ -1,71 +0,0 @@
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 BrowserSupport from "@components/docs/browser-support.mdx";
6
- import Sidenav from "@components/dashboard/_sidenav.astro";
7
- import Scripts from "@components/_scripts.astro";
8
-
9
- const title = "Browser Support | AdminLTE 4";
10
- const path = "../../../dist";
11
- const mainPage = "docs";
12
- const page = "browser-support";
13
- ---
14
-
15
- <!DOCTYPE html>
16
- <html lang="en">
17
- <!--begin::Head-->
18
- <head>
19
- <Head title={title} path={path} />
20
- </head>
21
- <!--end::Head-->
22
- <!--begin::Body-->
23
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
24
- <!--begin::App Wrapper-->
25
- <div class="app-wrapper">
26
- <Topbar path={path} />
27
- <Sidenav path={path} mainPage={mainPage} page={page} />
28
- <!--begin::App Main-->
29
- <main class="app-main">
30
- <!--begin::App Content Header-->
31
- <div class="app-content-header">
32
- <!--begin::Container-->
33
- <div class="container-fluid">
34
- <!--begin::Row-->
35
- <div class="row">
36
- <div class="col-sm-6">
37
- <h3 class="mb-0">Browser Support</h3>
38
- </div>
39
- <div class="col-sm-6">
40
- <ol class="breadcrumb float-sm-end">
41
- <li class="breadcrumb-item"><a href="#">Docs</a></li>
42
- <li class="breadcrumb-item active" aria-current="page">
43
- Browser Support
44
- </li>
45
- </ol>
46
- </div>
47
- </div>
48
- <!--end::Row-->
49
- </div>
50
- <!--end::Container-->
51
- </div>
52
- <!--end::App Content Header-->
53
- <!--begin::App Content-->
54
- <div class="app-content">
55
- <!--begin::Container-->
56
- <div class="container-fluid">
57
- <BrowserSupport />
58
- </div>
59
- <!--end::Container-->
60
- </div>
61
- <!--end::App Content-->
62
- </main>
63
- <!--end::App Main-->
64
- <Footer />
65
- </div>
66
- <!--end::App Wrapper-->
67
- <!--begin::Script-->
68
- <Scripts path={path} />
69
- <!--end::Script-->
70
- </body><!--end::Body-->
71
- </html>
package/src/html/pages/docs/color-mode.astro DELETED
@@ -1,273 +0,0 @@
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";
7
- import ColorMode from "@components/docs/color-mode.mdx";
8
-
9
- const title = "Color Mode | AdminLTE 4";
10
- const path = "../../../dist";
11
- const mainPage = "docs";
12
- const page = "color-mode";
13
- ---
14
-
15
- <!DOCTYPE html>
16
- <html lang="en">
17
- <!--begin::Head-->
18
- <head>
19
- <Head title={title} path={path} />
20
- </head>
21
- <!--end::Head-->
22
- <!--begin::Body-->
23
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
24
- <!--begin::App Wrapper-->
25
- <div class="app-wrapper">
26
- <Topbar path={path} />
27
- <Sidenav path={path} mainPage={mainPage} page={page} />
28
- <!--begin::App Main-->
29
- <main class="app-main">
30
- <!--begin::App Content Header-->
31
- <div class="app-content-header">
32
- <!--begin::Container-->
33
- <div class="container-fluid">
34
- <!--begin::Row-->
35
- <div class="row">
36
- <div class="col-sm-6">
37
- <h3 class="mb-0">Color Mode Toggle</h3>
38
- </div>
39
- <div class="col-sm-6">
40
- <ol class="breadcrumb float-sm-end">
41
- <li class="breadcrumb-item"><a href="#">Docs</a></li>
42
- <li class="breadcrumb-item active" aria-current="page">
43
- Color Mode
44
- </li>
45
- </ol>
46
- </div>
47
- </div>
48
- <!--end::Row-->
49
- </div>
50
- <!--end::Container-->
51
- </div>
52
- <!--end::App Content Header-->
53
- <!--begin::App Content-->
54
- <div class="app-content">
55
- <!--begin::Container-->
56
- <div class="container-fluid">
57
- <!--begin::Row-->
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>
70
- <!-- Start column -->
71
- <div class="col-12">
72
- <!--begin::Header-->
73
- <nav class="navbar navbar-expand bg-body">
74
- <!--begin::Container-->
75
- <div class="container-fluid">
76
- <!--begin::Start Navbar links-->
77
- <ul class="navbar-nav">
78
- <li class="nav-item">
79
- <a
80
- class="nav-link"
81
- data-lte-toggle="sidebar"
82
- href="#"
83
- role="button"><i class="bi bi-list"></i></a
84
- >
85
- </li>
86
- <li class="nav-item d-none d-md-block">
87
- <a href="#" class="nav-link">Home</a>
88
- </li>
89
- <li class="nav-item d-none d-md-block">
90
- <a href="#" class="nav-link">Contact</a>
91
- </li>
92
- </ul>
93
- <!--end::Start Navbar links-->
94
- <!--begin::End Navbar links-->
95
- <ul class="navbar-nav ms-auto">
96
- <li class="nav-item dropdown">
97
- <button
98
- class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
99
- id="bd-theme"
100
- type="button"
101
- aria-expanded="false"
102
- data-bs-toggle="dropdown"
103
- data-bs-display="static"
104
- >
105
- <span class="theme-icon-active">
106
- <i class="my-1"></i>
107
- </span>
108
- <span class="d-lg-none ms-2" id="bd-theme-text"
109
- >Toggle theme</span
110
- >
111
- </button>
112
- <ul
113
- class="dropdown-menu dropdown-menu-end"
114
- aria-labelledby="bd-theme-text"
115
- style="--bs-dropdown-min-width: 8rem;"
116
- >
117
- <li>
118
- <button
119
- type="button"
120
- class="dropdown-item d-flex align-items-center active"
121
- data-bs-theme-value="light"
122
- aria-pressed="false"
123
- >
124
- <i class="bi bi-sun-fill me-2"></i>
125
- Light
126
- <i class="bi bi-check-lg ms-auto d-none"></i>
127
- </button>
128
- </li>
129
- <li>
130
- <button
131
- type="button"
132
- class="dropdown-item d-flex align-items-center"
133
- data-bs-theme-value="dark"
134
- aria-pressed="false"
135
- >
136
- <i class="bi bi-moon-fill me-2"></i>
137
- Dark
138
- <i class="bi bi-check-lg ms-auto d-none"></i>
139
- </button>
140
- </li>
141
- <li>
142
- <button
143
- type="button"
144
- class="dropdown-item d-flex align-items-center"
145
- data-bs-theme-value="auto"
146
- aria-pressed="true"
147
- >
148
- <i class="bi bi-circle-fill-half-stroke me-2"
149
- ></i>
150
- Auto
151
- <i class="bi bi-check-lg ms-auto d-none"></i>
152
- </button>
153
- </li>
154
- </ul>
155
- </li>
156
- </ul>
157
- <!--end::End Navbar links-->
158
- </div>
159
- <!--end::Container-->
160
- </nav>
161
- <!--end::Header-->
162
- </div>
163
- <!-- Start column -->
164
- <div class="col-12">
165
- <ColorMode />
166
- </div>
167
- </div>
168
- <!--end::Row-->
169
- </div>
170
- <!--end::Container-->
171
- </div>
172
- <!--end::App Content-->
173
- </main>
174
- <!--end::App Main-->
175
- <Footer />
176
- </div>
177
- <!--end::App Wrapper-->
178
-
179
- <Scripts path={path} />
180
-
181
- <script is:inline>
182
- // Color Mode Toggler
183
- (() => {
184
- "use strict";
185
-
186
- const storedTheme = localStorage.getItem("theme");
187
-
188
- const getPreferredTheme = () => {
189
- if (storedTheme) {
190
- return storedTheme;
191
- }
192
-
193
- return window.matchMedia("(prefers-color-scheme: dark)").matches
194
- ? "dark"
195
- : "light";
196
- };
197
-
198
- const setTheme = function (theme) {
199
- if (
200
- theme === "auto" &&
201
- window.matchMedia("(prefers-color-scheme: dark)").matches
202
- ) {
203
- document.documentElement.setAttribute("data-bs-theme", "dark");
204
- } else {
205
- document.documentElement.setAttribute("data-bs-theme", theme);
206
- }
207
- };
208
-
209
- setTheme(getPreferredTheme());
210
-
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");
219
- const activeThemeIcon = document.querySelector(
220
- ".theme-icon-active i"
221
- );
222
- const btnToActive = document.querySelector(
223
- `[data-bs-theme-value="${theme}"]`
224
- );
225
- const svgOfActiveBtn = btnToActive
226
- .querySelector("i")
227
- .getAttribute("class");
228
-
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
- }
235
-
236
- btnToActive.classList.add("active");
237
- btnToActive.setAttribute("aria-pressed", "true");
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
- }
245
- };
246
-
247
- window
248
- .matchMedia("(prefers-color-scheme: dark)")
249
- .addEventListener("change", () => {
250
- if (storedTheme !== "light" || storedTheme !== "dark") {
251
- setTheme(getPreferredTheme());
252
- }
253
- });
254
-
255
- window.addEventListener("DOMContentLoaded", () => {
256
- showActiveTheme(getPreferredTheme());
257
-
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);
266
- });
267
- }
268
- });
269
- })();
270
- </script>
271
- <!--end::Script-->
272
- </body><!--end::Body-->
273
- </html>