From 385602d4821de0940212ef33e28f498f21dd7240 Mon Sep 17 00:00:00 2001
From: Jiahao Li <42709836+TheJiahao@users.noreply.github.com>
Date: Wed, 6 Mar 2024 19:46:34 +0200
Subject: [PATCH] fix(sidebar): Bottom section not showing in mobile

---
 assets/scss/partials/menu.scss     | 18 +++++++----
 layouts/partials/sidebar/left.html | 52 ++++++++++++++++--------------
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index 281dc3a..9733fc9 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -127,7 +127,7 @@
 }
 
 /* Menu style */
-.menu {
+#main-menu {
     padding-left: 0;
     list-style: none;
     flex-direction: column;
@@ -200,13 +200,17 @@
                 font-weight: bold;
             }
         }
-    }
 
-    .menu-bottom-section {
-        margin-top: auto;
-        display: flex;
-        flex-direction: column;
-        width: 100%;
+        .menu-bottom-section {
+            margin-top: auto;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+
+            ol {
+                padding-left: 0;
+            }
+        }
     }
 }
 
diff --git a/layouts/partials/sidebar/left.html b/layouts/partials/sidebar/left.html
index 3aed883..1fdc02c 100644
--- a/layouts/partials/sidebar/left.html
+++ b/layouts/partials/sidebar/left.html
@@ -74,30 +74,32 @@
             </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>
-                {{ end }}
-            {{ end }}
+        <li>
+            <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>
+                        {{ 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>
+                    {{ 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>
+        </li>
+    </ol>
 </aside>