mirror of
https://github.com/Snigdha-OS/Snigdha-OS.github.io.git
synced 2025-09-06 20:55:18 +02:00
65 lines
2.1 KiB
Plaintext
65 lines
2.1 KiB
Plaintext
<button class="responsive-toggle" aria-expanded="false" aria-label="Open menu navigation">
|
|
<svg width="26" height="21" aria-hidden="true" fill="var(--action-color)" xmlns="http://www.w3.org/2000/svg"
|
|
><path
|
|
d="M2 1.667h24m-24 8h24m-24 8h24"
|
|
stroke="var(--action-color)"
|
|
stroke-width="2.667"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"></path></svg
|
|
>
|
|
</button>
|
|
|
|
<script>
|
|
document.addEventListener('astro:page-load', () => {
|
|
// variables
|
|
const responsiveToggle = document.querySelector('.responsive-toggle')
|
|
|
|
// functions
|
|
const openMenu = (toggle) => {
|
|
toggle.setAttribute('aria-expanded', true)
|
|
toggle.setAttribute('aria-label', 'Close menu navigation')
|
|
toggle.innerHTML = `<svg width="20" height="20" aria-hidden="true" fill="var(--action-color)" xmlns="http://www.w3.org/2000/svg"><path d="M10 10 2 2m8 8 8 8m-8-8 8-8m-8 8-8 8" stroke="var(--action-color)" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/></svg>`
|
|
}
|
|
|
|
const closeMenu = (toggle) => {
|
|
toggle.setAttribute('aria-expanded', false)
|
|
toggle.setAttribute('aria-label', 'Open menu navigation')
|
|
toggle.innerHTML = `<svg width="26" height="21" aria-hidden="true" fill="var(--action-color)" xmlns="http://www.w3.org/2000/svg"><path d="M2 1.667h24m-24 8h24m-24 8h24" stroke="var(--action-color)" stroke-width="2.667" stroke-linecap="round" stroke-linejoin="round"/></svg>`
|
|
}
|
|
|
|
// execution
|
|
responsiveToggle.addEventListener('click', (_) => {
|
|
const mobileNavigation = document.querySelector('.mobile-menu')
|
|
|
|
mobileNavigation.classList.toggle('show')
|
|
mobileNavigation.classList.contains('show') ? openMenu(responsiveToggle) : closeMenu(responsiveToggle)
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use '../assets/scss/base/breakpoint' as *;
|
|
@use '../assets/scss/base/outline' as *;
|
|
|
|
.responsive-toggle {
|
|
display: none;
|
|
padding: 0;
|
|
margin-top: 6px;
|
|
border: none;
|
|
|
|
svg {
|
|
width: 30px;
|
|
|
|
path {
|
|
transition: fill 0.2s ease-in-out;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
svg path {
|
|
fill: var(--primary-400);
|
|
}
|
|
}
|
|
}
|
|
</style>
|