phortuin · May 24, 2023 07:55
diff --git a/_simple-mobile-menu.md b/_simple-mobile-menu.md
diff --git a/menu.js b/menu.js
 (function() {
  const qs = query => document.querySelector(`[data-${query}]`)
  const click = (el, listener) => el.addEventListener('click', listener)
  window.addEventListener('DOMContentLoaded', () => {
    const menu = qs('menu')
    click(qs('menu-button'), () => menu.classList.toggle('xs-hidden'))
  })
 }())
diff --git a/nav.html b/nav.html
 <button class="l-hidden" data-menu-button>
  menu
 </button>

 <nav class="xs-hidden" data-menu>
  <ol>
    <li>
      <a href="/">Home</a>
    </li>
  </ol>
 </nav>
diff --git a/styles.css b/styles.css
 @media (max-width: 767px) {
  .xs-hidden {
    display: none;
  }
 }
 @media (min-width: 768px) {
  .l-hidden {
    display: none;
  }
 }
	@media (max-width: 767px) {
	.xs-hidden {
	display: none;
	}
	}
	@media (min-width: 768px) {
	.l-hidden {
	display: none;
	}
	}