JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div id="left-panel" class="">
  <div class="wrapper">
    <a href="javascript:void(0)" class="closebtn light-color" onclick="closeNav()">&times;</a>
    <header>
      <h1 id="logo">
        <a href="#">
          <img src="http://www.stickpng.com/assets/images/584fca5b6a5ae41a83ddee83.png" alt="logo">
          <span class="light-color">Flatkit</span></a>
      </h1>
      <div id="user">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/War_Machine_Japan_Premiere_Red_Carpet-_Brad_Pitt_%2838338138066%29_%28cropped%29.jpg/170px-War_Machine_Japan_Premiere_Red_Carpet-_Brad_Pitt_%2838338138066%29_%28cropped%29.jpg" alt="profile">
        <span id="user-name" class="light-color">Brad Pitt</span>
        <span id="user-role" class="dark-color">Administrator</span>
      </div>
    </header>
    <div class="clearfix"></div>
    <nav>
      <ul class="menu-categories"><span class="dark-color">Main</span>
        <li>
          <a href="#" class="lighter-color">
            <i class="fa fa-tachometer" aria-hidden="true"></i>
            Dashboard</a>
        </li>
        <li class="dropdown-el">
          <a href="#" class="lighter-color badge apps-badge" data-badge="5">
            <i class="fa fa-th-large" aria-hidden="true"></i>
            Apps<span class="arrow-down">&#9660;</span>
          </a>

          <ul class="dropdown-menu">
            <li><a href="#" class="lighter-color">Subnav Item</a></li>
            <li><a href="#" class="lighter-color">Subnav Item</a></li>
            <li><a href="#" class="lighter-color">Subnav Item</a></li>
          </ul>
        </li>
        <li class="dropdown-el"><a href="#" class="lighter-color">
            <i class="fa fa-th" aria-hidden="true"></i>
            Layouts<span class="arrow-down">&#9660;</span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#" class="lighter-color">Subnav Item</a></li>
            <li><a href="#" class="lighter-color">Subnav...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    font-family: 'Roboto', sans-serif;
}
.text-lightgray{
    color: #f3f3f3;
}
.text-gray{
    color: #aaaaaa;
}
.closebtn{
    position: absolute;
    right:10px;
    top:10px;
    font-size: 30px;
    font-weight: bold;
}
#main{
    transition: margin-left .2s;
}
a{
    text-decoration: none;
}
.light-color{
    color: #ECEFF1;
}
.dark-color{
    color: #455A64;
}
.lighter-color{
    color: #78909C;
}
#left-panel{
    background: #263238;
    /* width: 240px; */
    padding: 0; 
    /* overflow: hidden; */
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: -50px;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.2s;
    /* padding-top: 60px;  */
    /* min-height: 100%; */
    height: 150%;
    padding-bottom:350px;
}
.wrapper{
    padding:20px;
    padding-left:60px;
}
ul{
    list-style-type: none;
}
#logo img{
    width: 30px;
    height: 30px;
    float: left;;
    margin-top: 5px;
}
#logo h1{
   
}
#logo a{
}
#logo a span{
    margin-left: 20px;
    vertical-align: middle;
    margin-top: -5px;
}
#user{
    margin-top:30px;
}
#user img{
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 20px;
    filter: grayscale(100%) contrast(200%);
}
#user span{
    font-size: 12px;
    display: block;
    padding-top:5px;
    margin-top:5px;
}
.clearfix{
    clear:both;
}
nav{
    margin-top:40px;
}
nav li{
    margin:5px;
    /* z-index: 5; */
}
nav li a{
    width:100%;
    display: inline-block;
    padding:10px;
    border-radius: 4px;
    transition: 0.3s;
}
nav li a:hover{
    background: #0CC2A9;
    color: #ECEFF1;
}
nav li a i{
    margin-right:20px;
}
nav ul:after{
    clear: both;
}

.dropdown-el{
    position: relative;

}
.dropdown-menu{
    position:absolute;
    /* opacity: 0; */
    background: #37474F;
    color: #ECEFF1;
    transition: 0.4s;
    right:0;
   ...

JavaScript

document.getElementById("left-panel").style.width = "300px";
                    document.getElementById("main").style.marginLeft = "250px"; 
            function openNav() {
                if (document.getElementById("main").style.marginLeft!='250px'){
                    document.getElementById("left-panel").style.width = "300px";
                    document.getElementById("main").style.marginLeft = "250px"; 
                }
                else{
                    closeNav();
                }
            }
            
            function closeNav() {
                document.getElementById("left-panel").style.width = "0";
                document.getElementById("main").style.marginLeft= "0";
            }
            var x =document.querySelectorAll('.dropdown-el');
            console.log(x);