fix: aria attribute for mobile menu
This commit is contained in:
parent
c84e5e4fe6
commit
0615394bcf
|
@ -148,6 +148,12 @@
|
|||
</footer>
|
||||
|
||||
<script>
|
||||
function toggleMenu($target) {
|
||||
$target.classList.toggle('hidden');
|
||||
const expanded = $target.getAttribute('aria-expanded')
|
||||
$target.setAttribute('aria-expanded', expanded === 'false' ? 'true' : 'false')
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const $navbarBurgers = Array.prototype.slice.call(
|
||||
document.querySelectorAll('.navbar-burger'),
|
||||
|
@ -158,10 +164,10 @@
|
|||
const target = $el.dataset.target;
|
||||
const $target = document.getElementById(target);
|
||||
$el.addEventListener('click', function () {
|
||||
$target.classList.toggle('hidden');
|
||||
toggleMenu($target)
|
||||
});
|
||||
$target.addEventListener('click', (el) => {
|
||||
$target.classList.toggle('hidden');
|
||||
toggleMenu($target)
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -7,11 +7,10 @@
|
|||
class="my-2 ml-2 h-10 lg:ml-0"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
<button
|
||||
class="navbar-burger block cursor-pointer p-3 pr-4 text-white lg:hidden"
|
||||
data-target="navMenu"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
aria-label="Open Menu"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
@ -27,7 +26,7 @@
|
|||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</button>
|
||||
<div class="hidden font-title font-semibold text-white lg:flex">
|
||||
{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
|
||||
<a
|
||||
|
@ -43,7 +42,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div class="fixed top-0 bottom-0 left-0 right-0 hidden bg-black bg-opacity-50" id="navMenu">
|
||||
<div class="fixed top-0 bottom-0 left-0 right-0 hidden bg-black bg-opacity-50" id="navMenu" aria-expanded="false">
|
||||
<div class="fixed flex h-screen w-3/4 flex-col bg-gray-100 font-title font-semibold">
|
||||
{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
|
||||
<a
|
||||
|
|
Loading…
Reference in New Issue