JSFiddle - React, Tailwind, and code Playground

by MirDj

HTML

<div class="leftMenu" id="leftMenu">
<div class="buttonMenu"><div class="buttonMenuIcon homeIcon" tooltip="На главную" flow="right"></div></div>
<div class="buttonMenu"><div class="buttonMenuIcon activeNewsIcon"></div></div>
<div class="buttonMenu"><div class="buttonMenuIcon dialogsIcon"></div></div>
<div class="buttonMenu"><div class="buttonMenuIcon searchIcon"></div></div>
<div class="buttonMenu"><div class="buttonMenuIcon fileManagerIcon"></div></div>
<div class="buttonMenu"><div class="buttonMenuIcon quoteMsgIcon"></div></div>
<div class="buttonMenu"><div class="buttonMenuIcon notifIcon"></div></div>
<div class="buttonMenu"><div class="buttonMenuIcon profileIcon"></div></div>
<div class="buttonMenu"><div class="buttonMenuIcon exitSiteIcon"></div></div>
 </div>
<div class="leftMenuOpenButton"></div>
<div class="showMenuButton menuButtonShift" id="showLeftMenuTrigger" data-trigger="leftSlideMenu" data-idclick="leftMenu" title="Нажмите чтобы открыть/скрыть меню сайта">

</div>

CSS

.leftMenu {
    position: fixed;
    overflow: hidden;
    background-color: #2b3a41;
    top: 0px;
    left: -50px;
    width: 50px;
    height: 100%;
    z-index: 1000;
    /*box-shadow: 7px 10px 23px -4px #00d2ff;*/
}
.showMenuButton {
    position: fixed;
    top: 0px;
    left: 50px;
    cursor: pointer;
    /*padding: 10px 5px 5px 5px; */
    width: 30px;
    height: 100%;
   /* background-color: #2b3a41;*/
    /*border-radius: 0 5px 5px 0px;*/
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 11;
   /* border-right: 1px solid #575861;
    border-top: 1px solid #575861;
    border-bottom: 1px solid #575861;
    opacity: 0.2;  */
}
.barText {
    text-align: right;
    margin: 0px;
    COLOR: #FFFFFF;
    FONT-SIZE: 8px;
    FONT-FAMILY: Arial;
}

.leftMenuOpen {
	left: 0px;
}
.menuButtonShift {
left: 0px;
}

.leftMenu {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.buttonMenu {
cursor:pointer;
margin: 10px 5px 0 5px;
background-color: #575861;
width: 40px;
height: 40px;
border-radius: 5px;
    text-align: center;
    line-height: 60px;
}

.buttonMenu:hover {
background-color: #575896;
}

.buttonMenuIcon {
	display: inline-block;
    width: 25px;
    height: 25px;
}

.homeIcon {
background: url(https://urod.mirdj.ru/images/homeIcon.png) 50% 0px no-repeat;
}

.activeNewsIcon {
background: url(https://urod.mirdj.ru/images/activeNews.png) 50% 0px no-repeat;
}

.dialogsIcon {
background: url(https://urod.mirdj.ru/images/dialogsIcon.png) 50% 0px no-repeat;
}

.searchIcon {
background: url(https://urod.mirdj.ru/images/searchIcon.png) 50% 0px no-repeat;
}

.fileManagerIcon {
	height: 28px;
background: url(https://urod.mirdj.ru/images/fileManagerIcon.png) 50% 0px no-repeat;
}

.quoteMsgIcon {
background: url(https://urod.mirdj.ru/images/quoteMsgIcon.png) 50% 0px no-repeat;
}

.notifIcon {
background:...

JavaScript

jQuery(document).ready(function ($)  {
   $('[data-trigger="leftSlideMenu"]').click(function() {
  // Получим ID элемента
  var thisID = $(this).attr('id');
  // Получим значение ID элемента меню, с которым будем работать
  var idClick = $('#'+thisID).attr('data-idClick');

				var active = $('#'+idClick).attr('data-active');
				// Меню оказалось открыто
				if(active == '1'){
	            // Его нужно скрыть // И сменить состояние на закрытое
				$('#'+idClick).removeClass('leftMenuOpen' ).attr('data-active', '0');
				$('.showMenuButton').addClass('menuButtonShift');
				$('.leftMenuCloseButton').removeClass('leftMenuCloseButton').addClass('leftMenuOpenButton' );
				// Меню еще не открыто
				}else{
				// Меняем статус открытых уже меню на скрытые // Скрываем уже открытые меню
				$(".leftMenuOpen").attr('data-active', '0').removeClass('leftMenuOpen' );
				// открываем меню, которое запросили // Ставим ему статус как открытое
				$("#"+idClick).addClass('leftMenuOpen' ).attr('data-active', '1');
				$('.showMenuButton').removeClass('menuButtonShift');
				$('.leftMenuOpenButton').removeClass('leftMenuOpenButton').addClass('leftMenuCloseButton' );
				}

})
});