JSFiddle - React, Tailwind, and code Playground

by rafmaz

HTML

<div class="container" ng-app="app" ng-controller="SidebarController">
		</div>

CSS

html, body, .container {
  margin:0;
  padding: 0;
  width:100%;
  height:100%;  
}
.container{
  background-color:red;
}

JavaScript

(function() {
	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) {
						if (element[0].id == 'collapsible-ul') {
							element.removeClass('collapse-li');
							return;				
						}
						element.addClass('show');
						return;
					}
						if (element[0].id == 'collapsible-ul') {
							element.addClass('collapse-li');
							return;
						}
					element.removeClass('show');
				});
			}
		};
	});

}())