Create burger menu with jQuery

Question

I’m trying to create a burger menu with jQuery, but with the following problem: menu is created according to the width established in the media query and when I click on one of the links in the navigation bar it disappears. However, if I return the site to normal size, the navigation bar is no longer visible, only the logo, so the navigation menu appear again I have to give refresh. How can I fix this?

$('.mobile-menu').on('click', function() {
  $('.navbar').slideToggle();
});

$('.navbar').click(function() {
  $(this).hide();
});

.mobile-menu {
  color: white;
  position: absolute;
  right: 20px;
  display: none;
}

@media only screen and (max-width: 768px) {
  .mobile-menu {
    display: block;
  }
  .navbar {
    display: none;
    flex-direction: column;
    background: var(--secondary);
    width: 11rem;
    position: absolute;
    right: 0;
    top: 60px;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<header>
  <div class="logo">
    <i class="fas fa-code fa-3x"></i>
  </div>

  <div class="mobile-menu"><i class="fa fa-bars fa-2x"></i></div>

  <nav class="navbar">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#projects">Projetos</a></li>
      <li><a href="#contact">Contato</a></li>
    </ul>
  </nav>
</header>

Answer 1

Put a media query so that the navbar changes to display:block