JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<button class="_menu_toggler">Open menu</button>

<nav>
	<button class="_menu_toggler">Close</button>
	<ul>
		<li>Loopster</li>
		<li>Loopster</li>
		<li>Loopster</li>
		<li>Loopster</li>
		<li>Loopster</li>
	</ul>
</nav>

SCSS

nav {
	width: 320px;
	
	transform: translateX(-100%);
	transition: transform 500ms linear;
	
	&.active {
		transform: translateX(0);
	}
}

JavaScript

const nav = document.querySelector('nav');

const toglers =  document.querySelectorAll('._menu_toggler');

toglers.forEach((toggler) => {
	toggler.addEventListener('click', navToggle);
});

function navToggle() {
	if (nav.classList.contains('active')) {
		nav.classList.remove('active');
	} else {
		nav.classList.add('active');
	}
}