navbar not closing when clicked on fabars

const navbar = document.querySelector('#navbar');
const menuBars = document.querySelector('.fa-bars');

menuBars.addEventListener('click', ()=>{
if(navbar ==='block'){
    navbar.style.display='none';
}
else{
    navbar.style.display='block';
}
});

 <section id="main-section"> 
        <div class="icon-nav">
        <i class="fas fa-bars"></i>
        </div>
        <header id="navbar">
            <div class="links">
                <a href="index.html">Home</a>
                <a href="#about">About Me</a>
                <a href="#project">Projects</a>
                <a href="#contact">Contacts</a>
            </div>
        </header>

#main-section{
    display:flex;
    flex-direction: column;
    background-color: #333435;
    width: 100%;
    height: 95vh;
}
/* icon nav */
.icon-nav{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 20px;
    margin-right: 20px;
}
.fa-bars{
    color: #3099b4;
    font-size: 28px;
}
.fa-bars:hover{
    cursor: pointer;
    color: #4f5052;
    transition: all .4s ease-in;
}
/* navbar on drop down */
#navbar{
    display: none;
    flex-direction: column;
    height: 40vh;

}
.links{
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 38px;
}
.links a{
    text-decoration: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color:#3099b4;
    padding: 5px;
}
.links a:hover{
    color: #cee3d9;
    transition: all .4s ease-in;
}