JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overlay"> </div>
<div class="touch_menu">
		<span class="icon_menu"><hr></span>
		<span class="icon_menu"><hr></span>
		<span class="icon_menu"><hr></span>
</div>
<div class="category">
      <ul class="one">		
        <li class="two"><a href="#">>Окно</li>
        <li class="two"><a href="#">>Двери</li>
        <li class="two"><a href="#">>Шкаф</li>
      </ul>
</div>

CSS

.touch_menu{
	display: none;
	position: absolute;
	right:5%;
	top:2%;
	cursor: pointer;
	border:2px solid #4c4c4c;
	padding:3px;
}
.icon_menu hr{
	width:35px;
	padding:1px;
	background-color: #fff;

}
@media (min-width:500px) {
  .overlay {
    display: none !important;
  }
}
@media (max-width:500px) {
	.category{
		display:none;
		position: absolute;
		top:5%;
		left:4%;
		z-index: 3;
		background-color: #4f5a6e;
		border:2px solid #2E2E2E;
    z-index: 9999;
	}
  .category ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
	.category a{
		padding:10px;
    color: #fff
	}
	.touch_menu{
      display:block;
      cursor: pointer;
      z-index: 9999;
      background-color: red;
    }
  }
  
  .overlay {
    position: fixed;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
    display: none;
    z-index: 10;
    z-index: 9998;
}

JavaScript

$(".touch_menu").click(function () {
	$(".overlay").fadeToggle("slow");
  $(".category").fadeToggle("slow");
});