Added new layout fixed-header fixed-footer

src/html/components/dashboard/_sidenav.astro

@@ -161,6 +161,33 @@ const htmlPath = convertPathToHtml(path);
                 <p>Fixed Sidebar</p>
               </a>
             </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/layout/fixed-header.html"}
+                class:list={["nav-link", page === "fixed-header" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Fixed Header</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/layout/fixed-footer.html"}
+                class:list={["nav-link", page === "fixed-footer" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Fixed Footer</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/layout/fixed-complete.html"}
+                class:list={["nav-link", page === "fixed-complete" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Fixed Complete</p>
+              </a>
+            </li>
             <li class="nav-item">
               <a
                 href={htmlPath + "/layout/layout-custom-area.html"}

src/html/pages/generate/theme.astro

@@ -321,6 +321,86 @@ const htmlPath = convertPathToHtml(path);
                   <!--end::Card Footer-->
                 </div>
                 <!--end::Card-->
+
+                <!--begin::Card-->
+                <div class="card mt-4">
+                  <!--begin::Card Header-->
+                  <div class="card-header">
+                    <!--begin::Card Title-->
+                    <h3 class="card-title">Footer Theme</h3>
+                    <!--end::Card Title-->
+
+                    <!--begin::Card Toolbar-->
+                    <div class="card-tools">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                      >
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-remove"
+                        title="Remove"
+                      >
+                        <i class="bi bi-x-lg"></i>
+                      </button>
+                    </div>
+                    <!--end::Card Toolbar-->
+                  </div>
+                  <!--end::Card Header-->
+                  <!--begin::Card Body-->
+                  <div class="card-body">
+                    <!--begin::Row-->
+                    <div class="row">
+                      <!--begin::Col-->
+                      <div class="col-md-3">
+                        <select
+                          id="footer-color-modes"
+                          class="form-select form-select-lg"
+                          aria-label="Footer Color Mode Select"
+                        >
+                          <option value="">---Select---</option>
+                          <option value="dark">Dark</option>
+                          <option value="light">Light</option>
+                        </select>
+                      </div>
+                      <!--end::Col-->
+                      <!--begin::Col-->
+                      <div class="col-md-3">
+                        <select
+                          id="footer-color"
+                          class="form-select form-select-lg"
+                          aria-label="Footer Color Select"
+                        >
+                          <option value="">---Select---</option>
+                        </select>
+                      </div>
+                      <!--end::Col-->
+                      <!--begin::Col-->
+                      <div class="col-md-6">
+                        <div id="footer-color-code" class="w-100"></div>
+                      </div>
+                      <!--end::Col-->
+                    </div>
+                    <!--end::Row-->
+                  </div>
+                  <!--end::Card Body-->
+                  <!--begin::Card Footer-->
+                  <div class="card-footer">
+                    Check more color in
+                    <a
+                      href="https://getbootstrap.com/docs/5.3/utilities/background/"
+                      target="_blank"
+                      class="link-primary">Bootstrap Background Colors</a
+                    >
+                  </div>
+                  <!--end::Card Footer-->
+                </div>
+                <!--end::Card-->
               </div>
               <!--end::Col-->
             </div>
@@ -473,6 +553,73 @@ const htmlPath = convertPathToHtml(path);
           updateNavbar();
         });
       });
+
+      document.addEventListener("DOMContentLoaded", () => {
+        const appFooter = document.querySelector(".app-footer");
+        const footerColorModes = document.querySelector("#footer-color-modes");
+        const footerColor = document.querySelector("#footer-color");
+        const footerColorCode = document.querySelector("#footer-color-code");
+
+        const themeBg = [
+          "bg-primary",
+          "bg-primary-subtle",
+          "bg-secondary",
+          "bg-secondary-subtle",
+          "bg-success",
+          "bg-success-subtle",
+          "bg-danger",
+          "bg-danger-subtle",
+          "bg-warning",
+          "bg-warning-subtle",
+          "bg-info",
+          "bg-info-subtle",
+          "bg-light",
+          "bg-light-subtle",
+          "bg-dark",
+          "bg-dark-subtle",
+          "bg-body-secondary",
+          "bg-body-tertiary",
+          "bg-body",
+          "bg-black",
+          "bg-white",
+          "bg-transparent",
+        ];
+
+        // loop through each option themeBg array
+        document.querySelector("#footer-color").innerHTML = themeBg.map(
+          (bg) => {
+            // return option element with value and text
+            return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
+          },
+        );
+
+        let footerColorMode = "";
+        let footerBg = "";
+
+        function updateFooter() {
+          appFooter.setAttribute("data-bs-theme", footerColorMode);
+          footerColorCode.innerHTML = `<pre><code class="language-html">&lt;footer class="app-footer ${footerBg}" data-bs-theme="${footerColorMode}"&gt;...&lt;/footer&gt;</code></pre>`;
+        }
+
+        footerColorModes.addEventListener("input", (event) => {
+          footerColorMode = event.target.value;
+          updateFooter();
+        });
+
+        footerColor.addEventListener("input", (event) => {
+          footerBg = event.target.value;
+
+          themeBg.forEach((className) => {
+            appFooter.classList.remove(className);
+          });
+
+          if (themeBg.includes(footerBg)) {
+            appFooter.classList.add(footerBg);
+          }
+
+          updateFooter();
+        });
+      });
     </script>
     <!--end::Script-->
   </body><!--end::Body-->

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

@@ -0,0 +1,109 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+
+const title = "AdminLTE 4 | Fixed Complete";
+const path = "../../../dist";
+const mainPage = "layout";
+const page = "fixed-complete";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed fixed-header fixed-footer sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Fixed Complete</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Fixed Complete
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-12">
+                <!-- Default box -->
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Title</h3>
+
+                    <div class="card-tools">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-remove"
+                        title="Remove"
+                      >
+                        <i class="bi bi-x-lg"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    Start creating your amazing application!
+                  </div>
+                  <!-- /.card-body -->
+                  <div class="card-footer">Footer</div>
+                  <!-- /.card-footer-->
+                </div>
+                <!-- /.card -->
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>

src/html/pages/layout/fixed-footer.astro

@@ -0,0 +1,107 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+
+const title = "AdminLTE 4 | Fixed Footer";
+const path = "../../../dist";
+const mainPage = "layout";
+const page = "fixed-footer";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="fixed-footer sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Fixed Footer</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Fixed Footer
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-12">
+                <!-- Default box -->
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Title</h3>
+
+                    <div class="card-tools">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-remove"
+                        title="Remove"
+                      >
+                        <i class="bi bi-x-lg"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    Start creating your amazing application!
+                  </div>
+                  <!-- /.card-body -->
+                  <div class="card-footer">Footer</div>
+                  <!-- /.card-footer-->
+                </div>
+                <!-- /.card -->
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>

src/html/pages/layout/fixed-header.astro

@@ -0,0 +1,107 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+
+const title = "AdminLTE 4 | Fixed Header";
+const path = "../../../dist";
+const mainPage = "layout";
+const page = "fixed-header";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="fixed-header sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Fixed Header</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Fixed Header
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-12">
+                <!-- Default box -->
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Title</h3>
+
+                    <div class="card-tools">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-remove"
+                        title="Remove"
+                      >
+                        <i class="bi bi-x-lg"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    Start creating your amazing application!
+                  </div>
+                  <!-- /.card-body -->
+                  <div class="card-footer">Footer</div>
+                  <!-- /.card-footer-->
+                </div>
+                <!-- /.card -->
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>

src/scss/_app-footer.scss

@@ -13,3 +13,11 @@
   border-top: $lte-app-footer-border-top;
   @include transition($lte-transition-speed $lte-transition-fn);
 }
+
+.fixed-footer {
+  .app-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: $lte-zindex-fixed-footer;
+  }
+}

src/scss/_app-header.scss

@@ -24,3 +24,11 @@
   font-size: .6rem;
   font-weight: 400;
 }
+
+.fixed-header {
+  .app-header {
+    position: sticky;
+    top: 0;
+    z-index: $lte-zindex-fixed-header;
+  }
+}

src/scss/_variables.scss

@@ -58,6 +58,7 @@ $lte-app-header-bottom-border:        $lte-app-header-bottom-border-width solid
 $lte-app-header-link-padding-y:       $navbar-padding-y !default;
 $lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
 $lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
+$lte-zindex-fixed-header:           $zindex-fixed !default;
 
 // APP MAIN
 // --------------------------------------------------------
@@ -77,7 +78,7 @@ $lte-app-footer-border-top-color:  var(--#{$prefix}border-color) !default;
 $lte-app-footer-border-top:        $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
 $lte-app-footer-bg:                var(--#{$prefix}body-bg) !default;
 $lte-app-footer-color:             var(--#{$prefix}secondary-color) !default;
-
+$lte-zindex-fixed-footer:         $zindex-fixed !default;
 // CONTENT BOTTOM AREA
 // --------------------------------------------------------
 $lte-app-content-bottom-area-margin-bottom: -$lte-app-main-padding-bottom !default;