feat: new left sidebar layout (#524)
* feat: more compact menu style * add compact option to sidebar * fix mobile menu style
This commit is contained in:
Jimmy Cai
GitHub
parent
c122e5e9a1
commit
985af924e7
4 changed files with 74 additions and 46 deletions
|
|
@ -134,19 +134,22 @@
|
|||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
font-size: 1.4rem;
|
||||
|
||||
background-color: var(--card-background);
|
||||
padding: 15px 0;
|
||||
|
||||
box-shadow: var(--shadow-l1);
|
||||
display: none;
|
||||
|
||||
margin: 0 calc(var(--container-padding) * -1);
|
||||
|
||||
padding: 30px 30px;
|
||||
@include respond(xl) {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
&,
|
||||
.menu-bottom-section {
|
||||
gap: 15px;
|
||||
gap: 30px;
|
||||
@include respond(xl) {
|
||||
gap: 20px;
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -166,11 +169,10 @@
|
|||
li {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
padding: 10px 30px;
|
||||
padding: 0;
|
||||
|
||||
@include respond(md) {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@
|
|||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
gap: var(--sidebar-element-separation);
|
||||
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
--sidebar-avatar-size: 120px;
|
||||
--sidebar-avatar-size: 100px;
|
||||
--sidebar-element-separation: 20px;
|
||||
--emoji-size: 40px;
|
||||
--emoji-font-size: 20px;
|
||||
|
||||
@include respond(md) {
|
||||
width: auto;
|
||||
|
|
@ -29,13 +29,42 @@
|
|||
}
|
||||
|
||||
@include respond(2xl) {
|
||||
--sidebar-avatar-size: 140px;
|
||||
--sidebar-avatar-size: 120px;
|
||||
--sidebar-element-separation: 25px;
|
||||
--emoji-size: 40px;
|
||||
}
|
||||
|
||||
&.sticky {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.compact {
|
||||
--sidebar-avatar-size: 80px;
|
||||
--emoji-size: 30px;
|
||||
--emoji-font-size: 15px;
|
||||
|
||||
header {
|
||||
@include respond(lg) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.site-meta {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-size: 1.4rem;
|
||||
|
||||
@include respond(2xl) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.site-description {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-sidebar {
|
||||
|
|
@ -69,6 +98,7 @@
|
|||
margin: 0;
|
||||
width: var(--sidebar-avatar-size);
|
||||
height: var(--sidebar-avatar-size);
|
||||
flex-shrink: 0;
|
||||
|
||||
.site-logo {
|
||||
width: 100%;
|
||||
|
|
@ -79,22 +109,16 @@
|
|||
|
||||
.emoji {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
width: var(--emoji-size);
|
||||
height: var(--emoji-size);
|
||||
line-height: var(--emoji-size);
|
||||
border-radius: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-size: var(--emoji-font-size);
|
||||
background-color: var(--card-background);
|
||||
box-shadow: var(--shadow-l2);
|
||||
|
||||
@include respond(2xl) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -102,15 +126,16 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
color: var(--accent-color);
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.6rem;
|
||||
|
||||
@include respond(2xl) {
|
||||
font-size: 2rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -118,10 +143,10 @@
|
|||
color: var(--body-text-color);
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.4rem;
|
||||
|
||||
@include respond(2xl) {
|
||||
font-size: 1.8rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ params:
|
|||
lastUpdated: Jan 02, 2006 15:04 MST
|
||||
|
||||
sidebar:
|
||||
compact: false
|
||||
emoji:
|
||||
subtitle:
|
||||
avatar:
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<aside class="sidebar left-sidebar sticky">
|
||||
<aside class="sidebar left-sidebar sticky {{ if .Site.Params.sidebar.compact }}compact{{ end }}">
|
||||
<button class="hamburger hamburger--spin" type="button" id="toggle-menu" aria-label="{{ T `toggleMenu` }}">
|
||||
<span class="hamburger-box">
|
||||
<span class="hamburger-inner"></span>
|
||||
|
|
@ -35,27 +35,27 @@
|
|||
<h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
|
||||
<h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
|
||||
</div>
|
||||
|
||||
{{- with .Site.Menus.social -}}
|
||||
<ol class="social-menu">
|
||||
{{ range . }}
|
||||
<li>
|
||||
<a
|
||||
href='{{ .URL }}'
|
||||
{{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
|
||||
{{ with .Name }}title="{{ . }}"{{ end }}
|
||||
>
|
||||
{{ $icon := default "link" .Params.Icon }}
|
||||
{{ with $icon }}
|
||||
{{ partial "helper/icon" . }}
|
||||
{{ end }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ol>
|
||||
{{- end -}}
|
||||
</header>
|
||||
|
||||
{{- with .Site.Menus.social -}}
|
||||
<ol class="social-menu">
|
||||
{{ range . }}
|
||||
<li>
|
||||
<a
|
||||
href='{{ .URL }}'
|
||||
{{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
|
||||
{{ with .Name }}title="{{ . }}"{{ end }}
|
||||
>
|
||||
{{ $icon := default "link" .Params.Icon }}
|
||||
{{ with $icon }}
|
||||
{{ partial "helper/icon" . }}
|
||||
{{ end }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ol>
|
||||
{{- end -}}
|
||||
|
||||
<ol class="menu" id="main-menu">
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue