Esto lo aprendí de un Truco CSS de Álvaro, y viene bastante bien en este caso.
Es posible vincular un checkbox y un label y reemplazar todo ese código JS, aquí un pequeño ejemplo de cómo sería:
<input id="toggle" type="checkbox" class="input">
<label for="toggle" class="button">
</label>
.input {
display: none;
}
.button {
display: block;
width: 100px;
height: 100px;
background: red;
}
.input:checked + .button {
background: yellow
}
Aquí el ejemplo del botón menú en Codepen
Cuando clono el proyecto en mi PC funcionan correctamente los imports del gulpfile, pero cuando trato de hacer un nuevo proyecto con una estructura similar, me sale un error diciendo Syntax Error: Cannot use import statement outside a module
Y me parece que en algún lugar se debe de declarar como módulo a este archivo, pero no lo encuentro. De momento lo solucioné con ES5, pero quiero usar ES6, porque en el EDboilerplate sí funciona.
Solo para aclarar: en el inspector de elementos, en la sección de estilos computados, hay que hacer click en Mostrar todos o Show all para ver todos los estilos, incluidos los que el navegador pone por defecto.