Toggle vanilla javascript style

toggle-vanilla-javascript-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>