JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<div id="nav">
  <div class="nav_close">
    <span>закрыть</span>
  </div>
  <div class="nav_grid">текст</div>
</div>

CSS

#nav {
  display: grid;
  position: relative;
}

.nav_close {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.nav_grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: minmax(200px, auto);
  grid-gap: 20px;
  background: crimson;
  transition: grid-template-rows 0.5s linear;
}

JavaScript

const navClose = document.querySelector('.nav_close');
const nav = document.querySelector('nav_grid');

const anim = anime({
  targets: '.nav_grid',
  duration: 750,
  autoplay: false,
  gridTemplateRows: ['minmax(200px, auto)', 'minmax(600px, auto)'],
});

navClose.addEventListener('click', function(e) {
  if (anim.began) {
    anim.reverse();
  }

  anim.play();
});