JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<header class="Header" role="banner">
    <div class="GlobalLogo"></div>
    <button class="GlobalNavToggle js-globalNavToggle" type="button">Toggle navigation</button>
    <nav class="GlobalNav">
        <!--<h2 class="u-srOnly">Main Menu</h2>-->
        <ul class="GlobalNav_list">
            <li class="GlobalNav_item">
                <a class="GlobalNav_link" href="#">Top level 1</a>
            </li>
            <li class="GlobalNav_item">
                <a class="GlobalNav_link" href="#">Top level 2</a>
            </li>
            <li class="GlobalNav_item">
                <a class="GlobalNav_link" href="#">Top level 3</a>
            </li>
            <li class="GlobalNav_item">
                <a class="GlobalNav_link" href="#">Top level 4</a>
            </li>
            <li class="GlobalNav_item">
                <a class="GlobalNav_link" href="#">Top level 5</a>
            </li>
        </ul>
    </nav>
</header>
<div class="Main clearfix" role="Main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut magna erat. Vivamus auctor, orci eu ornare volutpat, turpis lectus egestas nulla, semper ultrices magna sapien porttitor mauris. Donec at mi aliquam, accumsan nunc id, dignissim nulla. Nunc ac orci est. Vivamus vitae metus non leo fringilla sagittis convallis eu nibh. Proin non libero in diam sodales consectetur sed nec purus. Aenean interdum dolor risus, id auctor quam commodo eget. In hac habitasse platea dictumst. Mauris aliquam porta odio ut vulputate. Ut massa mi, lacinia in massa in, posuere dignissim nulla. Etiam ornare venenatis varius. Nulla id dignissim nisi, at mollis odio. Proin massa purus, facilisis id justo quis, consectetur egestas urna.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut magna erat. Vivamus auctor, orci eu ornare volutpat, turpis lectus egestas nulla, semper ultrices magna sapien porttitor mauris. Donec at mi aliquam, accumsan nunc id, dignissim nulla. Nunc ac orci...

SCSS

body {
	margin: 0;
	.isActiveGlobalNav & {
		overflow: hidden;
	}
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.Container {
	max-width: 900px;
}

.Main {
	clear: both;
	margin-top: 30px;
}

.GlobalLogo {
	float: left;
	margin-right: 20px;
	background-size: 100%;
	background-image: url('http://placehold.it/100x35');
	background-repeat: no-repeat;
	width: 100px;
	height: 35px;
}

.GlobalNav {
	clear: both;
	@media only screen and (max-width : 600px) {
		width: 70%;
		transform: translate3d(-100%, 0, 0);
		position: absolute;
		background: rgba(0,0,0,.9);
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		transition: transform .25s ease-in;
		
		.isActiveGlobalNav & {
			transform: translate3d(0, 0, 0);
		}
	}
	@media only screen and (min-width : 601px) {
		clear: none;
		float: left;
	}
}
.GlobalNav_list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.GlobalNav_item {
	@media only screen and (min-width : 601px) {
		float: left;
	}
}
.GlobalNav_link {
	padding: 10px;
	display: block;
	color: white;
	text-decoration: none;
	@media only screen and (min-width : 601px) {
		color: black;
	}
}

.GlobalNavToggle {
	float: right;
	margin-top: 7px;
    line-height: 20px;
    background: yellow;
    border: none;
    cursor: pointer;
	@media only screen and (min-width : 601px) {
		display: none;
	}
}

JavaScript

var navigation = function(){

	var $html = $('html'),
		//$globalNav = $('GlobalNav'),
    	$globalNavToggle = $('.js-globalNavToggle');

	$globalNavToggle.on('touchstart click', function(){

		$html.toggleClass('isActiveGlobalNav');

	});

};

navigation();