From ed7fd55b59891a9cd38a04199ba914b33ed8276e Mon Sep 17 00:00:00 2001 From: Paul Laros Date: Wed, 12 May 2021 13:54:20 +0200 Subject: [PATCH] refactor sidebar toggle --- src/js/modules/sidebar.js | 54 ++++++++++++++++++++++------------ static/charts-chartjs.html | 4 +-- static/forms-basic-inputs.html | 4 +-- static/icons-feather.html | 4 +-- static/index.html | 19 ++---------- static/maps-google.html | 4 +-- static/pages-blank.html | 4 +-- static/pages-invoice.html | 4 +-- static/pages-profile.html | 4 +-- static/pages-settings.html | 4 +-- static/ui-alerts.html | 4 +-- static/ui-buttons.html | 4 +-- static/ui-cards.html | 4 +-- static/ui-general.html | 4 +-- static/ui-grid.html | 4 +-- static/ui-typography.html | 4 +-- 16 files changed, 66 insertions(+), 63 deletions(-) diff --git a/src/js/modules/sidebar.js b/src/js/modules/sidebar.js index 01ac53c..0253ea3 100644 --- a/src/js/modules/sidebar.js +++ b/src/js/modules/sidebar.js @@ -1,23 +1,39 @@ // Usage: https://github.com/Grsmto/simplebar import SimpleBar from "simplebar"; -document.addEventListener("DOMContentLoaded", () => { - const simpleBarElement = document.getElementsByClassName("js-simplebar")[0]; - - if(simpleBarElement){ - /* Initialize simplebar */ - new SimpleBar(document.getElementsByClassName("js-simplebar")[0]) - - const sidebarElement = document.getElementsByClassName("sidebar")[0]; - const sidebarToggleElement = document.getElementsByClassName("sidebar-toggle")[0]; - - sidebarToggleElement.addEventListener("click", () => { - sidebarElement.classList.toggle("collapsed"); - - sidebarElement.addEventListener("transitionend", () => { - window.dispatchEvent(new Event("resize")); - }); - }); - } +const initialize = () => { + initializeSimplebar(); + initializeSidebarCollapse(); +} -}); \ No newline at end of file +const initializeSimplebar = () => { + const simplebarInstance = new SimpleBar(document.getElementsByClassName("js-simplebar")[0]); + + /* Recalculate simplebar on sidebar dropdown toggle */ + const sidebarDropdowns = document.querySelectorAll(".js-sidebar [data-bs-parent]"); + + sidebarDropdowns.forEach(link => { + link.addEventListener("shown.bs.collapse", () => { + simplebarInstance.recalculate(); + }); + link.addEventListener("hidden.bs.collapse", () => { + simplebarInstance.recalculate(); + }); + }); +} + +const initializeSidebarCollapse = () => { + const sidebarElement = document.getElementsByClassName("js-sidebar")[0]; + const sidebarToggleElement = document.getElementsByClassName("js-sidebar-toggle")[0]; + + sidebarToggleElement.addEventListener("click", () => { + sidebarElement.classList.toggle("collapsed"); + + sidebarElement.addEventListener("transitionend", () => { + window.dispatchEvent(new Event("resize")); + }); + }); +} + +// Wait until page is loaded +document.addEventListener("DOMContentLoaded", () => initialize()); \ No newline at end of file diff --git a/static/charts-chartjs.html b/static/charts-chartjs.html index e0ea669..b043fcf 100644 --- a/static/charts-chartjs.html +++ b/static/charts-chartjs.html @@ -20,7 +20,7 @@
-