<h1>Navigation Demo</h1>

<nav id="mainnav">
  <ul>
    <li>
       <a href="/home">Home</a>
    </li>
    <li>
      <a href="/about-us" aria-current="page">About us</a>
    </li>
    <li>
      <a href="/pricing">Pricing</a>
    </li>
    <li>
      <a href="/contact">Contact</a>
    </li>
  </ul>
</nav>

<template id="burger-template">
  <button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
    <svg width="24" height="24" aria-hidden="true">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
    </svg>
  </button>
</template>

/* Define variables for your colors */
:root {
  --color-shades-dark: rgb(25, 25, 25);
  --color-shades-light: rgb(165, 167, 175);
  --color-highlight: rgb(24, 54, 145);
}

/* Use the alternative box model */
* { 
  box-sizing: border-box;
}

body {
  font-family: Segoe UI,system-ui,-apple-system,sans-serif;
  font-size: 1.6rem;
}

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
  }
}

/* Remove default list styling and create layout for list */
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Basic link styling */
a {
  --text-color: var(--color-shades-dark);
  
  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  padding: 0.1rem;
  text-decoration: none;
}

/* Change the border-color on :hover and :focus */
a:where(:hover, :focus) {
  --border-color: var(--text-color);
}

/* Change border-color and color for the active page */
[aria-current="page"] {
  --border-color: var(--color-highlight);
  --text-color: var(--color-highlight);
}

/* Reset button styling */
button {
  all: unset;
  display: var(--nav-button-display, flex);
}

const nav = document.querySelector('nav')
const list = nav.querySelector('ul');
const burgerClone = document.querySelector('#burger-template').content.cloneNode(true);

const button = burgerClone.querySelector('button');
button.addEventListener('click', e => {
  const isOpen = button.getAttribute('aria-expanded') === "false"

  button.setAttribute('aria-expanded', isOpen);
});

nav.addEventListener('keyup', e => {
  if (e.code === 'Escape') {
    button.setAttribute('aria-expanded', false);
    button.focus()
  }
});

nav.insertBefore(burgerClone, list);