<header>
  <img class="logo" src="https://picsum.photos/id/237/100/50" alt="logo" width="100" height="50">
  <button class="navbar__toggle" id="mobile-menu"></button>
  <nav class="nav">
    <div class="dropdown" data-dropdown>
      <button class="link" data-dropdown-button>Information</button>
      <div class="dropdown-menu information-grid">
        <div>
          <div class="dropdown-heading">Free Tutorials</div>
          <div class="dropdown-links">
            <a href="#" class="link">All</a>
            <a href="#" class="link">Latest</a>
            <a href="#" class="link">Popular</a>
          </div>
        </div>
        <div>
          <div class="dropdown-heading">Courses</div>
          <div class="dropdown-links">
            <a href="#" class="link">Javascript</a>
            <a href="#" class="link">CSS</a>
            <a href="#" class="link">React</a>
          </div>
        </div>
        <div>
          <div class="dropdown-heading">Blog</div>
          <div class="dropdown-links">
            <a href="#" class="link">All</a>
            <a href="#" class="link">Latest</a>
            <a href="#" class="link">Popular</a>
          </div>
        </div>
        <div>
          <div class="dropdown-heading">Other</div>
          <div class="dropdown-links">
            <a href="#" class="link">Twitter</a>
            <a href="#" class="link">Newsletter</a>
            <a href="#" class="link">Discord</a>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="link my-button">Pricing</a>
    <div class="dropdown" data-dropdown>
      <button class="link" data-dropdown-button>Login</button>
      <div class="dropdown-menu">
        <form class="login-form">
          <label for="email">Email</label>
          <input type="email" name="email" id="email">
          <label for="password">Password</label>
          <input type="password" name="email" id="email">
          <button type="submit">Login</button>
        </form>
      </div>
    </div>
    <button class="#" id="signup">Sign Up</button>
  </nav>
</header>

/*

Forum question answer only:

https://www.sitepoint.com/community/t/adding-an-hamburger-toggle-to-my-website/387387/13

*/
body {
  margin: 0;
}
header {
  background-color: rgb(212, 209, 209);
  display: flex;
  flex-wrap: wrap; /* so navbar will go under logo on small smartphones */
  align-items: center;
  padding: 5px 4%;
  justify-content: space-between;
}
.logo {
  margin-left: 20px;
  cursor: pointer;
}
.nav {
  display: flex;
  gap: 1rem;
  padding: 0;
  align-items: center;
}
.link {
  background: none;
  border: none;
  text-decoration: none;
  color: #777;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
}
.dropdown.active > .link,
.link:hover {
  color: black;
}
.link:last-child {
  margin: 0;
}
.dropdown {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(150% + 0.25rem);
  background-color: white;
  padding: 0.75rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}

.dropdown.active > .link + .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.information-grid {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 2rem;
}

.dropdown-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.login-form > input {
  margin-bottom: 0.5rem;
}
#signup {
  padding: 10px 25px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

#signup:hover {
  color: rgb(110, 218, 245);
  transition: all 0.3s ease 0s;
}
#mobile-menu {
  /* just for testing - you need to find the correct css for a hamburger*/
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  border: none;
  height: 22px;
  width: 24px;
  border: 2px solid #000;
  border-radius: 4px;
  position: relative;
}
#mobile-menu:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  margin: auto;
  width: 16px;
  height: 2px;
  background: black;
  box-shadow: 0 4px 0 0 black, 0 8px 0 0 black;
}

/* I've used 800px as the trigger point but this needs to change based on the design */
@media screen and (max-width: 800px) {
  #mobile-menu {
    display: block;
  }
  .nav {
    display: none;
  }
  .active + .nav {
    display: block;
  }
  /* Now from here you need to style the way you want that dropdown to look on small screen.
  This would probably be using absolute positioning to show the menu over any other content*/

  /* e.g. just for starters*/
  header {
    position: relative;
  }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
  }
  /* now adjust all the styling for the list elements as required*/
  .nav {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  }
  button.link,
  .my-button.link {
    padding: 5px 10px;
    border: none;
    background: #eee;
    display: block;
    width: 100%;
    text-align: left;
    margin: 0;
    box-sizing: border-box;
  }
  .dropdown.active > .link + .dropdown-menu {
    position: static;
    display: block;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .link {
    margin: 0 0 0.5rem;
    border-bottom: 1px dashed #000;
  }
  .dropdown.active .link:last-child {
    border-bottom: 1px solid #000;
    margin: 0;
  }
  .dropdown-heading {
    margin: 0.5rem 0;
  }
  #signup {
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px 10px;
    border: none;
    margin: 0;
    background: #eee;
    width: 100%;
    text-align: left;
    border-radius: 0;
    box-sizing: border-box;
    font-weight: normal;
    font-family: inherit;
    font-size: 1rem;
    color: #777;
  }
  .dropdown .link:hover,
  #signup:hover,
  .my-button.link:hover {
    color: #000;
    background: #ddd;
  }
}

/*

Forum question answer only:

https://www.sitepoint.com/community/t/adding-an-hamburger-toggle-to-my-website/387387/13

*/

document.addEventListener("click", (e) => {
  const isDropdownButton = e.target.matches("[data-dropdown-button]");
  if (!isDropdownButton && e.target.closest("[data-dropdown]") != null) return;

  let currentDropdown;
  if (isDropdownButton) {
    currentDropdown = e.target.closest("[data-dropdown]");
    currentDropdown.classList.toggle("active");
  }

  document.querySelectorAll("[data-dropdown].active").forEach((dropdown) => {
    if (dropdown === currentDropdown) return;
    dropdown.classList.remove("active");
  });
});

const toggle = document.getElementById("mobile-menu");
toggle.onclick = function () {
  toggle.classList.toggle("active");
};