JSFiddle - React, Tailwind, and code Playground

by Ray Mak

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="main-wrapper" style="height: 100%;">
  <div class="left-nav-layout">
    <a href="~/">
      <button type="button" class="btn btn-default dashboard-head"><span class="glyphicon glyphicon-home" aria-hidden="true" style="margin-right: 10px"></span><span>Dashboard</span></button>
    </a>
    <div class="user-message text-center">
      <span class="glyphicon glyphicon-user" aria-hidden="true" style="margin-right: 10px"></span><span>Welcome Guest</span>
    </div>
    <div id="Admin-Nav">
      <ul>
        <li><a href="">Home</a></li>
        <li>
          <a href="#">Servers <span class="glyphicon glyphicon glyphicon-hand-right pull-right" aria-hidden="true"></span></a>
          <ul>
            <li><a href="#">All Servers</a></li>
            <li><a asp-controller="servers" asp-action="create">Add</a></li>
            <li>
              <a href="#">Resource Group <span class="glyphicon glyphicon glyphicon-hand-right pull-right" aria-hidden="true"></span></a>
              <ul>
                <li><a href="#">All Resources</a></li>
                <li><a href="#">Add Resource</a></li>
              </ul>
            </li>
            <li>
              <a href="#">Gadgets <span class="glyphicon glyphicon glyphicon-hand-right pull-right" aria-hidden="true"></span></a>
              <ul>
                <li><a href="#">Gadget 1</a></li>
                <li><a href="#">Gadget 2</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </div>
  <div class="right-side-layout">
    <div class="top-header">
      <button type="button"...

CSS

html,
body {
  height: 100% !important;
  margin: 0;
  padding: 0;
  border: 0;
}

.left-nav-layout {
  background-color: #30333a;
  height: 100%;
  width: 15%;
  /*position: absolute;*/
  float: left;
  color: white;
}

.right-side-layout {
  background-color: #e9e9e9;
  height: 100%;
  width: 85%;
  /*position: absolute;*/
  float: left;
}

.top-header {
  width: 100%;
  height: 50px;
  background-color: white;
}

.nav-toggle {
  width: 55px;
}

.dashboard-head,
.nav-toggle {
  border-radius: 0px;
  height: 50px;
}

.dashboard-head {
  width: 100%;
  background-color: #30333a;
  color: white;
  border: none;
}

.breadcrumb {
  background-color: #e9e9e9 !important;
}

.user-message {
  height: 50px;
  background-color: #262a39;
  border-bottom: 3px solid #4f5258;
}

.user-message span {
  padding-top: 6%;
}


/*VERTICAL MENU*/

#Admin-Nav {
  position: relative;
}


/* ALL UL */

#Admin-Nav ul {
  list-style: none;
  padding: 0;
}


/* ALL LI */

#Admin-Nav li {
  position: relative;
}


/* ALL A */

#Admin-Nav a {
  display: block;
  color: #eee;
  text-decoration: none;
  padding: 10px 15px;
  background: #667;
  transition: 0.2s;
}


/* ALL A HOVER */

#Admin-Nav li:hover > a {
  background: #778;
}


/* INNER UL HIDE */

#Admin-Nav ul ul {
  position: absolute;
  left: 0%;
  top: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: transform 0.2s;
  transform: translateX(50px);
}


/* INNER UL SHOW */

#Admin-Nav li:hover > ul {
  left: 100%;
  visibility: visible;
  opacity: 1;
  transform: translateX(0px);
}

JavaScript

// Write your Javascript code.

$('.nav-toggle').on('click', function() {
  $('.left-nav-layout').toggle('slide', {
    direction: 'left'
  }, '-200px', 500);
});