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

View file

@ -127,10 +127,8 @@
} }
/* Menu style */ /* Menu style */
.menu { #main-menu {
padding-left: 0;
list-style: none; list-style: none;
flex-direction: column;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex-grow: 1;
font-size: 1.4rem; font-size: 1.4rem;
@ -141,13 +139,15 @@
margin: 0 calc(var(--container-padding) * -1); margin: 0 calc(var(--container-padding) * -1);
padding: 30px 30px; padding: 30px 30px;
@include respond(xl) { @include respond(xl) {
padding: 15px 0; padding: 15px 0;
} }
&, &, .menu-bottom-section ol {
.menu-bottom-section { flex-direction: column;
gap: 30px; gap: 30px;
@include respond(xl) { @include respond(xl) {
gap: 25px; gap: 25px;
} }
@ -200,13 +200,15 @@
font-weight: bold; font-weight: bold;
} }
} }
}
.menu-bottom-section { &.menu-bottom-section {
margin-top: auto; margin-top: auto;
ol {
display: flex; display: flex;
flex-direction: column; padding-left: 0;
width: 100%; }
}
} }
} }

View file

@ -74,8 +74,7 @@
</a> </a>
</li> </li>
{{ end }} {{ end }}
</ol> <li 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 ) }}
@ -99,5 +98,6 @@
</li> </li>
{{ end }} {{ end }}
</ol> </ol>
</div> </li>
</ol>
</aside> </aside>