change font awesome menu toggler icon to close icon

Question

I need to change the icon of my menu to close icon on click to close my aside menu.

Iv tried to play around with the add and remove class functions but couldnt work.

$(document).ready(function(){
    $('#menu').click(function(){
        $('.aside').toggleClass('toggle');
    });

    $(window).on('scroll load',function(){

        $('#menu').removeClass('fa-times');
        $('.aside').removeClass('toggle');

        if($(window).scrollTop() > 0){
            $('.top').show();
        }else{
            $('.top').hide();
        }
    });
});

#menu{
    position: fixed;
    top: 30px; right: 30px;
    background: #333;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    border-radius: 10px;
    padding: 10px;
    z-index: 1000;
    display: none;
}

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/fontawesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js"></script>

<div id="menu" class="fas fa-bars"></div>

Answer 1

$(document).ready(function() {
    $('#menu').click(function() {
        $('.aside').toggleClass('toggle');
        if ($('#menu').hasClass('fa-bars')) {
            $('#menu').removeClass('fa-bars').addClass('fa-times').text('');
        } else {
            $('#menu').removeClass('fa-times').addClass('fa-bars').text('');
        }
    });

});

#menu{
  position: fixed;
  top: 30px; right: 30px;
  background: #333;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  width:20px;
  text-align:center;
}

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/fontawesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js"></script>

<div id="menu" class="fas fa-bars"></div>