style.css

<style>

#sidenav {
	max-height: 100vh;
	height: 100vh;
	max-width: 70vw;
	min-width: 300px;
	overflow-x: hidden;
	overflow-y: auto;

	transition: all .3s ease-in-out;
	transform: translate(-150%, 0px);
	-webkit-transform: translate(-150%, 0px);
	/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-ms-transform: translate(-150%, 0px);

}

#sidenav.active {
	transition: all .3s ease-in-out;
	transform: translate(0%, 0px);
	-webkit-transform: translate(0%, 0px);
	-ms-transform: translate(0%, 0px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, .4);
}

.burger {
	height: 16px
}

.burger span {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 3px;
}

.pointer {
	cursor: pointer;
}

.close {
	width: 23px;
	height: 23px;
}

.cross {
	height: 23px;
	width: 2px;
	border-radius: 3px;
}

.cross.left {
	transform: rotate(45deg);
}

.cross.right {
	transform: rotate(-45deg);
}

.align-middle {
	vertical-align: middle
}
</style>