app.min.js

// Merge default and provided settings
var settings = Object.assign({}, userSettings);
var isSidebar = document.getElementsByClassName("customizer");

if (isSidebar.length > 0) {
  var AdminSettings = {
    // Settings INIT
    AdminSettingsInit: function () {
      AdminSettings.ManageThemeLayout();
      AdminSettings.ManageSidebarType();
      AdminSettings.ManageBoxedLayout();
      AdminSettings.ManageDarkThemeLayout();
      AdminSettings.ManageCardLayout();
    },

    //****************************
    // Vertical / Horizontal Layout
    //****************************
    ManageThemeLayout: function () {
      switch (settings.Layout) {
        case "horizontal":
          document.getElementById("horizontal-layout").checked = true;
          document.documentElement.setAttribute("data-layout", "horizontal");
          break;
        case "vertical":
          document.getElementById("vertical-layout").checked = true;
          document.documentElement.setAttribute("data-layout", "vertical");
          break;
        default:
      }
    },

    //****************************
    // Full / Minisidebar type
    //****************************
    ManageSidebarType: function () {
      switch (settings.SidebarType) {
        //****************************
        // If the sidebar type has full
        //****************************
        case "full":
          document.querySelector("#full-sidebar").checked = true;
          document.body.setAttribute("data-sidebartype", "full");
          //****************************
          /* This is for the mini-sidebar if width is less then 1170*/
          //****************************
          var setsidebartype = function () {
            var width =
              window.innerWidth > 0 ? window.innerWidth : this.screen.width;
            if (width < 1300) {
              document.body.setAttribute("data-sidebartype", "mini-sidebar");
            } else {
              document.body.setAttribute("data-sidebartype", "full");
            }
          };
          window.addEventListener("DOMContentLoaded", setsidebartype);
          window.addEventListener("resize", setsidebartype);
          break;

        //****************************
        // If the sidebar type has mini-sidebar
        //****************************
        case "mini-sidebar":
          document.querySelector("#mini-sidebar").checked = true;
          document.body.setAttribute("data-sidebartype", "mini-sidebar");
          break;

        default:
      }
    },

    //****************************
    // Layout Boxed or Full
    //****************************
    ManageBoxedLayout: function () {
      const containerFluid = document.querySelectorAll(".container");
      //   document.getElementById("boxed-layout").checked = true;
      switch (settings.BoxedLayout) {
        case "boxed":
          containerFluid.forEach(function (element) {
            element.classList.remove("max-w-full");
          });
          document.documentElement.setAttribute("data-boxed-layout", "boxed");
          document.getElementById("boxed-layout").checked = true;
          break;
        case "full":
          containerFluid.forEach(function (element) {
            element.classList.add("max-w-full");
          });
          document.documentElement.setAttribute("data-boxed-layout", "full");
          document.getElementById("full-layout").checked = true;
          break;
        default:
      }
    },
    //****************************
    // Card Type
    //****************************
    ManageCardLayout: function () {
      //   document.getElementById("card-without-border").checked = true;
      switch (settings.cardBorder) {
        case "border":
          document.documentElement.setAttribute("data-card", "border");
          document.getElementById("card-with-border").checked = true;
          break;
        case "shadow":
          document.documentElement.setAttribute("data-card", "shadow");
          document.getElementById("card-without-border").checked = true;
          break;
        default:
      }
    },
    //****************************
    // Theme Dark or light
    //****************************

    ManageDarkThemeLayout: function () {
      switch (settings.Theme) {
        case "light":
          document.getElementsByTagName("html")[0].classList.remove("dark");
          setTheme("light", ["light-logo"], ["moon"], ["sun"]);
          break;
        case "dark":
          document.getElementsByTagName("html")[0].classList.add("dark");
          setTheme("dark", ["dark-logo"], ["sun"], ["moon"]);
          break;
        default:
      }

      function setTheme(theme, hideElements, showElements, hideElements2) {
        hideElements.forEach((el) =>
          document
            .querySelectorAll(`.${el}`)
            .forEach((e) => (e.style.display = "none"))
        );
        showElements.forEach((el) =>
          document
            .querySelectorAll(`.${el}`)
            .forEach((e) => (e.style.display = "flex"))
        );
        hideElements2.forEach((el) =>
          document
            .querySelectorAll(`.${el}`)
            .forEach((e) => (e.style.display = "none"))
        );
      }
    },
  };

  // Initialize settings
  AdminSettings.AdminSettingsInit();

  //****************************
  // Handle Click
  //****************************

  document.addEventListener("DOMContentLoaded", function () {
    //****************************
    // Theme Layout Box or Full
    //****************************
    function handleBoxedLayout() {
      const boxedLayout = document.getElementById("boxed-layout");
      const fullLayout = document.getElementById("full-layout");
      const containerFluid = document.querySelectorAll(".container");

      boxedLayout.addEventListener("click", function () {
        containerFluid.forEach(function (element) {
          element.classList.remove("max-w-full");
        });
        this.checked;
        document.documentElement.setAttribute("data-boxed-layout", "boxed");
        localStorage.setItem("BoxedLayout", "boxed");
      });

      fullLayout.addEventListener("click", function () {
        containerFluid.forEach(function (element) {
          element.classList.add("max-w-full");
        });
        this.checked;
        document.documentElement.setAttribute("data-boxed-layout", "full");
        localStorage.setItem("BoxedLayout", "full");
      });
    }
    handleBoxedLayout();

    //****************************
    // Theme Layout Vertical or horizontal
    //****************************
    function handleLayout() {
      const verticalLayout = document.getElementById("vertical-layout");
      const horizontalLayout = document.getElementById("horizontal-layout");

      verticalLayout.addEventListener("click", function () {
        document.documentElement.setAttribute("data-layout", "vertical");
        localStorage.setItem("Layout", "vertical");
        this.checked;
      });

      horizontalLayout.addEventListener("click", function () {
        document.documentElement.setAttribute("data-layout", "horizontal");
        localStorage.setItem("Layout", "horizontal");
        this.checked;
      });
    }
    handleLayout();

    //****************************
    // Theme mode dark or light
    //****************************

    function handleTheme() {
      function setThemeAttributes(
        theme,
        darkDisplay,
        lightDisplay,
        sunDisplay,
        moonDisplay
      ) {
        document.documentElement.setAttribute("data-bs-theme", theme);
        document.getElementById(`${theme}-layout`).checked = true;

        document
          .querySelectorAll(`.${darkDisplay}`)
          .forEach((el) => (el.style.display = "none"));
        document
          .querySelectorAll(`.${lightDisplay}`)
          .forEach((el) => (el.style.display = "flex"));
        document
          .querySelectorAll(`.${sunDisplay}`)
          .forEach((el) => (el.style.display = "none"));
        document
          .querySelectorAll(`.${moonDisplay}`)
          .forEach((el) => (el.style.display = "flex"));
      }

      document.querySelectorAll(".dark-layout").forEach((element) => {
        localStorage.setItem("Theme", "dark");
        element.addEventListener("click", () =>
          setThemeAttributes("dark", "dark-logo", "light-logo", "moon", "sun")
        );
      });

      document.querySelectorAll(".light-layout").forEach((element) => {
        localStorage.setItem("Theme", "light");
        element.addEventListener("click", () =>
          setThemeAttributes("light", "light-logo", "dark-logo", "sun", "moon")
        );
      });
    }
    handleTheme();

    //****************************
    // Theme card with border or shadow
    //****************************
    function handleCardLayout() {
      function setCardAttribute(cardType) {
        localStorage.setItem("cardBorder", cardType);
        document.documentElement.setAttribute("data-card", cardType);
      }

      document
        .getElementById("card-with-border")
        .addEventListener("click", () => setCardAttribute("border"));
      document
        .getElementById("card-without-border")
        .addEventListener("click", () => setCardAttribute("shadow"));
    }
    handleCardLayout();

    //****************************
    // Theme sidebar
    //****************************
    function handleSidebarToggle() {
      function setSidebarType(sidebarType) {
        document.body.setAttribute("data-sidebartype", sidebarType);
        localStorage.setItem("SidebarType", sidebarType);
      }

      document
        .getElementById("full-sidebar")
        .addEventListener("click", () => setSidebarType("full"));

      document
        .getElementById("mini-sidebar")
        .addEventListener("click", () => setSidebarType("mini-sidebar"));
    }
    handleSidebarToggle();

    //****************************
    // Toggle sidebar
    //****************************
    function handleSidebar() {
      document.querySelectorAll(".sidebartoggler").forEach(function (element) {
        element.addEventListener("click", function () {
          document.querySelectorAll(".sidebartoggler").forEach(function (el) {
            el.checked = true;
          });
          document
            .getElementById("main-wrapper")
            .classList.toggle("show-sidebar");
          document.querySelectorAll(".sidebarmenu").forEach(function (el) {
            el.classList.toggle("close");
          });
          var dataTheme = document.body.getAttribute("data-sidebartype");
          if (dataTheme === "full") {
            document.body.setAttribute("data-sidebartype", "mini-sidebar");
          } else {
            document.body.setAttribute("data-sidebartype", "full");
          }
        });
      });
    }

    handleSidebar();
  });
}