troldspejlet/hugo-theme-stack
troldspejlet/hugo-theme-stack
1
0
Fork 0
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2024-11-23 10:21:46 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
This commit is contained in:
Jiahao Li 2024-03-10 23:56:30 +02:00 committed by GitHub
parent 2cda779706
commit 6c7d42d45a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 37 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/scss/partials/menu.scss
View file

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

48
layouts/partials/sidebar/left.html
View file

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