JSFiddle - React, Tailwind, and code Playground

by yura747

HTML

<nav class="desctop">
						<ul>
							<li class="catalog">
								<a href="#">
									<span class="before">
									</span> каталог товаров
									<span class="after"></span>
								</a>
								<div class="drop-menu-wrapper">
									<ul class="drop-menu">
										<li class="drop-right"><a href="#">Свадебная бижутерия</a>
											<ul>
												<li class="list-title"><a href="#">Мужская бижутерия</a></li>
												<li><a href="#">Браслеты</a></li>
												<li><a href="#">Кулоны</a></li>
												<li><a href="#">Зажимы и запонки</a></li>
											</ul>
										</li>
										<li><a href="#">Аксессуары для волос</a></li>
										<li><a href="#">Броши</a></li>
										<li class="drop-right"><a href="#">Мужские аксессуары</a>
											<ul>
												<li class="list-title"><a href="#">Мужская бижутерия</a></li>
												<li><a href="#">Браслеты</a></li>
												<li><a href="#">Кулоны</a></li>
												<li><a href="#">Зажимы и запонки</a></li>
											</ul>
										</li>
										<li><a href="#">Клатчи</a></li>
										<li><a href="#">Детская бижутерия</a></li>
										<li><a href="#">Демонстрационное оборудование</a></li>
									</ul>
								</div>
							</li>
							<li><a href="#">условия работы</a></li>
							<li><a href="#">скидки</a></li>
							<li><a href="#">оплата и доставка</a></li>						
							<li><a href="#">документы</a></li>
							<li><a href="#">контакты</a></li>
						</ul>
					</nav>

JavaScript

$('#hamburger').click(function(e) {
    e.preventDefault();
     $('.desctop').toggleClass('active');
});


$('.catalog').click(function(e) {
    e.preventDefault();
    $('.drop-menu-wrapper').toggleClass('active');
    $(this).toggleClass('active');
});