diff --git a/package-lock.json b/package-lock.json index 90ad55d3..62d55ee5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "coryd.dev", - "version": "19.5.7", + "version": "19.5.9", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "coryd.dev", - "version": "19.5.7", + "version": "19.5.9", "license": "MIT", "dependencies": { "@cdransf/api-text": "^1.4.0", @@ -532,9 +532,9 @@ "peer": true }, "node_modules/@types/node": { - "version": "20.14.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.5.tgz", - "integrity": "sha512-aoRR+fJkZT2l0aGOJhuA8frnCSoNX6W7U2mpNq63+BxBIj5BQFt8rHy627kijCmm63ijdSdwvGgpUsU6MBsZZA==", + "version": "20.14.6", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.6.tgz", + "integrity": "sha512-JbA0XIJPL1IiNnU7PFxDXyfAwcwVVrOoqyzzyQTyMeVhBzkJVMSkC1LlVsRQ2lpqiY4n6Bb9oCS6lzDKVQxbZw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index a2332b65..00154541 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "19.5.8", + "version": "19.5.9", "description": "The source for my personal site. Built using 11ty.", "type": "module", "scripts": { diff --git a/src/assets/scripts/menu.js b/src/assets/scripts/menu.js index d3aa1ab0..4cc9ba03 100644 --- a/src/assets/scripts/menu.js +++ b/src/assets/scripts/menu.js @@ -5,28 +5,23 @@ window.addEventListener('load', () => { const menuItems = document.querySelectorAll('.menu-primary li[role="menu-item"]') const isMobile = () => window.innerWidth <= 768 - const updateTabIndex = () => { + const udpateMenuState = () => { const isExpanded = menuInput.checked menuButtonContainer.setAttribute('aria-expanded', isExpanded) - menuItems.forEach(item => { - const link = item.querySelector('a') - if (link) link.setAttribute('tabindex', isMobile() && !isExpanded ? '-1' : '0') - }) - if(isExpanded) menuLabelText.textContent = 'Close mobile menu' if (!isExpanded) menuLabelText.textContent = 'Open mobile menu' } - updateTabIndex() + udpateMenuState() - menuInput.addEventListener('change', updateTabIndex) + menuInput.addEventListener('change', udpateMenuState) menuButtonContainer.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() menuInput.checked = !menuInput.checked - updateTabIndex() + udpateMenuState() } }) @@ -42,7 +37,7 @@ window.addEventListener('load', () => { document.addEventListener('keydown', e => { if (e.key === 'Escape' && isMobile() && menuInput.checked) { menuInput.checked = false - updateTabIndex() + udpateMenuState() } }) }) \ No newline at end of file diff --git a/src/assets/styles/components/menu.css b/src/assets/styles/components/menu.css index e237afc0..60e3d4ac 100644 --- a/src/assets/styles/components/menu.css +++ b/src/assets/styles/components/menu.css @@ -51,22 +51,26 @@ #menu-toggle { display: none; -} -#menu-toggle:checked + .menu-button-container .menu-closed { - display: none; -} + &:checked + .menu-button-container { + & .menu-closed { + display: none; + } -#menu-toggle:checked + .menu-button-container .menu-open { - display: block; -} + & .menu-open { + display: block; + } + } -#menu-toggle:not(:checked) + .menu-button-container .menu-closed { - display: block; -} + &:not(:checked) + .menu-button-container { + & .menu-closed { + display: block; + } -#menu-toggle:not(:checked) + .menu-button-container .menu-open { - display: none; + & .menu-open { + display: none; + } + } } a[role="menu-item"]:focus {