JSFiddle - React, Tailwind, and code Playground

by Manjula Dhamodharan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<html ng-app="app">

  <body>
    <div class="navigation " ng-controller="SidebarController" sidebar-directive="state">
      <a href="#" id="verticalMenu" ng-click="toggleState()">Menu</a>

      <ul class="menuExpansion">
        <li class="menuEx"><a href="#">Link1</a></li>
        <li class="menuEx"><a href="#">Link2</a></li>
        <li class="menuEx"><a href="#">Link3</a></li>
      </ul>

    </div>


  </body>

</html>

CSS

body {
  font-family: raleway;
}

.navigation {
  left: -160px;
  position: absolute;
}

#verticalMenu {
  font-size: 28px;
  position: absolute;
  left: 160px;
  color: #fff;
  background: #4a90e2;
  text-decoration: none;
  padding: 20px;
}

.menuEx a {
  background-color: #444;
  color: white;
  line-height: 2em;
  text-decoration: none;
  padding: 10px 30px;
  width: 100px;
  display: block
}

.menuEx a:hover {
  background-color: #222;
}

.menuExpansion {
  list-style: none;
  margin: 0;
  padding: 0
}

.show {
  left: 0
}

JavaScript

var app = angular.module('app', []);

app.controller('SidebarController', function($scope) {

  $scope.state = false;

  $scope.toggleState = function() {
    $scope.state = !$scope.state;
  };

});

app.directive('sidebarDirective', function() {
  return {
    link: function(scope, element, attr) {
      scope.$watch(attr.sidebarDirective, function(newVal) {
        if (newVal) {
          element.addClass('show');
          return;
        }
        element.removeClass('show');
      });
    }
  };
});