<header>
  <nav id="main-nav">
    <a class="logo" href="/">
      <img src="https://placekitten.com/g/200/100" alt="Our professional logo (ideally an svg!)" />
    </a>
    <div class="dropdown-link-container">
      <a href="/about">About Us</a>
      <a href="/work">Our Work</a>
      <a href="/work">Contact Us</a>
    </div>
    <button class="mobile-dropdown-toggle" aria-hidden="true">
      Menu
    </button>
  </nav>
</header>

/* Yes, we wrapped our nav in a header tag.
This allows us to add a background to the nav bar without 
cutting off on our max-width property.
To see what I mean, try moving this background to the nav element
*/
header {
  background: lightblue;
}

nav {
  max-width: 1200px;
  display: flex;
  align-items: center;
  margin: auto;
}

.logo {
  margin-right: auto;
}

.dropdown-link-container > a {
  margin-left: 20px;
}

.mobile-dropdown-toggle {
  display: none;
}

@media (max-width: 768px) {
  .logo,
  .mobile-dropdown-toggle {
    z-index: 1;
  }

  .mobile-dropdown-toggle {
    display: initial;
  }

  .dropdown-link-container {
    /* first, make our dropdown cover the screen */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    /* fix nav height on mobile safari, where 100vh is a little off */
    height: -webkit-fill-available;

    /* then, arrange our links top to bottom */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;

    /* add margins and padding to taste */
    margin: 0;
    padding-left: 7vw;
    padding-right: 7vw;

    background: lightblue;
    z-index: 0;

    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.2s, opacity 0.2s;
  }

  nav.dropdown-opened > .dropdown-link-container {
    opacity: 1;
    transform: translateY(0);
  }
}

/* this stuff isn't super important */
html {
  font-family: sans-serif;
}

body {
  margin: 0;
}

const navElement = document.getElementById("main-nav");
const dropdownEl = document.querySelector(".dropdown-link-container");

document.addEventListener("click", (event) => {
  if (event.target.classList.contains("mobile-dropdown-toggle")) {
    navElement.classList.toggle("dropdown-opened");
  }
});

document.addEventListener("click", (event) => {
  // if we clicked on something inside our dropdown...
  if (dropdownEl.contains(event.target)) {
    navElement.classList.remove("dropdown-opened");
  }
});