iger
/
www.iger.events
9
1
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

Add toggleable main menu

This commit is contained in:
Luca 2022-07-02 01:26:23 +02:00
parent dcfe146f99
commit f1495830da
2 changed files with 79 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
assets/style.scss
View File

@ -26,8 +26,19 @@ header, footer {
}
header {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 0.5rem;
pre {
font-family: monospace;
font-size: 0.8rem;
line-height: 1;
user-select: none;
}
nav {
font-size: 1.2rem;
}
@ -54,15 +65,32 @@ nav {
display: flex;
flex-direction: column;
:not(:first-child) {
margin: 0.5rem 0 0 0;
&.nav-toggleable {
flex-basis: 100%;
max-height: 0;
overflow-y: hidden;
transition: max-height 0.5s;
.nav-toggle:checked ~ & {
max-height: calc(var(--num-elements) * 2em);
}
}
a {
line-height: 1.5em;
margin: 0.5em 0 0 0;
}
@media screen and (min-width: $small) {
flex-direction: row;
:not(:first-child) {
margin: 0 0 0 1rem;
&.nav-toggleable {
flex-basis: auto;
max-height: max-content;
}
a {
margin: 0 0 0 1em;
}
}
}
@ -91,3 +119,39 @@ a {
p + p {
margin-top: 0.5rem;
}
.nav-burger {
cursor: pointer;
display: flex;
flex-direction: column;
height: 1rem;
justify-content: space-between;
width: 1.2rem;
div {
border: 1px solid #aaa;
transition: border-color 0.5s, transform 0.5s;
}
.nav-toggle:checked ~ & div {
border-color: transparent;
&:first-child {
border-color: #aaa;
transform: translateY(0.5rem) translateY(-1px) rotate(45deg) scaleX(141%);
}
&:last-child {
border-color: #aaa;
transform: translateY(-0.5rem) translateY(1px) rotate(-45deg) scaleX(141%);
}
}
@media screen and (min-width: $small) {
display: none;
}
}
.nav-toggle {
display: none;
}

12
layouts/_default/baseof.html
View File

@ -11,7 +11,17 @@
</head>
<body>
<header>
<nav>
<pre>TEST
LOGO
PLS
IGNR</pre>
<input class="nav-toggle" id="toggleMainNav" type="checkbox">
<label class="nav-burger" for="toggleMainNav">
<div></div>
<div></div>
<div></div>
</label>
<nav class="nav-toggleable" style="--num-elements: {{ len .Site.Menus.main }}">
{{ range .Site.Menus.main }}
<a{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} class="is-active"{{ end }} href="{{ .URL }}"{{ if hasPrefix .URL "https://" }} target="_blank"{{ end }}>{{ .Name }}</a>
{{ end }}