<header>
  <div class="logo">
    <img src="https://api.companyurlfinder.com/logo/google.com" alt="Logo">
  </div>

  <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <div class="menu-toggle">
    <input type="checkbox" id="toggle">
    <label for="toggle">
      <span></span>
      <span></span>
      <span></span>
    </label>
  </div>
</header>

body {
  margin: 0;
}
/* Header styles */
header {
  background-color: #f2f2f2;
  padding: 1em;
  display: flex;
  align-items: center;
  column-gap: 2rem;
  justify-content: space-between;
}

.logo img {
  height: 3rem;
  display: block;
}

/* Menu styles */
nav.menu.wrapped {
  display: none;
}
nav.menu.wrapped + .menu-toggle {
  display: block;
}
nav.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav.menu ul li {
  display: inline-block;
  margin-right: 1rem;
}

nav.menu ul li a {
  text-decoration: none;
  color: #333;
  padding: 0.5em;
}

/* Mobile burger icon styles */
.menu-toggle {
  display: none;
}

.menu-toggle label {
  display: block;
  width: 2rem;
  height: 1.5rem;
  cursor: pointer;
  position: relative;
  padding: 0.5em;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #333;
  position: absolute;
  top: 0%;
  left: 0;
  transition: all 0.3s ease;
}

.menu-toggle span:nth-child(2) {
  top: 50%;
}

.menu-toggle span:last-child {
  top: auto;
  bottom: 0%;
}

.menu-toggle input[type="checkbox"] {
  display: none;
}

.menu-toggle input[type="checkbox"]:checked + label span:nth-child(2) {
  opacity: 0;
}
.menu-toggle input[type="checkbox"]:checked + label span:first-child {
  transform: rotate(45deg);
  transform-origin: left center;
}
.menu-toggle input[type="checkbox"]:checked + label span:last-child {
  transform: rotate(-45deg);
  transform-origin: left center;
}

/**
 * Detect when elements become wrapped
 *
 * @param {NodeList} items - list of elements to check
 * @returns {array} Array of items that were wrapped
 */
const detectWrap = (items) => {
  let wrappedItems = [];
  let prevItem = {};
  let currItem = {};

  for (let i = 0; i < items.length; i++) {
    currItem = items[i].getBoundingClientRect();

    if (prevItem) {
      let prevItemTop = prevItem.top;
      let currItemTop = currItem.top;
      
      // if current's item top position is different from previous
      // that means that the item is wrapped
      if (prevItemTop < currItemTop) {
        wrappedItems.push(items[i]);
      }
    }

    prevItem = currItem;
  }

  return wrappedItems;
};

const addWrapClasses = () => {
  const menu = document.querySelector(".menu");
  const menuItems = document.querySelectorAll(".menu > ul > li");

  // remove ".wrapped" classes to detect which items was actually wrapped
  menu.classList.remove("wrapped");
  
  // only after that detect wrap items
  let wrappedItems = detectWrap(menuItems); // get wrapped items
  
  // if there are any elements that were wrapped - add a special class to menu
  if (wrappedItems.length > 0) {
    menu.classList.add("wrapped");
  }
};

// execute function on page load
addWrapClasses();

// execute function on window resize
window.addEventListener("resize", addWrapClasses);