JSFiddle - React, Tailwind, and code Playground

by Edgar Martinez

HTML

<div class='mymenu'>

	<div class="btn">
		 <span class="fas fa-bars"></span> 
	</div>


	<nav class="sidebar">
			<div class="text"> BBBootstrap.com </div>
			<ul class="main_side">
					<li class="active"><a href="#">Dashboard</a></li>
					
					<li> <a href="#" id="1">Pages <span class="fas fa-caret-down"></span> </a>
							<ul class="item-show-1">
									<li><a href="#">Contact us</a></li>
									<li><a href="#">Our Team</a></li>
							</ul>
					</li>
					
					<li> <a href="#" id="2">Services <span class="fas fa-caret-down"></span> </a>
							<ul class="item-show-2">
									<li><a href="#">App Design</a></li>
									<li><a href="#">Web Design</a></li>
							</ul>
					</li>
					<li><a href="#">Users</a></li>
					<li><a href="#">Message</a></li>
					<li><a href="#">Bookmark</a></li>
					<li><a href="#">Files</a></li>
			</ul>
	</nav>

</div>


<div class="content">
    <div class="header"> Main content goes here </div>
</div>

CSS

.mymenu  .btn {
    position: absolute;
    top: 10px;
    left: 1%;
    height: 37px;
    width: 37px;
    text-align: center;
    background: #1b1b1b;
    border-radius: 3px;
    cursor: pointer;
    transition: left 0.4s ease
}

.mymenu .btn.click {
    left: 260px
}

.mymenu .btn span {
    color: white;
    font-size: 15px;
    line-height: 36px
}

.mymenu .btn.click span:before {
    content: '\f00d'
}

.mymenu .sidebar {
    position: fixed;
    width: 250px;
    height: 70%;
    left: -250px;
    background: #1b1b1b;
    transition: left 0.4s ease;
	   margin: 0;
    padding: 0;
    user-select: none;
    box-sizing: border-box;
		
}

.mymenu .sidebar.show {
    left: 0px
}

.mymenu .sidebar .text {
    color: white;
    font-size: 19px;
    font-weight: 600;
    line-height: 65px;
    text-align: center;
    background: #1e1e1e;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    user-select: none;
    box-sizing: border-box;
}

.mymenu nav ul {
    background: #1b1b1b;
    height: 100%;
    width: 100%;
    list-style: none;
    padding-left: 0;
}

.mymenu nav ul li {
    line-height: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1)
}

.mymenu nav ul li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.mymenu nav ul li a {
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 14px;
    padding-left: 14px;
    font-weight: 500;
    display: block;
    width: 100%;
    border-left: 3px solid transparent;
		margin: 0;
		padding-left:10px;
    user-select: none;
    box-sizing: border-box;
}

.mymenu nav ul li.active a {
    color: #FC5404;
    background: #1e1e1e;
    border-left-color: #FC5404;
    user-select: none;
    box-sizing: border-box;
}

.mymenu nav ul li a:hover {
    background: #1e1e1e
}

.mymenu .feat-show {
    transition: all 0.5s
}

.mymenu nav ul li.active ul {
    transition: all 0.5s
}

.mymenu nav ul ul {
    position: static;
    display: none
}

.mymenu nav ul.show...

JavaScript

$('.btn').click(function(){
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});


$('.sidebar ul li a').click(function(){
var id = $(this).attr('id');
$('nav ul li ul.item-show-'+id).toggleClass("show");


});

$('nav ul li').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});

var style = {
  ".mymenu .btn": {
    position: "absolute",
    top: "10px",
    left: "1%",
    height: "37px",
    width: "37px",
    textAlign: "center",
    background: "#1b1b1b",
    borderRadius: "3px",
    cursor: "pointer",
    transition: "left 0.4s ease"
  },
  ".mymenu .btn.click": { left: "260px" },
  ".mymenu .btn span": { color: "white", fontSize: "15px", lineHeight: "36px" },
  ".mymenu .btn.click span:before": { content: "'\\f00d'" },
  ".mymenu .sidebar": {
    position: "fixed",
    width: "250px",
    height: "70%",
    left: "-250px",
    background: "#1b1b1b",
    transition: "left 0.4s ease",
    margin: "0",
    padding: "0",
    userSelect: "none",
    boxSizing: "border-box"
  },
  ".mymenu .sidebar.show": { left: "0px" },
  ".mymenu .sidebar .text": {
    color: "white",
    fontSize: "19px",
    fontWeight: 600,
    lineHeight: "65px",
    textAlign: "center",
    background: "#1e1e1e",
    letterSpacing: "1px",
    margin: "0",
    padding: "0",
    userSelect: "none",
    boxSizing: "border-box"
  },
  ".mymenu nav ul": {
    background: "#1b1b1b",
    height: "100%",
    width: "100%",
    listStyle: "none",
    paddingLeft: "0"
  },
  ".mymenu nav ul li": {
    lineHeight: "50px",
    borderTop: "1px solid rgba(255, 255, 255, 0.1)"
  },
  ".mymenu nav ul li:last-child": {
    borderBottom: "1px solid rgba(255, 255, 255, 0.05)"
  },
  ".mymenu nav ul li a": {
    position: "relative",
    color: "white",
    textDecoration: "none",
    fontSize: "14px",
    paddingLeft: ["14px", "10px"],
    fontWeight: 500,
    display: "block",
    width: "100%",
    borderLeft: "3px solid transparent",
    margin: "0",
   ...