title: How to show/hide a sidebar based on a button press and screen size?
body: <p>I built a custom nav sidebar for my panel. Inside this sidebar i have few menu options. When my screen size is small, i want all menu options to dissapear, and show only one especific menu item. This especific menu option is used like a button that you can use to make all itens appear again.</p>
  
  <p>The menu:</p>
  
  <p><a href="https://i.stack.imgur.com/7yFz8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7yFz8.png" alt="enter image description here"></a></p>
  
  <p>When my screen is small it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/bD2mF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bD2mF.png" alt="enter image description here"></a></p>
  
  <p>For my sidebar menu i use the code bellow:</p>
  
  <pre><code>&lt;div class="card-body"&gt;
  
  &lt;a id="shmenulinks" class="nav-link" style="border-radius: 0.25rem; cursor: pointer; width: 100%;" data-toggle="collapse" aria-expanded="true" aria-controls="menulinks" data-target="#menulinks"&gt;&lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt; Open/Close menu&lt;/a&gt;
  
  &lt;div id="menulinks" class="nav nav-pills" &gt;
  &lt;a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "&gt;&lt;i class="fa fa-home" aria-hidden="true"&gt;&lt;/i&gt; Home&lt;/a&gt;
  &lt;a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "&gt;&lt;i class="fa fa-line-chart" aria-hidden="true"&gt;&lt;/i&gt; Projects&lt;/a&gt;
  &lt;a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "&gt;&lt;i class="fa fa-suitcase" aria-hidden="true"&gt;&lt;/i&gt; Jobs&lt;/a&gt;
  &lt;a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "&gt;&lt;i class="fa fa-sign-out" aria-hidden="true"&gt;&lt;/i&gt; Logout&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>To make the menu options appear/disappear i use this CSS logic bellow:</p>
  
  <pre><code>@media screen and (min-width: 992px) {
  
  #shmenulinks {
  display: none;
  }
  #menulinks {
  display: block;
  }
  }
  
  @media screen and (max-width: 991px) {
  #shmenulinks {
  display: block;
  }
  #menulinks {
  display: none;
  }
  
  }
  </code></pre>
  
  <p><strong>My problem is when my screen is small and my menu is collapsed, the button that can be used to make the menu options appear/disappear doesn't work.</strong></p>
  
  <p>The CODEPEN:
  <a href="https://codepen.io/neyelson-alves/pen/ZEGbdJB" rel="nofollow noreferrer">https://codepen.io/neyelson-alves/pen/ZEGbdJB</a></p>
  
  <p>What should i do?</p>