<button class="hamburger btn" type="button">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='hamburger__icon hamburger__close'
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<svg
class='hamburger__icon hamburger__open'
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
</button>
<button class="hamburger btn" type="button">
{{> @icon icon=closeIcon class="hamburger__icon hamburger__close"}}
{{> @icon icon=openIcon class="hamburger__icon hamburger__open"}}
</button>
{
"openIcon": "<path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\"/>",
"closeIcon": "<path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>"
}
const hamburger = document.getElementsByClassName('hamburger')
hamburger[0].addEventListener('click', function() {
console.log('Burger click')
document.body.classList.toggle('menu--is-visible')
this.classList.toggle('hamburger--is-open')
}, false)
const hamburger = document.getElementsByClassName('hamburger')
hamburger[0].addEventListener('click', function() {
console.log('Burger click')
document.body.classList.toggle('menu--is-visible')
this.classList.toggle('hamburger--is-open')
}, false)
The Hamburger controls the visibility of the main navigation for a view on a small screen.