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');
            });
        }
    };
});