JSFiddle - React, Tailwind, and code Playground

by lborgman

HTML

<header>
  <div class="container">
    <nav>
      <div class="wrapper">
        <img src="./img/logo.svg" class="logo" alt="Logo">
        <ul class="main-nav">
          <div class="sticky-wrapper">
            <li class="parent-item"><a href="./index.html"><i class="fas fa-home"></i></a></li>
            <li class="parent-item">
              <div class="about-dropdown dropdown">
                <button>About Us</button>
                <ul style="display: none">
                  <li class="child-item"><a href="#">History</a></li>
                  <li class="child-item"><a href="#">Community</a></li>
                  <li class="child-item"><a href="#">Competitive Advantage</a></li>
                  <li class="child-item"><a href="#">Our People</a></li>
                  <li class="child-item"><a href="#">Environmental Policy</a></li>
                  <li class="child-item"><a href="#">News and Events</a></li>
                </ul>
              </div>
            </li>
            <li class="parent-item">
              <div class="capabilities-dropdown dropdown">
                <button>Our Capabilities</button>
                <ul style="display: none">
                  <li class="child-item"><a href="#">Laser Processing</a></li>
                  <li class="child-item"><a href="#">Machining</a></li>
                  <li class="child-item"><a href="#">Forming</a></li>
                  <li class="child-item"><a href="#">Engineering Services</a></li>
                  <li class="child-item"><a href="#">Robotic Welding</a></li>
                  <li class="child-item"><a href="#">Module Assembly</a></li>
                  <li class="child-item"><a href="#">Quality Control</a></li>
                  <li class="child-item"><a href="#">Paint Technology</a></li>
                  <li class="child-item"><a href="#">Certifications</a></li>
                  <li class="child-item"><a href="#">Tanks</a></li>
                </ul>
              </div>
           ...

CSS

button {
  all: unset;
  xall: revert;
  
}

JavaScript

const headerButton = document.querySelectorAll('header .dropdown button')
const headerButtonList = document.querySelectorAll('header .dropdown ul')

if (headerButton) {
  headerButton.forEach((el, index) => {
    el.addEventListener('click',() => {

      if(headerButtonList[index].style.display !== 'none') {
        // If button is clicked, display dropdown
        headerButtonList[index].style.display = 'none'

        // Switches based on window size
      } else if(headerButtonList[index].style.display === 'none' && window.matchMedia("(max-width: 768px)")) {
        headerButtonList[index].style.display = 'block'

      } else {
        headerButtonList[index].style.display = 'block'
      }
    })
  })
}