JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
    <ul>
        <li><a href='#' onclick="alert('Something clicked!');">Something</a></li>
        <li><a href='#' onclick="alert('Something else clicked!');">Something else</a></li>
    </ul>
</div>
<ul>  
   <li class="newsfeed"><a href="#" title="Home">News Feed</a></li>  
   <li class="profile"><a href="#" title="Profile">Profile</a></li>  
   <li class="setting"><a href="#" title="Setting">Setting</a></li>  
   <li class="logout"><a href="#" title="Logout">Logout</a></li>  
   <li class="report"><a href="#" title="Report">Report Bug</a></li>
   <li class="about"><a href="#" title="About Us">About Us</a></li>  
</ul>

CSS

html,body{
    margin:0;
    padding:0;
}
ul li{
    display:inline;
    position:relative;
}

ul li ul{
    position:absolute;
    display:none;
}

#sidebar{
    background:#ccc;
    color:#fff;
    position:absolute;
    top:0;
    width:250px;
    left:-250px;
    transition:.6s;
    -webkit-transition:.6s;
    -moz-transition:.6s;
    height:100%;
}

#sidebar.active{
    left:0;
    z-index:9999;
}

#sidebar ul li{
    display:block;
}

JavaScript

var about = document.getElementsByClassName("about")[0],
    sidebar = document.getElementById("sidebar");

about.onclick = function()
{
    if (sidebar.className == "active")
    {
        sidebar.className = "";
    }else{
        sidebar.className = "active";
    }
}