<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <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>
    <button class="toggle-menu">
      <i class="fas fa-bars"></i>
    </button>
    <button class="header-search">
      <i class="fas fa-search"></i>
    </button>
  </nav>

</header>
<main>
  <section class="grid">
    <div class="grid-item">Grid Item 1</div>
    <div class="grid-item">Grid Item 2</div>
    <div class="grid-item">Grid Item 3</div>
    <div class="grid-item">Grid Item 4</div>
    <div class="grid-item">Grid Item 5</div>
    <div class="grid-item">Grid Item 6</div>
  </section>
  <section class="content">
    <aside>
      <h2>This is sidebar</h2>
      <section class="grid">
        <div class="grid-item">Grid Item 1</div>
        <div class="grid-item">Grid Item 2</div>
        <div class="grid-item">Grid Item 3</div>
      </section>
    </aside>
    <article>
      <h2>This is content</h2>
      <section class="grid">
        <div class="grid-item">Grid Item 1</div>
        <div class="grid-item">Grid Item 2</div>
        <div class="grid-item">Grid Item 3</div>
        <div class="grid-item">Grid Item 4</div>
        <div class="grid-item">Grid Item 5</div>
        <div class="grid-item">Grid Item 6</div>
      </section>
    </article>
  </section>
</main>
<footer>
  &copy; 2023 My Website. All rights reserved.
</footer>

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Dela+Gothic+One&family=Lato&display=swap");

:root {
  --primary-font: "Bree Serif", serif;
  --primary-color: #333;
  --primary-text-color: #111;
  --secondary-text-color: #fff;
  --primary-padding: 1rem;
  --text-font-size: clamp(1rem, 2.08vw, 1.5rem);
  --heading-font-size: clamp(1.5rem, 3.333vw, 2.5rem);
}
body {
  font-family: var(--primary-font);
  margin: 0;
  padding: 0;
  font-size: var(--text-font-size);
}

button {
  cursor: pointer;
}

header {
  background-color: var(--primary-color);
  color: var(--secondary-text-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--primary-padding);
}

header h1 {
  margin: 0;
  white-space: nowrap;
  font-size: var(--heading-font-size);
}

.header-search {
  background: transparent;
  border: 0;
  color: var(--secondary-text-color);
}

header nav {
  display: flex;
  gap: var(--primary-padding);
}

header nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--primary-padding);
}
header nav.wrapped ul {
  display: none;
}

header nav ul li a {
  color: var(--secondary-text-color);
}

header nav button.toggle-menu {
  display: none;
  background: transparent;
  border: 0;
  color: var(--secondary-text-color);
}
header nav.wrapped button.toggle-menu {
  display: block;
}

main {
  padding: var(--primary-padding);
}

.grid {
  /** * User input values. */
  --grid-layout-gap: var(--primary-padding);
  --grid-column-count: 4;
  --grid-item--min-width: 15em;

  /** * Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc(
    (100% - var(--total-gap-width)) / var(--grid-column-count)
  );
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)
  );
  grid-gap: var(--grid-layout-gap);
  margin-bottom: var(--primary-padding);
}

.grid-item {
  border: 1px solid var(--primary-color);
  padding: var(--primary-padding);
  text-align: center;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.content > aside {
  border: 1px solid var(--primary-color);
  padding: var(--primary-padding);
  flex-grow: 1;
  flex-basis: 15em;
}

.content > article {
  border: 1px solid var(--primary-color);
  padding: var(--primary-padding);
  flex-grow: 3;
  flex-basis: 25em;
}

footer {
  background-color: var(--primary-color);
  color: var(--secondary-text-color);
  text-align: center;
  padding: var(--primary-padding);
}

/**
 * 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 = (wrapper, cover) => {
  const items = wrapper.querySelectorAll(":scope > *");

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

const headerNav = document.querySelector("header nav");
const headerMenu = headerNav.querySelector("ul");
// execute function on page load
addWrapClasses(headerMenu, headerNav);

// execute function on window resize
window.addEventListener("resize", () => {
  addWrapClasses(headerMenu, headerNav);
});