refactor: simplify sidebar animation

cotes2020 · Oct 22, 2024 · d4f7f39 · d4f7f39
1 parent c1bd9eb
commit d4f7f39
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 25 deletions.
diff --git a/_javascript/modules/components/sidebar.js b/_javascript/modules/components/sidebar.js
@@ -2,26 +2,21 @@
  * Expand or close the sidebar in mobile screens.
  */
 
-const ATTR_DISPLAY = 'sidebar-display';
+const $sidebar = document.getElementById('sidebar');
+const $trigger = document.getElementById('sidebar-trigger');
+const $mask = document.getElementById('mask');
 
 class SidebarUtil {
-  static isExpanded = false;
+  static #isExpanded = false;
 
   static toggle() {
-    if (SidebarUtil.isExpanded === false) {
-      document.body.setAttribute(ATTR_DISPLAY, '');
-    } else {
-      document.body.removeAttribute(ATTR_DISPLAY);
-    }
-
-    SidebarUtil.isExpanded = !SidebarUtil.isExpanded;
+    this.#isExpanded = !this.#isExpanded;
+    document.body.toggleAttribute('sidebar-display', this.#isExpanded);
+    $sidebar.classList.toggle('z-2', this.#isExpanded);
+    $mask.classList.toggle('d-none', !this.#isExpanded);
   }
 }
 
 export function sidebarExpand() {
-  document
-    .getElementById('sidebar-trigger')
-    .addEventListener('click', SidebarUtil.toggle);
-
-  document.getElementById('mask').addEventListener('click', SidebarUtil.toggle);
+  $trigger.onclick = $mask.onclick = () => SidebarUtil.toggle();
 }
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -68,7 +68,7 @@
       </aside>
     </div>
 
-    <div id="mask"></div>
+    <div id="mask" class="d-none position-fixed w-100 h-100 z-1"></div>
 
     {% if site.pwa.enabled %}
       {% include_cached notification.html lang=lang %}

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
@@ -688,7 +688,6 @@ $btn-mb: 0.5rem;
   height: 100%;
   overflow-y: auto;
   width: $sidebar-width;
-  z-index: 99;
   background: var(--sidebar-bg);
   border-right: 1px solid var(--sidebar-border-color);
 
@@ -1091,16 +1090,7 @@ search {
 }
 
 #mask {
-  display: none;
-  position: fixed;
   inset: 0 0 0 0;
-  height: 100%;
-  width: 100%;
-  z-index: 1;
-
-  @at-root [#{$sidebar-display}] & {
-    display: block !important;
-  }
 }
 
 /* --- basic wrappers --- */