diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 6b752c52a..424d35dd3 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -161,6 +161,33 @@ const htmlPath = convertPathToHtml(path);

Fixed Sidebar

+
  • + + +

    Fixed Header

    +     +
    • +
  • + + +

    Fixed Footer

    +     +
    • +
  • + + +

    Fixed Complete

    +     +
  • + + +
    + +
    + +

    Footer Theme

    + + + +
    + + +
    + +
    + + +
    + +
    + +
    + +
    + + +
    + +
    + + +
    + +
    + +
    + +
    + + +
    + Check more color in + Bootstrap Background Colors +
    + +
    + @@ -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 ``; + }, + ); + + let footerColorMode = ""; + let footerBg = ""; + + function updateFooter() { + appFooter.setAttribute("data-bs-theme", footerColorMode); + footerColorCode.innerHTML = `
    <footer class="app-footer ${footerBg}" data-bs-theme="${footerColorMode}">...</footer>
    `; + } + + 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(); + }); + }); diff --git a/src/html/pages/layout/fixed-complete.astro b/src/html/pages/layout/fixed-complete.astro new file mode 100644 index 000000000..9a0fe3976 --- /dev/null +++ b/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"; +--- + + + + + + + + + + + +
    + + + + +
    + +
    + +
    + +
    +
    +

    Fixed Complete

    +
    +
    +
      +
    1. Home
      2. +
    2. + Fixed Complete +
      3. +
    +
    +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    +
    +

    Title

    + +
    + + +
    +
    +
    + Start creating your amazing application! +
    + +
    Footer
    + +
    + +
    +
    + +
    + +
    + +
    + +
    +
    + + + + + + diff --git a/src/html/pages/layout/fixed-footer.astro b/src/html/pages/layout/fixed-footer.astro new file mode 100644 index 000000000..7024b61a1 --- /dev/null +++ b/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"; +--- + + + + + + + + + + + +
    + + + +
    + +
    + +
    + +
    +
    +

    Fixed Footer

    +
    +
    +
      +
    1. Home
      2. +
    2. + Fixed Footer +
      3. +
    +
    +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    +
    +

    Title

    + +
    + + +
    +
    +
    + Start creating your amazing application! +
    + +
    Footer
    + +
    + +
    +
    + +
    +
    + +
    + +
    +
    + + + + + + diff --git a/src/html/pages/layout/fixed-header.astro b/src/html/pages/layout/fixed-header.astro new file mode 100644 index 000000000..00e5194a7 --- /dev/null +++ b/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"; +--- + + + + + + + + + + + +
    + + + +
    + +
    + +
    + +
    +
    +

    Fixed Header

    +
    +
    +
      +
    1. Home
      2. +
    2. + Fixed Header +
      3. +
    +
    +
    + +
    + +
    + + +
    + +
    + +
    +
    + +
    +
    +

    Title

    + +
    + + +
    +
    +
    + Start creating your amazing application! +
    + +
    Footer
    + +
    + +
    +
    + +
    +
    + +
    + +
    +
    + + + + + + diff --git a/src/scss/_app-footer.scss b/src/scss/_app-footer.scss index 2ea71464d..5cfa36a48 100644 --- a/src/scss/_app-footer.scss +++ b/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; + } +} diff --git a/src/scss/_app-header.scss b/src/scss/_app-header.scss index ab28d7111..729828a06 100644 --- a/src/scss/_app-header.scss +++ b/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; + } +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index ae5feedcc..35675327d 100644 --- a/src/scss/_variables.scss +++ b/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;