Make main menu mobile-compatible

This commit is contained in:
Alice Gaudon 2020-07-06 11:36:37 +02:00
parent 2c649d2030
commit 4ca381a405
3 changed files with 62 additions and 19 deletions

View File

@ -25,3 +25,6 @@ $warningColor: desaturate($warningText, 50%);
$error: #ff0000;
$errorText: darken($error, 30%);
$errorColor: desaturate($errorText, 50%);
// Responsivity
$menuLayoutSwitchTreshold: 700px;

View File

@ -51,7 +51,8 @@ header {
}
}
nav ul {
nav {
ul {
display: flex;
flex-direction: row;
margin: 0;
@ -80,6 +81,44 @@ header {
}
}
}
.hamburger {
display: none;
}
}
@media (max-width: $menuLayoutSwitchTreshold) {
flex-direction: row-reverse;
nav {
flex: 1;
.hamburger {
display: block;
padding: 0 16px;
cursor: pointer;
width: max-content;
&:hover {
width: auto;
}
}
ul {
flex-direction: column;
position: absolute;
left: 0;
transform: translateX(-100%);
transition: transform ease-out 150ms;
background-color: $headerBackground;
}
.hamburger:hover + ul, ul:hover {
transform: translateX(0%);
}
}
}
}
footer {

View File

@ -14,6 +14,7 @@
{% block header %}
<a href="/" class="logo"><img src="/img/logo.svg" alt="Logo"> {{ app.name }}</a>
<nav>
<div class="hamburger"><i data-feather="menu"></i></div>
<ul>
<li><a href="{{ route('about') }}"><i data-feather="info"></i> About</a></li>
</ul>