移动导航栏在桌面上消失

Question

我正在尝试制作一个在桌面上是静态的而在移动设备上折叠的侧边栏导航。问题是当我按下移动设备上的切换按钮时，导航栏保持切换状态并且在桌面上不可见。这是我的代码如下：

HTML

<div class="d-flex" id="wrapper">
    <div class="bg-light" id="sidebar-wrapper">
      <div class="sidebar-heading"><img class="heading-img" src="./images/logo.png"></div>
      <div class="list-group list-group-flush nav-group nav-items">
        <a href="index.html" class="list-group-item list-group-item-action bg-light nav-single"> <img class="nav-img" src="./images/home.svg">Home</a>
        <a href="#" class="list-group-item list-group-item-action bg-light nav-single"> <img class="nav-img" src="./images/settings.svg">Settings</a>
        <a href="#" class="list-group-item list-group-item-action bg-light nav-single"><img class="nav-img" src="./images/exit.svg">Exit</a>
      </div>
    </div>

CSS

#menu-toggle{
  display: none;
}

@media (max-width: 768px){
  #menu-toggle{
    display: unset;
  }
}

JS

  <script>
    $("#menu-toggle").click(function(e) {
        $("#wrapper").toggleClass("toggled");
    });
  </script>

有没有办法检测它的大小并删除“切换”文本