feat: add spring animation for mobile sidebar toggle

Author: WangSimiao2000

_javascript/modules/layouts/sidebar.js

@@ -10,7 +10,7 @@ class SidebarUtil {
     this.#isExpanded = !this.#isExpanded;
     document.body.toggleAttribute(ATTR_DISPLAY, this.#isExpanded);
     $sidebar.classList.toggle('z-2', this.#isExpanded);
-    $mask.classList.toggle('d-none', !this.#isExpanded);
+    $mask.classList.toggle('show', this.#isExpanded);
   }
 }
 

_layouts/default.html

@@ -68,7 +68,7 @@
       </aside>
     </div>
 
-    <div id="mask" class="d-none position-fixed w-100 h-100 z-1"></div>
+    <div id="mask" class="position-fixed w-100 h-100 z-1"></div>
 
     {% if site.pwa.enabled %}
       {% include_cached notification.html lang=lang %}

_sass/base/_base.scss

@@ -450,6 +450,14 @@ mjx-container {
 
 #mask {
   inset: 0 0 0 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s v.$ease-spring-soft;
+
+  &.show {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 #main-wrapper {

_sass/layout/_sidebar.scss

@@ -28,13 +28,13 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
   }
 
   @include bp.lt(bp.get(lg)) {
-    @include mx.slide;
-
     transform: translateX(-#{v.$sidebar-width}); /* hide */
     -webkit-transform: translateX(-#{v.$sidebar-width});
+    transition: transform 0.45s v.$ease-spring;
 
     [#{$sidebar-display}] & {
       transform: translateX(0);
+      transition: transform 0.5s v.$ease-spring;
     }
   }