Need help closing sidebar/pull navigation menu when menu item is clicked

Question

I have a responsive website that contains a navigation slider that is closed (off-screen) by default. This includes a vertical push/pull bar that is always visible on the screen to open and close the menu. The entire navigation slider is fixed on the page with a scrollbar on the menu.

When the menu is open on smaller devices, it takes up 100% of the viewport width. To accommodate this, I also add a top margin to the body content of 100vh to push it off the bottom. When a user clicks a menu item, it should take them to the link and automatically close the menu. I'm attempting to do this with an event listener on the menu items. If clicked, it removes the active class that controls the display when the menu is open. Currently, it takes the user to the link, but does not close the menu.

I know that the event listener works (to some degree) because if I change the body to display:none instead of margin-top:vh, clicking the menu item closes the menu, but, of course, it does not take the user to the link. I am aware that this is because the body content was displayed until after the link was clicked, which is why I'm trying to handle this with margin-top instead of display.

What am I missing? I've searched for an answer to this, but I can't seem to find anything that addresses this particular issue. I am pretty inexperienced in JavaScript, so any help is greatly appreciated.

$(document).ready(function() {
  var mquery = window.matchMedia("(max-width:767.98)");
  $('#toggle-bar').on('click', function() {
    $('#sidebar').toggleClass('active');
  });
  if (mquery.matches) {
    $('.menu-item').on('click', function() {
      $('#sidebar').removeClass('active');
    });
  }
});

.sidebar {
  display: flex;
  width: 100%;
  position: fixed;
  max-height: 100vh;
  margin-left: calc(-100% + 25px);
  /*to keep .sidebar-toggle in the view*/
}

.sidebar.active {
  margin-left: 0;
}

.sidenav {
  overflow-y: scroll;
}

.sidebar-toggle {
  width: 25px;
}

.sidebar #navpush {
  display: none;
}

.sidebar.active #navpush {
  display: inline;
}

.sidebar.active #navpull {
  display: none;
}

.body-content {
  padding: 15px;
}

.sidebar.active~.body-content {
  margin-top: 100vh;
}

<div class="container body-wrapper">
  <aside class="sidebar" id="sidebar">
    <nav class="sidenav">
      <ul id="main-nav">
        <li><a href="#section1" class="menu-item">Section 1</a></li>
        <li><a href="#sect1nav" class="dropdown-toggle" data-toggle="collapse">Section 1</a>
          <ul id="sect1nav" class="collapse submenu">
            <li><a href="#section2a" class="menu-item">Section 2A</a></li>
            <li><a href="#section2b" class="menu-item">Section 2B</a></li>
          </ul>
        </li>
        <li><a href="#section3" class="menu-item">Section 3</a></li>
      </ul>
    </nav>
    <div class="toggle-bar" id="toggle-bar">
      <div id="nav-toggle">
        <span id="navpush">&laquo;</span>
        <span id="navpull">&raquo;</span>
      </div>
    </div>
  </aside>
  <div class="container body-content">
    <div id="section1">
      <h2>Section 1 Title</h2>
      <div>
        <!-- Content -->
      </div>
    </div>
    <div id="section2">
      <h2>Section 2 Title</h2>
      <div id="section2a">
        <h3>Section 2A Title</h3>
        <div>
          <!-- Content -->
        </div>
      </div>
      <div id="section2b">
        <h3>Section 2B Title</h3>
        <div>
          <!-- Content -->
        </div>
      </div>
    </div>
    <div id="section3">
      <h2>Section 2 Title</h2>
      <div>
        <!-- Content -->
      </div>
    </div>
  </div>
</div>

Answer 1

The issue is caused by lack of units in the media query:

Fixed code (note the addition of "px" at the end):

var mquery = window.matchMedia("(max-width:767.98px)");

Pre-edit: Your HTML markup does not contain elements with ID "sidebar" (#sidebar) or "toggle-bar" (#toggle-bar).