menu toggle icon
This commit is contained in:
parent
8b4f1f2cd1
commit
6f229920e2
@ -6,7 +6,11 @@
|
||||
<span class="visually-hidden">{{ site.name }} - Home</span>
|
||||
{% include "../../../images/astrolabe_logo.svg" %}
|
||||
</a>
|
||||
<button onclick="menuToggle()">menu</button>
|
||||
<button class="menu-toggle" onclick="menuToggle(this)" title="ouvrir / fermer le menu">
|
||||
<svg id="icon-show" aria-hidden="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 10h12M6 16h19m-15 6h15" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<svg id="icon-close" aria-hidden="true" width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25 7L6 24m19 0L6 7" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<span>menu</span>
|
||||
</button>
|
||||
{% set ariaLabel = 'navigation' %}
|
||||
{% include "partials/components/nav.njk" %}
|
||||
</div>
|
||||
|
@ -1,4 +1,11 @@
|
||||
function menuToggle() {
|
||||
function menuToggle(elm) {
|
||||
var menu = document.getElementById('menu');
|
||||
menu.classList.toggle('show');
|
||||
if (menu.classList.contains('show')) {
|
||||
elm.querySelector('#icon-show').style.display = 'none';
|
||||
elm.querySelector('#icon-close').style.display = 'inline';
|
||||
} else {
|
||||
elm.querySelector('#icon-show').style.display = 'inline';
|
||||
elm.querySelector('#icon-close').style.display = 'none';
|
||||
}
|
||||
}
|
@ -17,7 +17,7 @@
|
||||
outline-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
+ button {
|
||||
+ .menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,7 @@
|
||||
@media (max-width: 767.98px) {
|
||||
.site-head {
|
||||
padding-top: 2rem;
|
||||
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -48,9 +48,21 @@
|
||||
&__site-name {
|
||||
display: inline-block;
|
||||
|
||||
+ button {
|
||||
display: inline-block;
|
||||
+ .menu-toggle {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-white);
|
||||
border: 0;
|
||||
margin-left: auto;
|
||||
padding-right: 0;
|
||||
|
||||
#icon-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user