From 6c7d42d45a0ca79f1047270d61cd46ab7b81f60e Mon Sep 17 00:00:00 2001
From: Jiahao Li <42709836+TheJiahao@users.noreply.github.com>
Date: Sun, 10 Mar 2024 23:56:30 +0200
Subject: [PATCH] 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     | 24 ++++++++-------
 layouts/partials/sidebar/left.html | 48 +++++++++++++++---------------
 2 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index 281dc3a..19476ac 100644
--- a/assets/scss/partials/menu.scss
+++ b/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 {
-        margin-top: auto;
-        display: flex;
-        flex-direction: column;
-        width: 100%;
+        &.menu-bottom-section {
+            margin-top: auto;
+
+            ol {
+                display: flex;
+                padding-left: 0;
+            }
+        }
     }
 }
 
diff --git a/layouts/partials/sidebar/left.html b/layouts/partials/sidebar/left.html
index 3aed883..e390a9f 100644
--- a/layouts/partials/sidebar/left.html
+++ b/layouts/partials/sidebar/left.html
@@ -74,30 +74,30 @@
             </a>
         </li>
         {{ end }}
-    </ol>
-    <div class="menu-bottom-section">
-        <ol class="menu">
-            {{- $currentLanguageCode := .Language.Lang -}}
-            {{ if ( compare.Gt .Site.Home.AllTranslations.Len 1 ) }}
-                {{ with .Site.Home.AllTranslations }}
-                    <li id="i18n-switch">  
-                        {{ partial "helper/icon" "language" }}
-                        <select name="language" title="language" onchange="window.location.href = this.selectedOptions[0].value">
-                            {{ range . }}
-                                <option value="{{ .Permalink }}" {{ if eq .Language.Lang $currentLanguageCode }}selected{{ end }}>{{ .Language.LanguageName }}</option>
-                            {{ end }}
-                        </select>
+        <li class="menu-bottom-section">
+            <ol class="menu">
+                {{- $currentLanguageCode := .Language.Lang -}}
+                {{ if ( compare.Gt .Site.Home.AllTranslations.Len 1 ) }}
+                    {{ with .Site.Home.AllTranslations }}
+                        <li id="i18n-switch">  
+                            {{ partial "helper/icon" "language" }}
+                            <select name="language" title="language" onchange="window.location.href = this.selectedOptions[0].value">
+                                {{ range . }}
+                                    <option value="{{ .Permalink }}" {{ if eq .Language.Lang $currentLanguageCode }}selected{{ end }}>{{ .Language.LanguageName }}</option>
+                                {{ end }}
+                            </select>
+                        </li>
+                    {{ end }}
+                {{ end }}
+
+                {{ if (default false .Site.Params.colorScheme.toggle) }}
+                    <li id="dark-mode-toggle">
+                        {{ partial "helper/icon" "toggle-left" }}
+                        {{ partial "helper/icon" "toggle-right" }}
+                        <span>{{ T "darkMode" }}</span>
                     </li>
                 {{ end }}
-            {{ end }}
-
-            {{ if (default false .Site.Params.colorScheme.toggle) }}
-                <li id="dark-mode-toggle">
-                    {{ partial "helper/icon" "toggle-left" }}
-                    {{ partial "helper/icon" "toggle-right" }}
-                    <span>{{ T "darkMode" }}</span>
-                </li>
-            {{ end }}
-        </ol>
-    </div>
+            </ol>
+        </li>
+    </ol>
 </aside>