JSFiddle - React, Tailwind, and code Playground

HTML

<div class="adaptive_menu">

  <span class="menu_icon"></span>
  <span id="adaptive_menu_text" class="adaptive_menu_text">Открыть меню</span>

</div>

<ul class="main-nav">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Услуги и цены</a></li>
  <li><a href="#">Портфолио</a></li>
  <li><a href="#">Обратная связь</a></li>
</ul>

JavaScript

jQuery(document).ready(function () {

    var adaptive_menu_text = document.getElementById('adaptive_menu_text'),
        container1 = $('.main-nav, .form_search');

    $('.adaptive_menu').click(function () {
        container1.slideToggle(300);
        adaptive_menu_text.innerHTML = 'Закрыть меню'
    });

    $(document).mouseup(function (e) {
        var container = $('.adaptive_menu');
        if (container.has(e.target).length === 0){
            container1.slideUp(300);
            adaptive_menu_text.innerHTML = 'Открыть меню';
        }
    });

});