JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<header class="nav-top">
	<span class="hamburger material-icons" id="ham">menu</span>
</header>

<nav class="nav-drill">
  <ul class="nav-items nav-level-1">
    <li class="nav-item nav-expand">
			<a class="nav-link nav-expand-link" href="#">
				Menu
			</a>
			<ul class="nav-items nav-expand-content">
				<li class="nav-item">
					<a class="nav-link" href="#">
						Level 2
					</a>
				</li>
				<li class="nav-item nav-expand">
					<a class="nav-link nav-expand-link" href="#">
						Menu
					</a>
					<ul class="nav-items nav-expand-content">
						<li class="nav-item">
							<a class="nav-link" href="#">
								Level 3
							</a>
						</li>
						<li class="nav-item nav-expand">
							<a class="nav-link nav-expand-link" href="#">
								Menu
							</a>
							<ul class="nav-items nav-expand-content">
								<li class="nav-item">
									<a class="nav-link" href="#">
										Level 4
									</a>
								</li>
								<li class="nav-item nav-expand">
									<a class="nav-link nav-expand-link" href="#">
										Menu
									</a>
									<ul class="nav-items nav-expand-content">
										<li class="nav-item">
											<a class="nav-link" href="#">
												Level 5 Directory
											</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#">
												Level 5 Contact
											</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#">
												Level 5 Quick links
											</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#">
												Level 5 Launchpad
											</a>
										</li>
									</ul>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#">
										Level 4 Directory
									</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#">
										Level 4 Contact
									</a>
								</li>
								<li class="nav-item">
									<a class="nav-link"...

SCSS

@import 'https://fonts.googleapis.com/css?family=Fira+Sans:300,400';
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

$black: #252525;
$white: #fff;
$grey: #eaeaea;

$primary-color: #20b49c;
$primary-color-dark: darken( $primary-color, 10% );
$primary-color-tint-1: lighten( $primary-color, 10% );
$primary-color-tint-2: lighten( $primary-color, 20% );
$primary-color-tint-3: lighten( $primary-color, 30% );
$primary-color-tint-4: lighten( $primary-color, 40% );
$primary-color-tint-5: lighten( $primary-color, 50% );
$primary-font: "Fira Sans", Arial, sans-serif;

$link-color: $primary-color;

* { box-sizing: border-box; }
body {
	background-color: $primary-color;
	font-family: $primary-font;
	font-size: 16px;
	line-height: 1.875em;
	&::after {
		content: '';
		position: absolute;
		z-index: 99;
		background-color: rgba($primary-color-dark, 0.8);
		height: 100vh;
		width: 100vw;
		transition: 0.4s;
		opacity: 0;
		visibility: hidden;
	}
}
a {
	text-decoration: none;
}
.nav-top {
	display: flex;
	align-items: center;
	position: fixed;
	z-index: 101;
	padding: 10px 20px;
	width: 100%;
	height: 50px;
	background-color: $primary-color-dark;
	
	.hamburger {
		margin-left: auto;
		color: $white;
		cursor: pointer;
	}
}
.nav-drill {
	margin-top: 50px;
	transform: translateX(100%);
}
.nav-is-toggled {
	.nav-drill {
		transform: translateX(0);
	}
	&::after {
		opacity: 1;
		visibility: visible;
	}
}

// ---------------------------------------
// important stuff starts here

$nav-width: 250px;
$nav-padding: 0.875em 1em;
$nav-border-color: $primary-color-tint-5;
$nav-background-color: $white;
$nav-icon-font: 'Material Icons';
$nav-icon-arrow-right: 'chevron_right';
$nav-icon-arrow-left: 'chevron_left';

$nav-level-border-color: $primary-color;
$nav-level-background-color: $primary-color-tint-5;

$nav-level3-background-color: $primary-color-tint-4;
$nav-level4-background-color: $primary-color-tint-3;
$nav-level5-background-color: $primary-color-tint-2;

.nav...

JavaScript

console.clear()

const navExpand = [].slice.call(document.querySelectorAll('.nav-expand'))
const backLink = `<li class="nav-item">
	<a class="nav-link nav-back-link" href="javascript:;">
		Back
	</a>
</li>`

navExpand.forEach(item => {
	item.querySelector('.nav-expand-content').insertAdjacentHTML('afterbegin', backLink)
	item.querySelector('.nav-link').addEventListener('click', () => item.classList.add('active'))
	item.querySelector('.nav-back-link').addEventListener('click', () => item.classList.remove('active'))
})


// ---------------------------------------
// not-so-important stuff starts here

const ham = document.getElementById('ham')
ham.addEventListener('click', function() {
	document.body.classList.toggle('nav-is-toggled')
})