JSFiddle - React, Tailwind, and code Playground

by YiuJia

HTML

<html>
  <head></head>
  <body>
    <div class="flex">
      <div id="menu">
        <div id="menu-btn">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <ul id="menu-list">
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
          <li>Item</li>
        </ul>
      </div>
      <div class="expand">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim iusto ab, omnis voluptas laborum unde, incidunt aliquid, laudantium harum, distinctio perspiciatis! Quae alias, deleniti quia iure aut delectus optio esse.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim iusto ab, omnis voluptas laborum unde, incidunt aliquid, laudantium harum, distinctio perspiciatis! Quae alias, deleniti quia iure aut delectus optio esse.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim iusto ab, omnis voluptas laborum unde, incidunt aliquid, laudantium harum, distinctio perspiciatis! Quae alias, deleniti quia iure aut delectus optio esse.</p>
      </div>
    </div>
  </body>
</html>

CSS

#menu {
  min-width: 40px;
  background-color: #e7e7e7;
  margin: 10px;
}

#menu-list {
  display: none;
}

#menu-btn {
  cursor: pointer;
}

#menu-btn > div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

#menu.show-menu {
  min-width: 200px;
}

#menu.show-menu > ul {
  display: block !important;
}

@media screen and (min-width: 768px) {
  #menu {
    min-width: 200px;
  }

  #menu-list {
    display: block;
  }

  #menu-btn {
    display: none;
  }
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.expand {
  flex-grow: 2;
}

JavaScript

var menuBtn = document.getElementById('menu-btn');
menuBtn.addEventListener('click', function() {
	var menu = document.getElementById('menu');
	
  if (menu.classList.contains('show-menu')) {
  	menu.classList.remove('show-menu');
  } else {
  	menu.classList.add('show-menu');
  }
});