<header>
	<h1>Navigation Concept &ndash; Velocity.js</h1>
	<div class="nav-toggle" id="toggle">
	  <i class="icon"></i>
	</div>
</header>
<nav>
	<ul id="menu" class="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Support</a></li>
		<li><a href="#">Privacy Policy</a></li>
		<li><a href="#">Sitemap</a></li>
	</ul>
</nav>	

$susy: (
	container: 768px,
	columns: 12,
	guters: 0.25
);

$base-font: "Open Sans", sans-serif;

$header-bg: #607d8b;
$nav-bg: #90a4ae;
$white: #fff;
$black: #000;
$sub-bg: #cfd8dc;

$colors: (
	header-bg: rgba($header-bg, 0.9),
	heading-color: $white,
	nav-bg: rgba($nav-bg, 0.9),
	nav-color: $white,
	sub-bg: $sub-bg,
	sub-color: $black,
	sub-border: $header-bg,
	icon-color: $white
);

@function color($key) {
	@if map-has-key($colors, $key) {
		@return map-get($colors, $key);
	}

	@warn "Unkown '#{$key}' in $colors.";
	@return null;
}

html {
	font-size: 62.5%;
}

body {
	background: image('kittens-new.jpg') no-repeat top center/cover;
	font-family: $base-font;
	font-weight: 300;
	font-size: 1.6rem;
	height: 125vh; //dumb hack to avoid scrollbar jump in codepen.

}

header,
nav {
	@include container;	
}

header {
	background: color(header-bg);
	padding: 1.6rem 0;	
}

h1 {
	float: left;
	font-weight: 400;
	margin-right: gutter();
	color: color(heading-color);	
	font-size: 4.2rem;
	letter-spacing: 0.1rem;
	padding-left: gutter();
}

a {
	color: color(nav-color);
	display: block;
	padding:1.6rem;
	text-decoration: none;
}

.menu {
	perspective: 1000px;
	transform-style: preserve-3d;	
	
	li {
		background: color(nav-bg);
		display: none;
		opacity: 0;
		font-size: 2rem;
		padding: 1rem 0;
		text-align: center;
		transform: translateY(500px) translateZ(-1000px);
		transition: background 0.3s ease;
		
		&:hover {
			background: color(header-bg);
		}
	}
}

.nav-toggle {
	cursor: pointer;
	float: right;	
	height: 40px;
	margin-right: gutter();
	position: relative;
	transform: rotate(0);
	transition: 0.3s ease-in-out;
	width: 40px;
	
	&.active {
		transform: rotate(315deg);
		.icon {
			background: transparent;
			
			&:before {
				transform: translateY(0);
			}

			&:after {
				transform: translateY(0) rotate(-90deg);
			}			
		}
	}
	
	.icon,
	.icon:before,
	.icon:after {
		position: absolute;
		background: color(icon-color);
		display: block;
		height: 4px;
		width: 100%;
		transition: 0.3s ease-in-out;
	}
	
	.icon {
		transform: translateY(18px);
		
		&:before, 
		&:after {
			content: "";
			display: block;
			transform: rotate(0deg);
		}
		
		&:before {
			transform: translateY(-12px);
		}
		
		&:after {
			transform: translateY(12px);
		}
	}
}

(function($) {
	var toggle,
		menu,
		menuItem,
		isNavOpen = false,
		transformDuration = 400,
		delayM = 50;
	
	function onDocumentReady() {
		toggle = $(document.getElementById("toggle"));
		menu = $(document.getElementById("menu"));
		menuItem = menu.find("li");
		
		toggle.on("click", onToggleClick);
	}
	
	function onToggleClick(e) {
		var clicked = $(e.currentTarget);
		
		if (isNavOpen === false) {
			isNavOpen = true;
			clicked.addClass("active");
			openNav();
		} else {
			isNavOpen = false;
			clicked.removeClass("active");
			closeNav();
		}
	}
	
	function openNav() {
		var transformDelay = 0;
		
		for (var i = 0; i < menuItem.length; i++) {
			$(menuItem[i])
			.velocity({
					opacity: [1, 0],
					translateY: [0, 250],
					translateZ: [0, -500]
				}, {
					display: 'block',
					duration: transformDuration,
					delay: transformDelay,
					easing: "spring"
				});
			transformDelay += delayM;		
		}
	}
	
	function closeNav() {
		var transformDelay = 0;
		
		for (var i = menuItem.length - 1; i >= 0; i--) {
			$(menuItem[i]).velocity({
				opacity: 0,
				translateY: 250,
				translateZ: -500,
			}, {
				duration: transformDuration,
				delay: transformDelay,
				easing: "spring",
				display: 'none'
			});
			
			transformDelay += delayM;
		}
	}
	
	$(onDocumentReady);
	
})(jQuery);