From d4f7f39ece2d8feaca963b8bfba331268b28811e Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 22 Oct 2024 10:42:07 +0800
Subject: [PATCH] refactor: simplify sidebar animation

---
 _javascript/modules/components/sidebar.js | 23 +++++++++--------------
 _layouts/default.html                     |  2 +-
 _sass/addon/commons.scss                  | 10 ----------
 3 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/_javascript/modules/components/sidebar.js b/_javascript/modules/components/sidebar.js
index 6b562d84147..aed759ed57d 100644
--- 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
index ea438fe7abb..1590ef62430 100644
--- 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
index 2bf99b85b71..5e8aceaa262 100644
--- 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 --- */