<div id="page-wrapper">
		<div id="title">Sidebar Interaction</div>
</div>


<div id="btn">
		<div id='top'></div>
		<div id='middle'></div>
		<div id='bottom'></div>
</div>
<div id="box">
		<div id="items">
				<div class="item">Item 1</div>
				<div class="item">Item 2</div>
				<div class="item">Item 3</div>
				<div class="item">Item 4</div>
				<div class="item">Item 5</div>
		</div>
</div>

$black: #343838;
$blue: #00DFFC;
$dullWhite: #f6f6f6;
$easing: cubic-bezier(.6, .05, .28, .91);
* {
	box-sizing: border-box;
}

body {
	background-color: $black;
	font-size: 16px;
}

#page-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#title {
	color: $dullWhite;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2em;
}

#btn {
	position: fixed;
	z-index: 5;
	top: 15px;
	left: 15px;
	cursor: pointer;
	transition: left 500ms $easing;
	div {
		width: 35px;
		height: 2px;
		margin-bottom: 8px;
		background-color: $blue;
		transition: transform 500ms $easing, opacity 500ms, background-color 250ms;
	}
}

#btn.active {
	left: 230px;
	div {
		background-color: $black;
	}
	#top {
		transform: translateY(10px) rotate(-135deg);
	}
	#middle {
		opacity: 0;
		transform: rotate(135deg);
	}
	#bottom {
		transform: translateY(-10px) rotate(-45deg);
	}
}

#box {
	position: fixed;
	z-index: 4;
	overflow: auto;
	top: 0px;
	left: -275px;
	width: 275px;
	opacity: 0;
	padding: 20px 0px;
	height: 100%;
	background-color: $dullWhite;
	color: $black;
	transition: all 350ms $easing;
}

#box.active {
	left: 0px;
	opacity: 1;
}

#items {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	.item {
		position: relative;
		cursor: pointer;
		font-size: 2em;
		padding: 15px 30px;
		transition: all 250ms;
		&:hover {
			padding: 15px 45px;
			background-color: transparentize($black, .8);
		}
	}
}

#btn, #btn * {
	will-change: transform;
}

#box {
	will-change: transform, opacity;
}

const sidebarBox = document.querySelector("#box"),
	sidebarBtn = document.querySelector("#btn"),
	pageWrapper = document.querySelector("#page-wrapper");

sidebarBtn.addEventListener("click", (event) => {
	sidebarBtn.classList.toggle("active");
	sidebarBox.classList.toggle("active");
});

pageWrapper.addEventListener("click", (event) => {
	if (sidebarBox.classList.contains("active")) {
		sidebarBtn.classList.remove("active");
		sidebarBox.classList.remove("active");
	}
});

window.addEventListener("keydown", (event) => {
	if (sidebarBox.classList.contains("active") && event.keyCode === 27) {
		sidebarBtn.classList.remove("active");
		sidebarBox.classList.remove("active");
	}
});