fix(sidebar): Bottom section not showing in mobile

This commit is contained in:
Jiahao Li 2024-03-06 19:46:34 +02:00 committed by Jimmy Cai
parent 2cda779706
commit 385602d482
2 changed files with 38 additions and 32 deletions

View File

@ -127,7 +127,7 @@
} }
/* Menu style */ /* Menu style */
.menu { #main-menu {
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
flex-direction: column; flex-direction: column;
@ -200,13 +200,17 @@
font-weight: bold; font-weight: bold;
} }
} }
}
.menu-bottom-section { .menu-bottom-section {
margin-top: auto; margin-top: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
ol {
padding-left: 0;
}
}
} }
} }

View File

@ -74,30 +74,32 @@
</a> </a>
</li> </li>
{{ end }} {{ end }}
</ol> <li>
<div class="menu-bottom-section"> <div class="menu-bottom-section">
<ol class="menu"> <ol class="menu">
{{- $currentLanguageCode := .Language.Lang -}} {{- $currentLanguageCode := .Language.Lang -}}
{{ if ( compare.Gt .Site.Home.AllTranslations.Len 1 ) }} {{ if ( compare.Gt .Site.Home.AllTranslations.Len 1 ) }}
{{ with .Site.Home.AllTranslations }} {{ with .Site.Home.AllTranslations }}
<li id="i18n-switch"> <li id="i18n-switch">
{{ partial "helper/icon" "language" }} {{ partial "helper/icon" "language" }}
<select name="language" title="language" onchange="window.location.href = this.selectedOptions[0].value"> <select name="language" title="language" onchange="window.location.href = this.selectedOptions[0].value">
{{ range . }} {{ range . }}
<option value="{{ .Permalink }}" {{ if eq .Language.Lang $currentLanguageCode }}selected{{ end }}>{{ .Language.LanguageName }}</option> <option value="{{ .Permalink }}" {{ if eq .Language.Lang $currentLanguageCode }}selected{{ end }}>{{ .Language.LanguageName }}</option>
{{ end }} {{ end }}
</select> </select>
</li> </li>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ if (default false .Site.Params.colorScheme.toggle) }} {{ if (default false .Site.Params.colorScheme.toggle) }}
<li id="dark-mode-toggle"> <li id="dark-mode-toggle">
{{ partial "helper/icon" "toggle-left" }} {{ partial "helper/icon" "toggle-left" }}
{{ partial "helper/icon" "toggle-right" }} {{ partial "helper/icon" "toggle-right" }}
<span>{{ T "darkMode" }}</span> <span>{{ T "darkMode" }}</span>
</li> </li>
{{ end }} {{ end }}
</ol> </ol>
</div> </div>
</li>
</ol>
</aside> </aside>