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 {
#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;
}
}
}
}

View File

@ -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>