JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<body class="menu">
<header>
	<a href="#" class="menu-toggle">toggle</a>
	<nav class="main-nav">
		<ul>
			<li>Link</li>
			<li>Link</li>
			<li>Link</li>
			<li>Link</li>
			<li>Link</li>
		</ul>
	</nav>
	<nav class="menu-side mobile">
		<ul>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
	</nav>
</header>
</body>

CSS

ul {
		list-style: none;
		color: #000;
	}


	.main-nav ul li {
		display: inline;
		padding-left: 28px;
		float: right;
	}

	.menu-toggle {
		float: right;
    right: 0;
	}

		.menu-side {
		background-color: #333;
		border-right: 1px solid black;
		color: white;
		position: fixed;
		top: 0;
		right: -231px;
		width: 210px;
		height: 100%;
		padding: 10px;	
	}

	.menu {
		overflow-x: hidden;
		position: relative;
		right: 0;
	}

	.menu-open {
		right: 231px;
	}

	.menu-open .menu-side {
		right: 0;
	}

	.menu-side,
	.menu {
		-webkit-transition: right 0.2s ease;
		-moz-transition: right 0.2s ease;
		transition: right 0.2s ease;
	}


			@media (min-width: 700px)  {
			.menu-side, .menu-toggle {
				display: none;
				}

	}

				@media (max-width: 700px)  {
			.main-nav {
				display: none;
				}

	}

JavaScript

(function() {
            var body = $('body');
            $('.menu-toggle').bind('click', function(){
                body.toggleClass('menu-open');
                    return false;

            });

         $('.menu-side li').on('click', function (){
body.toggleClass('menu-open');
return false;
         $(".menu-side").animate({ "right": "-100%" }, "2000" );
    });

         })();