From 258a71e21aaa21573acc3840988b84257e08f8be Mon Sep 17 00:00:00 2001
From: Jimmy <jimmy@cai.im>
Date: Mon, 26 Jan 2026 14:13:16 +0100
Subject: [PATCH] fix: mobile menu glitch on collapsing (#1243)

---
 assets/scss/partials/menu.scss    | 16 ++++++++++++++--
 assets/scss/partials/sidebar.scss | 20 +++++++++++++++++++-
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index 5b6be17..b9cb1f9 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -21,12 +21,15 @@
     margin: 0;
     overflow: visible;
 }
+
 .hamburger:hover {
     opacity: 0.7;
 }
+
 .hamburger.is-active:hover {
     opacity: 0.7;
 }
+
 .hamburger.is-active .hamburger-inner,
 .hamburger.is-active .hamburger-inner::before,
 .hamburger.is-active .hamburger-inner::after {
@@ -58,14 +61,17 @@
     transition-duration: 0.15s;
     transition-timing-function: ease;
 }
+
 .hamburger-inner::before,
 .hamburger-inner::after {
     content: "";
     display: block;
 }
+
 .hamburger-inner::before {
     top: -10px;
 }
+
 .hamburger-inner::after {
     bottom: -10px;
 }
@@ -74,9 +80,11 @@
     transition-duration: 0.22s;
     transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
+
 .hamburger--spin .hamburger-inner::before {
     transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
 }
+
 .hamburger--spin .hamburger-inner::after {
     transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
 }
@@ -86,11 +94,13 @@
     transition-delay: 0.12s;
     transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 }
+
 .hamburger--spin.is-active .hamburger-inner::before {
     top: 0;
     opacity: 0;
     transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
 }
+
 .hamburger--spin.is-active .hamburger-inner::after {
     bottom: 0;
     transform: rotate(-90deg);
@@ -118,6 +128,7 @@
     outline: none;
 
     &.is-active {
+
         .hamburger-inner,
         .hamburger-inner::before,
         .hamburger-inner::after {
@@ -144,7 +155,8 @@
         padding: 15px 0;
     }
 
-    &, .menu-bottom-section ol {
+    &,
+    .menu-bottom-section ol {
         flex-direction: column;
         gap: 30px;
 
@@ -226,4 +238,4 @@
         stroke: var(--body-text-color);
         stroke-width: 1.33;
     }
-}
+}
\ No newline at end of file
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index a2e26ec..c771df9 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -11,7 +11,25 @@
     flex-direction: column;
     flex-shrink: 0;
     align-self: stretch;
-    gap: var(--sidebar-element-separation);
+
+    @include respond(md) {
+        gap: var(--sidebar-element-separation);
+    }
+
+    margin-bottom: calc(-1 * var(--sidebar-element-separation));
+
+    @include respond(md) {
+        margin-bottom: 0;
+    }
+
+    &> :not(:last-child) {
+        margin-bottom: var(--sidebar-element-separation);
+
+        @include respond(md) {
+            margin-bottom: 0;
+        }
+    }
+
     max-width: none;
     width: 100%;
     position: relative;