Jquery Добавить и удалить класс

$('#navbar').on('click',function(){
  $('#navbar').removeClass('navbar');
  $('#navbar').addClass('ShowMenu');
})

.navbar{
    position: fixed;
    top: 50%;
    bottom: 50%;
    z-index: 3;
    background-color: #e5e5e5;
    border-radius: 0px 20px 20px 0;
    width: 10px;
    height: 100px;
    font-size: 0px;
    


}
.navbar:hover{
    box-shadow: 1px 1px 10px #e5e5e5;
    cursor: pointer;
    width: 20px;
}

.ShowMenu{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: 400px;
    border-radius: 20px 20px 20px 20px;
    background-color: #e5e5e5;
    font-size: 20px;

}
.ShowMenu .list-element{
    
    list-style: none;
    display: block;
    padding-left: 100px;
    padding-top: 30px;
    font-size: 30px;
    color: #FCA311;
    text-shadow: 0px 2px 5px black;
    
}

.ShowMenu .list-element:hover{
    font-size: 35px;
    cursor: pointer;
}
.ShowMenu .close{
    cursor: pointer;
    margin-top: 20px;
    margin-left: 350px;
    width: 1em;
    height: 1em;
    background-color: red;
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);


}

.ShowMenu .close:hover{
    width: 1.2em;
    height: 1.2em;
}
.ShowMenu .menu_title{
    margin-top: -20px;
    font-size: 30px;
    color: #0A1428;
    margin-bottom: -30px;
    text-align: center;   
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar" id="navbar">
  <div class="close"></div>
  <div class="menu_title">Menu</div>
  <ul class="navbar_list">
    <li class="list-element">Introduction Video</li>
    <li class="list-element">About us</li>
    <li class="list-element">Our Projects</li>
    <li class="list-element">Our Services</li>
    <li class="list-element">Contact with us</li>
  </ul>
</div>