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/src/html/pages/UI/timeline.astro ADDED
@@ -0,0 +1,158 @@
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
+ <!DOCTYPE html>
14
+ <html lang="en">
15
+ <head>
16
+ <Head title={title} path={path} />
17
+ </head>
18
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
19
+ <div class="app-wrapper">
20
+ <Topbar path={path} />
21
+ <Sidenav path={path} mainPage={mainPage} page={page} />
22
+ <!-- Main content -->
23
+ <main class="app-main">
24
+ <div class="app-content-header">
25
+ <div class="container-fluid">
26
+ <div class="row">
27
+ <div class="col-sm-6">
28
+ <h3 class="mb-0">Timeline</h3>
29
+ </div>
30
+ <div class="col-sm-6">
31
+ <ol class="breadcrumb float-sm-end">
32
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
33
+ <li class="breadcrumb-item active" aria-current="page">Timeline</li>
34
+ </ol>
35
+ </div>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ <!-- Main content -->
40
+ <div class="app-content">
41
+ <div class="container-fluid">
42
+ <!-- Timelime example -->
43
+ <div class="row">
44
+ <div class="col-md-12">
45
+ <!-- The time line -->
46
+ <div class="timeline">
47
+ <!-- timeline time label -->
48
+ <div class="time-label">
49
+ <span class="text-bg-danger">10 Feb. 2023</span>
50
+ </div>
51
+ <!-- /.timeline-label -->
52
+ <!-- timeline item -->
53
+ <div>
54
+ <i class="timeline-icon fa-solid fa-envelope text-bg-primary"></i>
55
+ <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>
58
+
59
+ <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...
64
+ </div>
65
+ <div class="timeline-footer">
66
+ <a class="btn btn-primary btn-sm">Read more</a>
67
+ <a class="btn btn-danger btn-sm">Delete</a>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ <!-- END timeline item -->
72
+ <!-- timeline item -->
73
+ <div>
74
+ <i class="timeline-icon fa-solid fa-user text-bg-success"></i>
75
+ <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>
78
+ </div>
79
+ </div>
80
+ <!-- END timeline item -->
81
+ <!-- timeline item -->
82
+ <div>
83
+ <i class="timeline-icon fa-solid fa-comments text-bg-warning"></i>
84
+ <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>
87
+ <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!
91
+ </div>
92
+ <div class="timeline-footer">
93
+ <a class="btn btn-warning btn-sm">View comment</a>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ <!-- END timeline item -->
98
+ <!-- timeline time label -->
99
+ <div class="time-label">
100
+ <span class="text-bg-success">3 Jan. 2023</span>
101
+ </div>
102
+ <!-- /.timeline-label -->
103
+ <!-- timeline item -->
104
+ <div>
105
+ <i class="timeline-icon fa-solid fa-camera text-bg-primary"></i>
106
+ <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>
109
+ <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="...">
114
+ </div>
115
+ </div>
116
+ </div>
117
+ <!-- END timeline item -->
118
+ <!-- timeline item -->
119
+ <div>
120
+ <i class="timeline-icon fa-solid fa-video text-bg-info"></i>
121
+
122
+ <div class="timeline-item">
123
+ <span class="time"><i class="fa-solid fa-clock"></i> 5 days ago</span>
124
+
125
+ <h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
126
+
127
+ <div class="timeline-body">
128
+ <div class="ratio ratio-16x9">
129
+ <iframe src="https://www.youtube.com/embed/tMWkeBIohBs" allowfullscreen></iframe>
130
+ </div>
131
+ </div>
132
+ <div class="timeline-footer">
133
+ <a href="#" class="btn btn-sm text-bg-warning">See comments</a>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ <!-- END timeline item -->
138
+ <div>
139
+ <i class="timeline-icon fa-solid fa-clock text-bg-secondary"></i>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ <!-- /.col -->
144
+ </div>
145
+ <!-- /.row -->
146
+ </div><!-- /.container-fluid -->
147
+ </div>
148
+ <!-- /.content -->
149
+ </main>
150
+ <!-- /.app-content -->
151
+
152
+ <Footer />
153
+ </div>
154
+ <!-- ./app-wrapper -->
155
+
156
+ <Scripts path={path} />
157
+ </body>
158
+ </html>
package/src/html/pages/docs/browser-support.astro ADDED
@@ -0,0 +1,58 @@
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/index.md";
6
+ import Sidenav from "@components/dashboard/_sidenav.astro";
7
+ import Scripts from "@components/_scripts.astro";
8
+ const title = "Browser Support | AdminLTE 4";
9
+ const path = '../../../dist'
10
+ const mainPage = "docs";
11
+ const page = "browser-support";
12
+ ---
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <Head title={title} path={path} />
18
+ </head>
19
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
20
+ <div class="app-wrapper">
21
+ <Topbar path={path} />
22
+ <Sidenav path={path} mainPage={mainPage} page={page} />
23
+ <!-- Main content -->
24
+ <main class="app-main">
25
+ <div class="app-content-header">
26
+ <div class="container-fluid">
27
+ <div class="row">
28
+ <div class="col-sm-6">
29
+ <h3 class="mb-0">Browser Support</h3>
30
+ </div>
31
+ <div class="col-sm-6">
32
+ <ol class="breadcrumb float-sm-end">
33
+ <li class="breadcrumb-item"><a href="#">Docs</a></li>
34
+ <li class="breadcrumb-item active" aria-current="page">
35
+ Browser Support
36
+ </li>
37
+ </ol>
38
+ </div>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ <!-- Main content -->
43
+ <div class="app-content">
44
+ <div class="container-fluid">
45
+ <BrowserSupport />
46
+ </div><!-- /.container-fluid -->
47
+ </div>
48
+ <!-- /.content -->
49
+ </main>
50
+ <!-- /.app-content -->
51
+
52
+ <Footer />
53
+ </div>
54
+ <!-- ./app-wrapper -->
55
+
56
+ <Scripts path={path} />
57
+ </body>
58
+ </html>
package/src/html/pages/docs/color-mode.astro ADDED
@@ -0,0 +1,224 @@
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 NavbarHtml from "@components/docs/color-mode/navbar-html.md";
8
+ import ToggleScript from "@components/docs/color-mode/toggle-script.md";
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
+ <head>
18
+ <Head title={title} path={path} />
19
+ </head>
20
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
21
+ <div class="app-wrapper">
22
+ <Topbar path={path} />
23
+ <Sidenav path={path} mainPage={mainPage} page={page} />
24
+ <!-- Main content -->
25
+ <main class="app-main">
26
+ <div class="app-content-header">
27
+ <div class="container-fluid">
28
+ <div class="row">
29
+ <div class="col-sm-6">
30
+ <h3 class="mb-0">Color Mode Toggle</h3>
31
+ </div>
32
+ <div class="col-sm-6">
33
+ <ol class="breadcrumb float-sm-end">
34
+ <li class="breadcrumb-item"><a href="#">Docs</a></li>
35
+ <li class="breadcrumb-item active" aria-current="page">
36
+ General Form
37
+ </li>
38
+ </ol>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ <!-- Main content -->
44
+ <div class="app-content">
45
+ <div class="container-fluid">
46
+ <div class="row g-4">
47
+ <!-- Start column -->
48
+ <div class="col-12">
49
+ <!-- Navbar -->
50
+ <nav class="navbar navbar-expand bg-body">
51
+ <div class="container-fluid">
52
+ <!-- Start navbar links -->
53
+ <ul class="navbar-nav">
54
+ <li class="nav-item">
55
+ <a
56
+ class="nav-link"
57
+ data-lte-toggle="sidebar"
58
+ href="#"
59
+ role="button"><i class="fa-solid fa-bars"></i></a
60
+ >
61
+ </li>
62
+ <li class="nav-item d-none d-md-block">
63
+ <a href="#" class="nav-link">Home</a>
64
+ </li>
65
+ <li class="nav-item d-none d-md-block">
66
+ <a href="#" class="nav-link">Contact</a>
67
+ </li>
68
+ </ul>
69
+ <ul class="navbar-nav ms-auto">
70
+ <li class="nav-item dropdown">
71
+ <button
72
+ class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
73
+ id="bd-theme"
74
+ type="button"
75
+ aria-expanded="false"
76
+ data-bs-toggle="dropdown"
77
+ data-bs-display="static"
78
+ >
79
+ <span class="theme-icon-active">
80
+ <i class="my-1"></i>
81
+ </span>
82
+ </button>
83
+ <ul
84
+ class="dropdown-menu dropdown-menu-end"
85
+ aria-labelledby="bd-theme"
86
+ style="--bs-dropdown-min-width: 8rem;"
87
+ >
88
+ <li>
89
+ <button
90
+ type="button"
91
+ class="dropdown-item d-flex align-items-center active"
92
+ data-bs-theme-value="light"
93
+ >
94
+ <i class="fa-regular fa-sun me-2"></i>
95
+ Light
96
+ <i class="fa-solid fa-check ms-auto d-none"></i>
97
+ </button>
98
+ </li>
99
+ <li>
100
+ <button
101
+ type="button"
102
+ class="dropdown-item d-flex align-items-center"
103
+ data-bs-theme-value="dark"
104
+ >
105
+ <i class="fa-solid fa-moon me-2"></i>
106
+ Dark
107
+ <i class="fa-solid fa-check ms-auto d-none"></i>
108
+ </button>
109
+ </li>
110
+ <li>
111
+ <button
112
+ type="button"
113
+ class="dropdown-item d-flex align-items-center"
114
+ data-bs-theme-value="auto"
115
+ >
116
+ <i class="fa-solid fa-circle-half-stroke me-2"
117
+ ></i>
118
+ Auto
119
+ <i class="fa-solid fa-check ms-auto d-none"></i>
120
+ </button>
121
+ </li>
122
+ </ul>
123
+ </li>
124
+ </ul>
125
+ </div>
126
+ </nav>
127
+ </div>
128
+ <!-- Start column -->
129
+ <div class="col-12">
130
+ <NavbarHtml />
131
+
132
+ <ToggleScript />
133
+ </div>
134
+ </div>
135
+ <!-- /.row -->
136
+ </div><!-- /.container-fluid -->
137
+ </div>
138
+ <!-- /.content -->
139
+ </main>
140
+ <!-- /.app-content -->
141
+
142
+ <Footer />
143
+ </div>
144
+ <!-- ./app-wrapper -->
145
+
146
+ <Scripts path={path} />
147
+
148
+ <script is:inline>
149
+ // Color Mode Toggler
150
+ (() => {
151
+ "use strict";
152
+
153
+ const storedTheme = localStorage.getItem("theme");
154
+
155
+ const getPreferredTheme = () => {
156
+ if (storedTheme) {
157
+ return storedTheme;
158
+ }
159
+
160
+ return window.matchMedia("(prefers-color-scheme: dark)").matches
161
+ ? "dark"
162
+ : "light";
163
+ };
164
+
165
+ const setTheme = function (theme) {
166
+ if (
167
+ theme === "auto" &&
168
+ window.matchMedia("(prefers-color-scheme: dark)").matches
169
+ ) {
170
+ document.documentElement.setAttribute("data-bs-theme", "dark");
171
+ } else {
172
+ document.documentElement.setAttribute("data-bs-theme", theme);
173
+ }
174
+ };
175
+
176
+ setTheme(getPreferredTheme());
177
+
178
+ const showActiveTheme = (theme) => {
179
+ const activeThemeIcon = document.querySelector(
180
+ ".theme-icon-active i"
181
+ );
182
+ const btnToActive = document.querySelector(
183
+ '[data-bs-theme-value="' + theme + '"]'
184
+ );
185
+ const svgOfActiveBtn = btnToActive
186
+ .querySelector("i")
187
+ .getAttribute("class");
188
+
189
+ document
190
+ .querySelectorAll("[data-bs-theme-value]")
191
+ .forEach((element) => {
192
+ element.classList.remove("active");
193
+ });
194
+
195
+ btnToActive.classList.add("active");
196
+ activeThemeIcon.setAttribute("class", svgOfActiveBtn);
197
+ };
198
+
199
+ window
200
+ .matchMedia("(prefers-color-scheme: dark)")
201
+ .addEventListener("change", () => {
202
+ if (storedTheme !== "light" || storedTheme !== "dark") {
203
+ setTheme(getPreferredTheme());
204
+ }
205
+ });
206
+
207
+ window.addEventListener("DOMContentLoaded", () => {
208
+ showActiveTheme(getPreferredTheme());
209
+
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
+ });
219
+ });
220
+ });
221
+ })();
222
+ </script>
223
+ </body>
224
+ </html>
package/src/html/pages/docs/components/main-header.astro ADDED
@@ -0,0 +1,232 @@
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 MainHeader1 from "@components/docs/components/main-header-1.md";
6
+ import Sidenav from "@components/dashboard/_sidenav.astro";
7
+ import Scripts from "@components/_scripts.astro";
8
+ const title = "Main Header Component | AdminLTE 4";
9
+ const path = '../../../../dist'
10
+ const mainPage = "components";
11
+ const page = "main-header";
12
+ const distPath = path
13
+ ---
14
+
15
+ <!DOCTYPE html>
16
+ <html lang="en">
17
+ <head>
18
+ <Head title={title} path={path} />
19
+ </head>
20
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
21
+ <div class="app-wrapper">
22
+ <Topbar path={path} />
23
+ <Sidenav path={path} mainPage={mainPage} page={page} />
24
+ <!-- Main content -->
25
+ <main class="app-main">
26
+ <div class="app-content-header">
27
+ <div class="container-fluid">
28
+ <div class="row">
29
+ <div class="col-sm-6">
30
+ <h3 class="mb-0">Main Header Component</h3>
31
+ </div>
32
+ <div class="col-sm-6">
33
+ <ol class="breadcrumb float-sm-end">
34
+ <li class="breadcrumb-item"><a href="#">Docs</a></li>
35
+ <li class="breadcrumb-item active" aria-current="page">
36
+ Main Header Component
37
+ </li>
38
+ </ol>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ <!-- Main content -->
44
+ <div class="app-content">
45
+ <div class="container-fluid">
46
+ <div class="callout callout-warning mb-4">
47
+ <h5 class="fw-bold">Reminder!</h5>
48
+ <p>
49
+ AdminLTE uses all of Bootstrap 5 components. It's a good start to review the [Bootstrap documentation](https://getbootstrap.com/) to get an idea of the various components that this documentation <b>does not</b> cover.
50
+ </p>
51
+ </div>
52
+
53
+ <div class="callout callout-info mb-4">
54
+ <h5 class="fw-bold">Tips!</h5>
55
+ <p>
56
+ If you go through the example pages and would like to copy a component, right-click on the component and choose “inspect element” to get to the HTML quicker than scanning the HTML page.
57
+ </p>
58
+ </div>
59
+
60
+ <!-- Navbar -->
61
+ <nav class="navbar navbar-expand bg-body">
62
+ <div class="container-fluid">
63
+ <!-- Start navbar links -->
64
+ <ul class="navbar-nav">
65
+ <li class="nav-item">
66
+ <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
67
+ </li>
68
+ <li class="nav-item d-none d-md-block">
69
+ <a href="#" class="nav-link">Home</a>
70
+ </li>
71
+ <li class="nav-item d-none d-md-block">
72
+ <a href="#" class="nav-link">Contact</a>
73
+ </li>
74
+ </ul>
75
+ <!-- End navbar links -->
76
+
77
+ <ul class="navbar-nav ms-auto">
78
+ <!-- Navbar Search -->
79
+ <li class="nav-item">
80
+ <a class="nav-link" data-widget="navbar-search" href="#" role="button">
81
+ <i class="fa-solid fa-search"></i>
82
+ </a>
83
+ </li>
84
+
85
+ <!-- Messages Dropdown Menu -->
86
+ <li class="nav-item dropdown">
87
+ <a class="nav-link" data-bs-toggle="dropdown" href="#">
88
+ <i class="fa-regular fa-comments"></i>
89
+ <span class="navbar-badge badge text-bg-danger">3</span>
90
+ </a>
91
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
92
+ <a href="#" class="dropdown-item">
93
+ <!-- Message Start -->
94
+ <div class="d-flex">
95
+ <div class="flex-shrink-0">
96
+ <img src={distPath + '/assets/img/user1-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
97
+ </div>
98
+ <div class="flex-grow-1">
99
+ <h3 class="dropdown-item-title">
100
+ Brad Diesel
101
+ <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
102
+ </h3>
103
+ <p class="fs-7">Call me whenever you can...</p>
104
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
105
+ </div>
106
+ </div>
107
+ <!-- Message End -->
108
+ </a>
109
+ <div class="dropdown-divider"></div>
110
+ <a href="#" class="dropdown-item">
111
+ <!-- Message Start -->
112
+ <div class="d-flex">
113
+ <div class="flex-shrink-0">
114
+ <img src={distPath + '/assets/img/user8-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
115
+ </div>
116
+ <div class="flex-grow-1">
117
+ <h3 class="dropdown-item-title">
118
+ John Pierce
119
+ <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
120
+ </h3>
121
+ <p class="fs-7">I got your message bro</p>
122
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
123
+ </div>
124
+ </div>
125
+ <!-- Message End -->
126
+ </a>
127
+ <div class="dropdown-divider"></div>
128
+ <a href="#" class="dropdown-item">
129
+ <!-- Message Start -->
130
+ <div class="d-flex">
131
+ <div class="flex-shrink-0">
132
+ <img src={distPath + '/assets/img/user3-128x128.jpg'}alt="User Avatar" class="img-size-50 rounded-circle me-3">
133
+ </div>
134
+ <div class="flex-grow-1">
135
+ <h3 class="dropdown-item-title">
136
+ Nora Silvester
137
+ <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
138
+ </h3>
139
+ <p class="fs-7">The subject goes here</p>
140
+ <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
141
+ </div>
142
+ </div>
143
+ <!-- Message End -->
144
+ </a>
145
+ <div class="dropdown-divider"></div>
146
+ <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
147
+ </div>
148
+ </li>
149
+ <!-- Notifications Dropdown Menu -->
150
+ <li class="nav-item dropdown">
151
+ <a class="nav-link" data-bs-toggle="dropdown" href="#">
152
+ <i class="fa-regular fa-bell"></i>
153
+ <span class="navbar-badge badge text-bg-warning">15</span>
154
+ </a>
155
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
156
+ <span class="dropdown-item dropdown-header">15 Notifications</span>
157
+ <div class="dropdown-divider"></div>
158
+ <a href="#" class="dropdown-item">
159
+ <i class="fa-solid fa-envelope me-2"></i> 4 new messages
160
+ <span class="float-end text-secondary fs-7">3 mins</span>
161
+ </a>
162
+ <div class="dropdown-divider"></div>
163
+ <a href="#" class="dropdown-item">
164
+ <i class="fa-solid fa-users me-2"></i> 8 friend requests
165
+ <span class="float-end text-secondary fs-7">12 hours</span>
166
+ </a>
167
+ <div class="dropdown-divider"></div>
168
+ <a href="#" class="dropdown-item">
169
+ <i class="fa-solid fa-file me-2"></i> 3 new reports
170
+ <span class="float-end text-secondary fs-7">2 days</span>
171
+ </a>
172
+ <div class="dropdown-divider"></div>
173
+ <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
174
+ </div>
175
+ </li>
176
+ <li class="nav-item dropdown user-menu">
177
+ <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
178
+ <img src={distPath + '/assets/img/user2-160x160.jpg'} class="user-image rounded-circle shadow" alt="User Image">
179
+ <span class="d-none d-md-inline">Alexander Pierce</span>
180
+ </a>
181
+ <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
182
+ <!-- User image -->
183
+ <li class="user-header text-bg-primary">
184
+ <img src={distPath + '/assets/img/user2-160x160.jpg'} class="rounded-circle shadow" alt="User Image">
185
+
186
+ <p>
187
+ Alexander Pierce - Web Developer
188
+ <small>Member since Nov. 2023</small>
189
+ </p>
190
+ </li>
191
+ <!-- Menu Body -->
192
+ <li class="user-body">
193
+ <div class="row">
194
+ <div class="col-4 text-center">
195
+ <a href="#">Followers</a>
196
+ </div>
197
+ <div class="col-4 text-center">
198
+ <a href="#">Sales</a>
199
+ </div>
200
+ <div class="col-4 text-center">
201
+ <a href="#">Friends</a>
202
+ </div>
203
+ </div>
204
+ <!-- /.row -->
205
+ </li>
206
+ <!-- Menu Footer-->
207
+ <li class="user-footer">
208
+ <a href="#" class="btn btn-default btn-flat">Profile</a>
209
+ <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
210
+ </li>
211
+ </ul>
212
+ </li>
213
+ </ul>
214
+ </div>
215
+ </nav>
216
+ <!-- /.navbar -->
217
+
218
+ <MainHeader1 />
219
+ </div>
220
+ <!-- /.container-fluid -->
221
+ </div>
222
+ <!-- /.content -->
223
+ </main>
224
+ <!-- /.app-content -->
225
+
226
+ <Footer />
227
+ </div>
228
+ <!-- ./app-wrapper -->
229
+
230
+ <Scripts path={path} />
231
+ </body>
232
+ </html>