fix: mobile menu glitch on collapsing (#1243)

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;
 

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;