JSFiddle - React, Tailwind, and code Playground

by nirus

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div ng-controller="a">

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <button class="navbar-brand btn btn-default btn-navbar" push-nav>Toggle Nav</button>
  </nav>
  
  <div class="push-nav">
    <h2>Menu</h2>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quo illum aperiam fugit esse dolores possimus, quas voluptatum delectus magnam beatae pariatur, soluta libero ipsum tempore a iste, debitis.
  <button collapse-menu>
  Collapse
  </button>
  </div>

  <h1 style="color: white; padding: 20px; padding-top: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident quo illum aperiam fugit esse dolores possimus, quas voluptatum delectus magnam beatae pariatur, soluta libero ipsum tempore a iste, debitis.</h1>

</div>

SCSS

body {
	right: 0;
	margin: 0;
  	position: relative;
	-webkit-backface-visibility: hidden;
  background-color: black;
}

.push-nav {
  padding: 20px;
  background: gray;
  color: #fff;
  width: 200px;
	top: 0;
  //right: 0;
	right: -120px; /* start off behind the scenes */
	height: 100%;
	position: fixed;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
  z-index: 10000;
}

button{
    width: 100px;
    color: black;
}
}

JavaScript

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

    app.directive('pushNav', function() {
        return {
            restrict: 'EA',
            link: function(scope, element, attrs) {

                element.on('click', function(event) {

                    element.toggleClass('is-open');
                    
                    if (element.hasClass('is-open')) {

                        console.log('is-open');
												element.text('is open');
                        $('body').addClass('is-open');
                        $('body').animate({
                            right: "184"
                        }, 200);
                        $('.push-nav').animate({
                            right: "0"
                        }, 200);

                        console.log('has class');

                    } else {
                        console.log('is-close');
												element.text('is close');
                        $('body').removeClass('is-open');
                        $('body').animate({
                            right: "0"
                        }, 200);
                        $('.push-nav').animate({
                            right: "-184"
                        }, 200);
                    }

                });
            }
        };
    });
    
    app.directive("collapseMenu", function(){
    	return {
      	restrict:'EA',
        link:function(scope, elm, attr){
        	elm.on('click', function(){
          	$('button[push-nav]').trigger('click');
          })
        }
      };
    
    });

app.controller('a', function($scope) {
console.log($scope);
});