JSFiddle - React, Tailwind, and code Playground

HTML

<button id="nav-button" type="button">Открыть меню</button>
		<nav>
			<a href="#" class="current">Раздел</a>
			<a href="#">Раздел</a>
			<a href="#">Раздел</a>
			<a href="#">Раздел</a>
		</nav>

CSS

#nav-button{
		display: block;
		position: absolute;
		top: 5%;
		left: 5%;
		outline: none;
    cursor: pointer;
	}
	nav{
		position: fixed;
		height: 100%;
		width: 0;
		margin: 0;
		left: 0;
		top: 0;
		background-color: rgba(73,66,72, 0.98);
		overflow-x: hidden;
		z-index: 1;
		-webkit-transition: 0.35s all ease;
		transition: 0.35s all ease;
	}
	nav:after{
		position: absolute;
		top: 1em;
		right: 1em;
		content: "\2716";
		font-size: 1.5rem;
		font-weight: 700;
		color: #8fadcc;
		display: block;
	}
	nav a:first-child{
		margin-top: 4em;
	}
	nav a{
		display: inline-block;
		width: 100%;
		font-size: 1.1rem;
		font-weight: 700;
		text-align: center;
		color: #8fadcc;
	}
	nav a:hover,
	nav a.current{
		color: #ff8b7a;
	}

JavaScript

//MOBILE NAVIGATION
var mobileButton = document.getElementById("nav-button");

mobileButton.addEventListener('click', function () {
    var nav = document.querySelector("nav");
    nav.style.width = "100%";

    window.onclick = function(event) {
        if (event.target == nav) {
            nav.style.width = "0";
        }
    }
});