Menu toggle for mobile view
This commit is contained in:
parent
049d6b3352
commit
74169b3ab9
@ -18,7 +18,7 @@
|
|||||||
{% include "partials/global/site-foot.njk" %}
|
{% include "partials/global/site-foot.njk" %}
|
||||||
{% block foot %}
|
{% block foot %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{# <script type="module" src="/js/components/theme-toggle.js" async defer></script> #}
|
<script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script>
|
||||||
<script>
|
<script>
|
||||||
if ('serviceWorker' in navigator) {
|
if ('serviceWorker' in navigator) {
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener('load', () => {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
{% if navigation.items %}
|
{% if navigation.items %}
|
||||||
<nav class="nav" aria-label="{{ariaLabel}}">
|
<nav id="menu" class="nav" aria-label="{{ariaLabel}}">
|
||||||
<ul class="[ nav__list ]">
|
<ul class="[ nav__list ]">
|
||||||
{% for item in navigation.items %}
|
{% for item in navigation.items %}
|
||||||
{% set relAttribute = '' %}
|
{% set relAttribute = '' %}
|
||||||
|
@ -6,6 +6,7 @@
|
|||||||
<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>
|
||||||
{% set ariaLabel = 'navigation' %}
|
{% set ariaLabel = 'navigation' %}
|
||||||
{% include "partials/components/nav.njk" %}
|
{% include "partials/components/nav.njk" %}
|
||||||
</div>
|
</div>
|
||||||
|
4
src/js/components/menu-toggle.js
Normal file
4
src/js/components/menu-toggle.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
function menuToggle() {
|
||||||
|
var menu = document.getElementById('menu');
|
||||||
|
menu.classList.toggle('show');
|
||||||
|
}
|
@ -47,3 +47,24 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767.98px) {
|
||||||
|
.nav {
|
||||||
|
display: none;
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
> * + * {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user