pascaline.grondein/SiteWebAstrolabe
1
0
Fork 0
forked from AstrolabeCAE/SiteWebAstrolabe
Code Pull Requests Activity

menu toggle icon

Browse Source
This commit is contained in:
Yves Gatesoupe 2020-07-17 23:33:46 +02:00
parent 8b4f1f2cd1
commit 6f229920e2
3 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_includes/partials/global/site-head.njk
View File

@ -6,7 +6,11 @@
<span class="visually-hidden">{{ site.name }} - Home</span> <span class="visually-hidden">{{ site.name }} - Home</span>
{% include "../../../images/astrolabe_logo.svg" %} {% include "../../../images/astrolabe_logo.svg" %}
</a> </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' %} {% set ariaLabel = 'navigation' %}
{% include "partials/components/nav.njk" %} {% include "partials/components/nav.njk" %}
</div> </div>

9
src/js/components/menu-toggle.js
View File

@ -1,4 +1,11 @@
function menuToggle() { function menuToggle(elm) {
var menu = document.getElementById('menu'); var menu = document.getElementById('menu');
menu.classList.toggle('show'); 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';
}
} }

20
src/scss/components/_site-head.scss
View File

@ -17,7 +17,7 @@
outline-color: var(--color-secondary); outline-color: var(--color-secondary);
} }
+ button { + .menu-toggle {
display: none; display: none;
} }
} }
@ -39,7 +39,7 @@
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.site-head { .site-head {
padding-top: 2rem; padding-top: 2rem;
&__inner { &__inner {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -48,9 +48,21 @@
&__site-name { &__site-name {
display: inline-block; display: inline-block;
+ button { + .menu-toggle {
display: inline-block; display: inline-flex;
flex-direction: column;
background-color: var(--color-white);
border: 0;
margin-left: auto; margin-left: auto;
padding-right: 0;
#icon-close {
display: none;
}
&:hover {
cursor: pointer;
}
} }
} }
} }