<header id="header">
  <h1>
    <a href="https://www.w3cplus.com">W3cplus</a>
  </h1>
  <nav id="nav"></nav>
</header>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  min-height: 100vh;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Exo", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  background: radial-gradient(50% 100%, #00acfe 0%, #006eff 0%, #2b9fff 100%),
    linear-gradient(180deg, #006eff 0%, #00c2ff 100%);
}

#header {
  width: 100%;
  display: flex;
  align-items: stretch;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  padding: 0 20px;
}

#nav {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

.nav {
  list-style: none outside none;
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100%;
}

h1 {
  margin: 0;
  padding: 10px 0;
}

a {
  text-decoration: none;
}

.nav li {
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 5px 10px;
  transition: all 0.28s ease;
}

.nav li:hover {
  background-color: #222;
  color: #fff;
}

.menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.icon {
  width: 1em;
}

.drop__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -10px;
  background-color: #fff;
  border-radius: 5px;
  list-style: none outside none;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));
  display: none;
}

.drop__menu::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 10px;
  background-color: #fff;
  bottom: 100%;
  right: 10px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.drop__menu li {
  cursor: pointer;
  padding: 10px 20px;
  transition: all 0.28s ease;
}

.drop__menu li:hover {
  background-color: #222;
  color: #fff;
}

.drop__menu li:first-child {
  border-radius: 5px 5px 0 0;
}

.drop__menu li:last-child {
  border-radius: 0 0 5px 5px;
}

.show .drop__menu {
  display: block;
}

const mobileMenuComponent = `
  <div class="menu" id="drop_menu">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="icon">
  <path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" class=""></path>
</svg>
    <ul class="drop__menu">
      <li>CSS</li>
      <li>JavaScript</li>
      <li>React</li>
      <li>Vue</li>
      <li>SVG</li>
    </ul>
  </div>
`;

const MenuComponent = `
  <ul class="nav">
    <li>CSS</li>
    <li>JavaScript</li>
    <li>React</li>
    <li>Vue</li>
    <li>SVG</li>
  </ul>
`;

const setNavInnerHTML = (html) => {
  const nav = document.querySelector("nav");
  nav.innerHTML = html;
};

// I'm borrowing the MDN doc notation here: "mql" stands for "media query list".
const mql = window.matchMedia("(max-width: 600px)");

function isShowMobileMenu() {
  const dropMenu = document.getElementById("drop_menu");

  if (dropMenu) {
    console.log("has");
    dropMenu.addEventListener("click", function () {
      this.classList.toggle("show");
    });
  } else {
    console.log("no");
    return false;
  }
}

// For first render
let mobileView = mql.matches;
if (mobileView) {
  setNavInnerHTML(mobileMenuComponent);
  isShowMobileMenu();
} else {
  setNavInnerHTML(MenuComponent);
}

// For subsequent renders if screen size changes
mql.addEventListener("change", (e) => {
  let mobileView = e.matches;
  if (mobileView) {
    setNavInnerHTML(mobileMenuComponent);
    isShowMobileMenu();
  } else {
    setNavInnerHTML(MenuComponent);
  }
});