JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<div class="mobile-menu">
  <div></div>
  <div></div>
  <div></div>
</div>

SCSS

.mobile-menu {
  --size: 2.5rem;
  --padding: 0.5rem;
  --color: red;
  --movement-timing: cubic-bezier(0.5, 0, 0.3, 1);
  --rotation-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.42s;
  width: var(--size);
  height: var(--size);
  padding: var(--padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  * {
    box-sizing: border-box;
  }
  > div {
    border: 1px solid var(--color);
    height: 0;
    width: 100%;
    position: relative;
    transform-origin: 50% 50%;
    transition:
      top calc(0.45 * var(--duration)) var(--movement-timing) calc(0.55 * var(--duration)),
      bottom calc(0.55 * var(--duration)) var(--movement-timing) calc(0.45 * var(--duration)),
      transform calc(0.75 * var(--duration)) var(--rotation-timing) 0s;
  }
  > :nth-child(1) {
    top: calc(var(--padding)/2);
  }
  > :nth-child(3) {
    bottom: calc(var(--padding)/2);
  }
  &.menu-open {
    > div {
      transition:
        top calc(0.45 * var(--duration)) var(--movement-timing) 0s,
        bottom calc(0.55 * var(--duration)) var(--movement-timing) 0s,
        transform calc(0.75 * var(--duration)) var(--rotation-timing) calc(0.25 * var(--duration));
    }
    > :nth-child(1) {
      top: calc(50% - 1px);
      transform: rotate(0.125turn);
    }
    > :nth-child(2) {
      transform: rotate(0.125turn);
    }
    > :nth-child(3) {
      bottom: calc(50% - 1px);
      transform: rotate(-0.125turn);
    }
  }
}

JavaScript

document.querySelector('.mobile-menu')
	.addEventListener('click', ({ target }) => {
  	target.closest('.mobile-menu').classList.toggle('menu-open');
	})