JSFiddle - React, Tailwind, and code Playground

by Manoj kumar Lakshman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<div ng-app="myapp">
  <nav ng-controller="NavController as nav" ng-class="{ 'is-active': status === 'on' }" ng-init="nav.status" class="nav">
    <div class="nav__wrapper">
      <button ng-click="nav.setStatus('off')" class="nav__close">close</button>
    </div>
  </nav>

  <header ng-controller="HeaderController as header">
    <button ng-click="header.setStatus('on')">menu</button>
  </header>
</div>

SCSS

.nav {
	background-color: rgba(black, 0.5);
	width: 100vw;
	height: 100vh;
	position: fixed;
	overflow-y: auto;
  display:none;
}


.nav.is-active {
		display: block;
	}

.main-nav {
	.nav__link {
		font-size: 1.875em;
	}
}
.nav__wrapper {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
  .nav__lists {
		position: relative;
	}

.nav__close {
		@extend %btn--close;
    background: white;
    border: 0px;
		position: absolute;
		top: 5vw;
		right: 5vw;
	}
  .nav__link {
		color: white;
	}
  
  .nav__item {
		margin: 2em 0;
	}

.social-nav {
	display: flex;
	flex-direction: row;
}

JavaScript

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

app.controller('NavController', function($rootScope, $scope) {
	$rootScope.status = 'off';
	this.setStatus = function(status) {
		$rootScope.status = status;
	};
});

app.controller('HeaderController', function($rootScope, $scope) {
    this.setStatus = function(status) {
		$rootScope.status = status;
	};
});