JSFiddle - React, Tailwind, and code Playground

by Timofey qwe

HTML

<header class="header">
    <div class="header__logo">
      <picture>
   <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/NTS_logo.png" alt="">
      </picture>
    </div>
    <nav class="main-menu">
      <ul class="main-menu__list">
        <li class="main-menu__item"><a href="" class="main-menu__link">Главная</a></li>
        <li class="main-menu__item"><a href="#" class="main-menu__link">Фото и Видео</a></li>
        <li class="main-menu__item"><a href="#" class="main-menu__link">Форма отзыва</a></li>
        <li class="main-menu__item"><a href="#" class="main-menu__link">Html Academy</a></li>
      </ul>
    </nav>
    <button class="main-menu__button">
      <span class="button-line"></span>
    </button>
  </header>

CSS

.header {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 position: relative;
}
 .header__logo {
	 display: flex;
}
 .header__logo picture {
	 display: flex;
}

.main-menu {
	 display: flex;
	 order: -1;
	 width: 100%;
	 position: relative;
	 transform: translateY(-150%);
	 transition: 1s;
}
 .main-menu__list {
	 padding: 0;
	 margin: 0;
	 list-style: none;
	 width: 100%;
}
 .main-menu__link {
	 font-size: 18px;
	 font-weight: bold;
	 text-align: center;
	 text-decoration: none;
	 text-transform: uppercase;
	 color: #fff;
	 background-color: #81b3d2;
	 display: block;
	 padding: 17.5px 93px;
	 border-bottom: 1px solid #678fa8;
	 border-top: 1px solid #9ac2db;
}
 .main-menu__button {
	 position: absolute;
	 right: 20px;
	 bottom: 45px;
	 width: 23px;
	 height: 21px;
	 border: none;
	 background-color: transparent;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 outline: none;
}
 .button-line {
	 display: block;
	 position: absolute;
	 width: 23px;
	 height: 4px;
	 background-color: #81b3d2;
	 transition: 0.2s ease-in;
}
 .button-line::before {
	 content: "";
	 display: block;
	 position: absolute;
	 left: 0;
	 top: -9px;
	 width: 23px;
	 height: 4px;
	 background-color: #81b3d2;
	 transition: transform 0.2s ease-in, top 0.2s linear 0.2s;
}
 .button-line::after {
	 content: "";
	 display: block;
	 position: absolute;
	 left: 0;
	 top: 9px;
	 width: 23px;
	 height: 4px;
	 background-color: #81b3d2;
	 transition: transform 0.2s ease-in, top 0.2s linear 0.2s;
}
 .active {
	 transform: translateY(0);
	 transition: 1s;
}
 .button-line.button-line-active {
	 background-color: transparent;
	 transition: 0.2s ease-in;
}
 .button-line.button-line-active::before {
	 transform: rotate(45deg);
	 top: 0;
	 transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
}
 .button-line.button-line-active::after {
	 top: 0;
	 transform: rotate(-45deg);
	 transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
}

JavaScript

document.querySelector('.main-menu__button').onclick = function () {
  document.querySelector('.main-menu').classList.toggle('active');
  document.querySelector('.button-line').classList.toggle('button-line-active');
}