Мобильная навигация

const menu = document.querySelector('.menu')
const navLink = document.querySelector('.nav-link')
const menuLink = document.querySelectorAll('.menu-link')

menuLink.forEach(elem => 
	elem.addEventListener('click', event => {
	navLink.classList.contains('fa-bars')? navLink.classList.toggle('fa-times'): null
	menu.classList.remove('active')
	}) 
 )

navLink.addEventListener('click', function(event){
	this.classList.contains('fa-bars')? this.classList.toggle('fa-times'): null
	menu.classList.toggle('active')
})

.nav-link {
    position: fixed;
    right: 40px;
    top: 20px;
    cursor: pointer;
    font-size: 26px;
    z-index: 3;
}

.menu {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(000,000,000, .8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    opacity: 0;
    transition: all .45s;
}

.menu.active {
    opacity: 1;
    z-index: 2;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
    <div class=""><i class="fas fa-bars nav-link"></i></div>
    <div class="menu">
        <ul>
            <li><a class="menu-link" href="#">Home</a></li>
            <li><a class="menu-link" href="#">Home</a></li>
            <li><a class="menu-link" href="#">Home</a></li>
            <li><a class="menu-link" href="#">Home</a></li>
        </ul>
    </div>