Всплывающие меню не задвигается обратно.

<div class="hamburger">
				<span></span>
				<span></span>
				<span></span>
			</div>

При нажатии на ссылку , меню не задвигается обратно. 

window.addEventListener('DOMContentLoaded', () => {
	const menu = document.querySelector('.menu'),
	menuItem = document.querySelectorAll('.menu_item'),
	hamburger = document.querySelector('.hamburger');

	hamburger.addEventListener('click', () => {
		hamburger.classList.toggle('hamburger_active');
		menu.classList.toggle('menu_active');
	});

	menuItem.forEach(item => {
		item.addEventListener('click', () => {
			hamburger.classList.toggle('hamburger_active');
			menu.classList.toggle('menu_active');
		})
	})
})

@media (max-width: 767px)
	.menu
		position: fixed
		flex-direction: column
		justify-content: center
		align-items: center
		top: 0
		left: -100%
		width: 50%
		height: 100vh
		padding: 20px 15px
		background-color: rgba(0, 0, 0, .8)
		transition: 0.6s all
		&_active
			left: 0
		&_items
			padding-right: 0
			border: none
			margin: 10px 0
		&_link	
			font-size: 20px	
	.hamburger
		display: block
		position: absolute
		right: 10px
		top: 50%
		transform: translateY(-50%)
		width: 26px
		height: 12px
		span
			display: block
			height: 2px
			width: 100%
			background-color: #fff
			margin-bottom: 2px
			transition: 0.5s all
		&_active
			span
				margin-bottom: -2px
				&:nth-child(1)
					transform: translateY(3px) rotate(-45deg)
				&:nth-child(2)
					display: none
				&:nth-child(3)
					transform: translateY(3px) rotate(45deg)