fix(sidebar): menu-bottom-section not showing in mobile (#966)

* fix(sidebar): Bottom section not showing in mobile

* fix(sidebar): Align bottom section to bottom

* fix(sidebar): Gap missing in bottom section

* refactor(sidebar): Simplify styles

* refactor(sidebar): Remove useless padding-left

* refactor(sidebar): Remove useless margin-top

* refactor(sidebar): Combine duplicate flex-direction

* refactor(sidebar): Remove redundant width

assets/scss/partials/menu.scss

@@ -127,10 +127,8 @@
 }
 
 /* Menu style */
-.menu {
-    padding-left: 0;
+#main-menu {
     list-style: none;
-    flex-direction: column;
     overflow-y: auto;
     flex-grow: 1;
     font-size: 1.4rem;
@@ -141,13 +139,15 @@
     margin: 0 calc(var(--container-padding) * -1);
 
     padding: 30px 30px;
+
     @include respond(xl) {
         padding: 15px 0;
     }
 
-    &,
-    .menu-bottom-section {
+    &, .menu-bottom-section ol {
+        flex-direction: column;
         gap: 30px;
+
         @include respond(xl) {
             gap: 25px;
         }
@@ -200,13 +200,15 @@
                 font-weight: bold;
             }
         }
-    }
 
-    .menu-bottom-section {
+        &.menu-bottom-section {
             margin-top: auto;
+
+            ol {
                 display: flex;
-        flex-direction: column;
-        width: 100%;
+                padding-left: 0;
+            }
+        }
     }
 }
 

layouts/partials/sidebar/left.html

@@ -74,8 +74,7 @@
             </a>
         </li>
         {{ end }}
-    </ol>
-    <div class="menu-bottom-section">
+        <li class="menu-bottom-section">
             <ol class="menu">
                 {{- $currentLanguageCode := .Language.Lang -}}
                 {{ if ( compare.Gt .Site.Home.AllTranslations.Len 1 ) }}
@@ -99,5 +98,6 @@
                     </li>
                 {{ end }}
             </ol>
-    </div>
+        </li>
+    </ol>
 </aside>