JSFiddle - React, Tailwind, and code Playground

by Rashit1122233

HTML

<div id="page">

        <div style="" class="header">
            <ul>
               <div class="close">
                   <p>Меню</p>
                   
               </div>
               <li><a class="nav-line nav-line-2" href="test-1">Навигация </a></li>
               <li><span  id="category" class="nav-line zakryt">Категории<p class="num">8</p></span>
                   <ul class="header-sub">
                    <li><a href="auto" class="nav-sub">Машины</a></li>
                    <li><a href="city" class="nav-sub">Города</a></li>
                    <li><a href="restoran" class="nav-sub">Рестораны</a></li>
                    <li><a href="hotel" class="nav-sub">Гостиницы</a></li>
                    <li><a href="strana" class="nav-sub">Страны</a></li>
                    <li><a href="bisnes" class="nav-sub">Бизнес</a></li>
                    <li><a href="hobby" class="nav-sub">Хобби</a></li>
                    <li><a href="nauka" class="nav-sub">Наука</a></li>
                    <li><a href="tehnika" class="nav-sub">Техника</a></li>
                    <li><a href="iskustvo" class="nav-sub">Искуство</a></li>
                    <li><a href="puteshes" class="nav-sub">Путешествия</a></li>
                    <li><a href="novosti" class="nav-sub">Новости</a></li>
                   </ul>
               </li>
                <li><a class="nav-line" href="test-3">О Нас</a></li>
                
            </ul>
        </div>
        <div class="content-page">
            <div class="nav-page">
                <div class="nav-page-con">
                   <nav class="menu">Mеню</nav>
                </div>
            </div>
            <div class="content">
                <div class="page-1">Навигация </div>
                <div style="display: none;" class="page-3">О Нас</div>
                <div style="display: none;" class="auto">Машины</div>
                <div style="display: none;" class="city">Города</div>
                <div...

CSS

*{
margin: 0;
padding: 0;
}

body{
    
}

a,ul{
  text-decoration:none;
  list-style:none;
  color:#fff;
}


.nav-page{
  background:#2B3643;
  color:#fff;
  font-weight:bold;
  padding:10px;
  position:fixed;
  width:100%;
  height:20px;
  z-index:3;
}
.nav-page-con{
    display: block;
    float: left;
    padding:10px ;
    margin-top: -9px;
}
.fa-bars{
    float: left;
    font-size: 20px;
    
}
.menu{
    float: left;
    font-size: 20px;
    margin-top: -2px;
    cursor:pointer;
}
.header{
  float:left;
  width:200px;
  height:100%;
  display:block;
  z-index:4;
  position:fixed;
  background:#364150;
  overflow:auto;
  top:;
  left:-200px;
  box-shadow: none;
}

.close{
    height: 40px;
    background:#2B3643;
    cursor:pointer;
    
}

.fa-times{
    float: right;
    margin-right: 10px;
}
.close>p{
    float: left;
    display: block;
    width: 190px;
    color:#fff;
    background: #2B3643;
    font-weight: bold;
    position: fixed;
    padding: 11px 0 11px 10px;
    
}
.nav-line{
  padding:10px;
  color:#fff;
  background:#364150;
  display:block;
  border-left: solid #364150 5px;
  margin-top: 5px;
  cursor:pointer;
}

.nav-line-2{
	  padding:10px;
	  color:#fff;
	  background:#656f7b;
	  display:block;
	  border-left: solid #36C6D3 5px;
	  margin-top: 5px;
}
.nav-sub{
  padding:10px;
  color:#fff;
  background:#364150;
  display:block;
  border-left: solid #364150 5px;
  margin-top: 5px;
  margin-left: 10px;
}

.active{
  padding:10px;
  color:#fff;
  background:#364150;
  display:block;
  border-left: solid #26c281 5px;
  margin-top: 5px;
  margin-left: 10px;
  background:#656f7b;
}

.header>ul>li>ul{
  display:none;
}
.num{
	float: right;
	margin-right: 10px;
	background: #36C6D3;
	width: 20px;
	height: 20px;
	text-align: center;
	border-radius: 10px;
	font-size: 12px;
	line-height: 20px;
	margin-top: -2px;
}



.content{
  float:right;
  width:100%;
  height:1000px;
  display:block;
  z-index:2;
  position: relative;
  background:#fff;
 ...

JavaScript

var contador = 0;
main();
function main(){


       $('.nav-page').click(function(){

           if(contador == 1){

                 $('.header').animate({
                     left:'-200px'
                 });
                 $('.content').css({'display':'block'});
                 $('.header').css({'box-shadow':'none'});
                 contador = 0;
             } else{
                 contador = 1;
                $('.header').animate({
                     left:'0px'
                 });
                $('.content').css({'display':'none'});
                $('.header').css({'box-shadow':'0 0 10px #000'});
                 $(body).css({'display':'none'});
             }
         });

    $('.close').click(function(){
        $('.header').animate({left:'-200px'});
        $('.content').css({'display':'block'});
        contador = 0;
    });

  $('.header>ul>li>a').click(function(){
         var pageNum = $(this).attr('href').split('-')[1];
        $('.content>div').hide();
        $('.page-'+pageNum).show();
        $('.content').css({'display':'block'});
        $('.header>ul>li>a').removeClass('nav-line-2');
        $('.header>ul>li>span').removeClass('nav-line-2');
        $(this).addClass('nav-line-2');
        $('.header-sub').slideUp();
        
        $('#category').removeClass('open');// дописал тока вот это!!
        $('#category').addClass('zakryt');
        $('.header').animate({left:'-200px'});
        $('.header-sub>li>a').removeClass('active');
        contador = 0;
       
         return false;
      });
      
      
//клик под меню
  $('.header-sub>li>a').click(function(){
        $('.header-sub>li>a').removeClass('active');
        $(this).addClass('active');
        var link = $(this).attr('href');
        $('#category').addClass('zakryt nav-line-2');
       $('.header').animate({left:'-200px'});
       $('.content>div').hide();
       $('.content>.'+link).show();
       $('.content').css({'display':'block'});
       contador = 0;
  ...