Skip to content

Commit cb47c82

Browse files
danny007indanny007in
committed
Added new layout fixed-header fixed-footer
1 parent e081265 commit cb47c82

File tree

8 files changed

+515
-1
lines changed

8 files changed

+515
-1
lines changed

‎src/html/components/dashboard/_sidenav.astro‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,33 @@ const htmlPath = convertPathToHtml(path);
161161
<p>Fixed Sidebar</p>
162162
</a>
163163
</li>
164+
<li class="nav-item">
165+
<a
166+
href={htmlPath + "/layout/fixed-header.html"}
167+
class:list={["nav-link", page === "fixed-header" && "active"]}
168+
>
169+
<i class="nav-icon bi bi-circle"></i>
170+
<p>Fixed Header</p>
171+
</a>
172+
</li>
173+
<li class="nav-item">
174+
<a
175+
href={htmlPath + "/layout/fixed-footer.html"}
176+
class:list={["nav-link", page === "fixed-footer" && "active"]}
177+
>
178+
<i class="nav-icon bi bi-circle"></i>
179+
<p>Fixed Footer</p>
180+
</a>
181+
</li>
182+
<li class="nav-item">
183+
<a
184+
href={htmlPath + "/layout/fixed-complete.html"}
185+
class:list={["nav-link", page === "fixed-complete" && "active"]}
186+
>
187+
<i class="nav-icon bi bi-circle"></i>
188+
<p>Fixed Complete</p>
189+
</a>
190+
</li>
164191
<li class="nav-item">
165192
<a
166193
href={htmlPath + "/layout/layout-custom-area.html"}

‎src/html/pages/generate/theme.astro‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,86 @@ const htmlPath = convertPathToHtml(path);
321321
<!--end::Card Footer-->
322322
</div>
323323
<!--end::Card-->
324+
325+
<!--begin::Card-->
326+
<div class="card mt-4">
327+
<!--begin::Card Header-->
328+
<div class="card-header">
329+
<!--begin::Card Title-->
330+
<h3 class="card-title">Footer Theme</h3>
331+
<!--end::Card Title-->
332+
333+
<!--begin::Card Toolbar-->
334+
<div class="card-tools">
335+
<button
336+
type="button"
337+
class="btn btn-tool"
338+
data-lte-toggle="card-collapse"
339+
>
340+
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
341+
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
342+
</button>
343+
<button
344+
type="button"
345+
class="btn btn-tool"
346+
data-lte-toggle="card-remove"
347+
title="Remove"
348+
>
349+
<i class="bi bi-x-lg"></i>
350+
</button>
351+
</div>
352+
<!--end::Card Toolbar-->
353+
</div>
354+
<!--end::Card Header-->
355+
<!--begin::Card Body-->
356+
<div class="card-body">
357+
<!--begin::Row-->
358+
<div class="row">
359+
<!--begin::Col-->
360+
<div class="col-md-3">
361+
<select
362+
id="footer-color-modes"
363+
class="form-select form-select-lg"
364+
aria-label="Footer Color Mode Select"
365+
>
366+
<option value="">---Select---</option>
367+
<option value="dark">Dark</option>
368+
<option value="light">Light</option>
369+
</select>
370+
</div>
371+
<!--end::Col-->
372+
<!--begin::Col-->
373+
<div class="col-md-3">
374+
<select
375+
id="footer-color"
376+
class="form-select form-select-lg"
377+
aria-label="Footer Color Select"
378+
>
379+
<option value="">---Select---</option>
380+
</select>
381+
</div>
382+
<!--end::Col-->
383+
<!--begin::Col-->
384+
<div class="col-md-6">
385+
<div id="footer-color-code" class="w-100"></div>
386+
</div>
387+
<!--end::Col-->
388+
</div>
389+
<!--end::Row-->
390+
</div>
391+
<!--end::Card Body-->
392+
<!--begin::Card Footer-->
393+
<div class="card-footer">
394+
Check more color in
395+
<a
396+
href="https://getbootstrap.com/docs/5.3/utilities/background/"
397+
target="_blank"
398+
class="link-primary">Bootstrap Background Colors</a
399+
>
400+
</div>
401+
<!--end::Card Footer-->
402+
</div>
403+
<!--end::Card-->
324404
</div>
325405
<!--end::Col-->
326406
</div>
@@ -473,6 +553,73 @@ const htmlPath = convertPathToHtml(path);
473553
updateNavbar();
474554
});
475555
});
556+
557+
document.addEventListener("DOMContentLoaded", () => {
558+
const appFooter = document.querySelector(".app-footer");
559+
const footerColorModes = document.querySelector("#footer-color-modes");
560+
const footerColor = document.querySelector("#footer-color");
561+
const footerColorCode = document.querySelector("#footer-color-code");
562+
563+
const themeBg = [
564+
"bg-primary",
565+
"bg-primary-subtle",
566+
"bg-secondary",
567+
"bg-secondary-subtle",
568+
"bg-success",
569+
"bg-success-subtle",
570+
"bg-danger",
571+
"bg-danger-subtle",
572+
"bg-warning",
573+
"bg-warning-subtle",
574+
"bg-info",
575+
"bg-info-subtle",
576+
"bg-light",
577+
"bg-light-subtle",
578+
"bg-dark",
579+
"bg-dark-subtle",
580+
"bg-body-secondary",
581+
"bg-body-tertiary",
582+
"bg-body",
583+
"bg-black",
584+
"bg-white",
585+
"bg-transparent",
586+
];
587+
588+
// loop through each option themeBg array
589+
document.querySelector("#footer-color").innerHTML = themeBg.map(
590+
(bg) => {
591+
// return option element with value and text
592+
return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
593+
},
594+
);
595+
596+
let footerColorMode = "";
597+
let footerBg = "";
598+
599+
function updateFooter() {
600+
appFooter.setAttribute("data-bs-theme", footerColorMode);
601+
footerColorCode.innerHTML = `<pre><code class="language-html">&lt;footer class="app-footer ${footerBg}" data-bs-theme="${footerColorMode}"&gt;...&lt;/footer&gt;</code></pre>`;
602+
}
603+
604+
footerColorModes.addEventListener("input", (event) => {
605+
footerColorMode = event.target.value;
606+
updateFooter();
607+
});
608+
609+
footerColor.addEventListener("input", (event) => {
610+
footerBg = event.target.value;
611+
612+
themeBg.forEach((className) => {
613+
appFooter.classList.remove(className);
614+
});
615+
616+
if (themeBg.includes(footerBg)) {
617+
appFooter.classList.add(footerBg);
618+
}
619+
620+
updateFooter();
621+
});
622+
});
476623
</script>
477624
<!--end::Script-->
478625
</body><!--end::Body-->

‎src/html/pages/layout/fixed-complete.astro‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
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 | Fixed Complete";
9+
const path = "../../../dist";
10+
const mainPage = "layout";
11+
const page = "fixed-complete";
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 fixed-header fixed-footer 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+
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">Fixed Complete</h3>
38+
</div>
39+
<div class="col-sm-6">
40+
<ol class="breadcrumb float-sm-end">
41+
<li class="breadcrumb-item"><a href="#">Home</a></li>
42+
<li class="breadcrumb-item active" aria-current="page">
43+
Fixed Complete
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">
59+
<div class="col-12">
60+
<!-- Default box -->
61+
<div class="card">
62+
<div class="card-header">
63+
<h3 class="card-title">Title</h3>
64+
65+
<div class="card-tools">
66+
<button
67+
type="button"
68+
class="btn btn-tool"
69+
data-lte-toggle="card-collapse"
70+
title="Collapse"
71+
>
72+
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
73+
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
74+
</button>
75+
<button
76+
type="button"
77+
class="btn btn-tool"
78+
data-lte-toggle="card-remove"
79+
title="Remove"
80+
>
81+
<i class="bi bi-x-lg"></i>
82+
</button>
83+
</div>
84+
</div>
85+
<div class="card-body">
86+
Start creating your amazing application!
87+
</div>
88+
<!-- /.card-body -->
89+
<div class="card-footer">Footer</div>
90+
<!-- /.card-footer-->
91+
</div>
92+
<!-- /.card -->
93+
</div>
94+
</div>
95+
<!--end::Row-->
96+
</div>
97+
<!--end::Container-->
98+
</div>
99+
<!--end::App Content-->
100+
</main>
101+
<!--end::App Main-->
102+
<Footer />
103+
</div>
104+
<!--end::App Wrapper-->
105+
<!--begin::Script-->
106+
<Scripts path={path} />
107+
<!--end::Script-->
108+
</body><!--end::Body-->
109+
</html>

0 commit comments

Comments
 (0)