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 $toggle = $('#adaptive_menu_text'),
        $container1 = $('.main-nav, .form_search');


		$(document).click(function(e) {
    
      var targetIsRight = $(e.target).hasClass('adaptive_menu_text');
      		containerIsVisible = $container1.is(':visible');
     
     if(e.target.tagName == 'A') return;
          
      if(!containerIsVisible && !targetIsRight || $(document).width() > 767) return false; 
      
      else if(containerIsVisible && !targetIsRight || containerIsVisible && targetIsRight) {
        $container1.slideUp(300);
        $toggle.text('Открыть меню');
      }
      
      else if(!containerIsVisible && targetIsRight) {
      	$container1.slideDown(300);
        $toggle.text('Закрыть меню');
      }
      });
      });