<div id="container">
	<aside id="menuOverlay">
		<i id="hamburger" class="fa fa-bars"></i>	
		<nav id="menu">
			<li><a data-screen-name="Menu">Menu</a></li>
			<li><a data-screen-name="Awesome">Awesome</a></li>
			<li><a data-screen-name="Concept">Concept</a></li>
		</nav>
	</aside>
	<main id="content">
		<section class="content">
			<h3>Menu Concept</h3>
		</section>
		<section class="content">
			<h3>So awesome</h3>
		</section>
		<section class="content">
			<h3>it makes you Cry</h3>
		</section>
	</main>
</div>

// Settings
$screen-size: 340px;
$screen-quantity: 3;
$background-size: $screen-size * ($screen-quantity + 1);
$cubic: cubic-bezier(0.73, 0.01, 0, 1.11);
$duration: 300ms;

// Styling
$pink: rgba(237, 8, 117, 1);
$white: rgba(255,255,255,1);
$border-radius: 8px;
$menu-padding: 22px 28px;
$box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.2);
$box-shadow-open: 0 20px 40px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.2), 0 0 0 8px #ffffff inset;
$linear: linear-gradient(135deg, rgba(2, 250, 70, 1) -1.7%,	rgba(2, 238, 250, 1) 21.1%,	rgba(174, 8, 237, 1) 46%,	rgba(237, 8, 117, 1) 64.2%,	rgba(237, 8, 117, 1) 81%,	rgba(248, 136, 0, 1) 97.2%);

// Menu items names
$menu-2: 'Awesome';
$menu-3: 'Concept';

// Structure
*, *:before, *:after {
	box-sizing: border-box;
	outline: none;
}

html,
body {
	height: 100%;
	font-family: "Arvo", serif;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	font-size: 23px;
	color: #000000;
	
	#menu {
			line-height: 40px;
	}
	
	a {
		cursor: pointer;
	}
	
	h3 {
		color: $white;
		font-family: "Kaushan Script", cursive;
		font-size: 31px;
	}
}

// Container
#container {
	width: $screen-size;
	height: $screen-size;
	background-image: $linear;
	background-size: $background-size;
	position: relative;
	overflow: hidden;
	border-radius: $border-radius;
	box-shadow: $box-shadow;
	transition: background $duration, box-shadow $duration;

	&.opened {
		box-shadow: $box-shadow-open;
	}

	// Change screens
	&[data-screen=#{$menu-2}] {
		$shift: -$screen-size;
		background-position: $shift;

		#content {
			transform: translateX($shift);
		}
	}
	&[data-screen=#{$menu-3}] {
		$shift: -$screen-size * 2;
		background-position: $shift;

		#content {
			transform: translateX($shift);
		}
	}
}

// Menu overlay
#menuOverlay {
	background: $white;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	padding: $menu-padding;
	transition: clip-path $duration, background $duration;
	clip-path: circle(5% at 300px 39px);

	&:hover {
		clip-path: circle(6% at 300px 39px);
	}

	// When menu is open
	.opened & {
		clip-path: circle(100% at 300px 100px);
		background: rgba(255, 255, 255, 1);

		#hamburger {
			transform: rotateZ(-90deg);
		}
	}

	/* Hamburger Menu Icon */
	#hamburger {
		position: absolute;
		top: 21px;
		right: 23px;
		transition: transform $duration linear;
		padding: 10px;
		cursor: pointer;
		font-size: 16px;
	}
}

// Menu items
#menu {
	li {
		list-style: none;

		a {
			transition: color 115ms ease-in-out;
			position: relative;

			/* Text overlay & Bottom border */
			&:before,
			&:after {
				position: absolute;
				left: 0;
				width: 0;
				content: "";
				transition: width $duration;
			}

			/* Text overlay */
			&:after {
				content: attr(data-screen-name);
				bottom: -6px;
				color: $pink;
				overflow: hidden;
				transition-duration: .6s;
			}

			/* Bottom border */
			&:before {
				bottom: -2px;
				height: 1px;
				background: $pink;
			}

			&.active,
			&:hover {
				color: $white;
				/* Text overlay & Bottom border */
				&:after {
					width: 100%;
				}
			}
			
			&:hover {
				/* Text overlay */
				&:before{
					width: 100%;
				}
			}
		}
	}
}

// Screen container
#content {
	width: $screen-size * $screen-quantity;
	height: $screen-size;
	display: flex;// To make every block inline
	transition: transform $duration $cubic;

	// Screen element
	.content {
		width: $screen-size;
		display: flex;
		justify-content: center;
		align-items: center;
		
		// Transition for the title
		h3 {
			transition: letter-spacing $duration;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
			cursor: pointer;

			&:hover {
				letter-spacing: 2px;
			}
		}
	}
}

/* Toggle Menu */
hamburger.addEventListener('click', (event) => {
	// Defence from over clicking
	event.target.style.pointerEvents = 'none'
	setTimeout(()=> {
		event.target.style.pointerEvents = 'all'
	}, 300);

	// Open menu screen
	container.classList.toggle('opened');
});

/* Bounus - Change screen */
const menuItems = menu.querySelectorAll('[data-screen-name]:not(.active)');
menuItems.forEach(menuItem => {
	menuItem.addEventListener('click', (event) => {
		// Close menu
		container.classList.remove('opened');
		
		// Show selected screen
		if(menu.querySelector('.active')) { menu.querySelector('.active').classList.remove('active') };
		event.target.classList.add('active');
		setTimeout(()=> {
			container.dataset.screen = event.target.dataset.screenName;
		}, 180);
	})
})