title: Make toggleable sidebar dissapear when a child link is clicked
body: <p>I made a toggle sidebar using plain javascript and it has a link to a part on the same page but when i click it, the  sidebar still over shadows the target data.how can I remove it?</p>
  <pre><code>&lt;div class=&quot;container sidebar&quot;&gt;
   &lt;h4&gt;Quick Links&lt;/h4&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Log in &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;register&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;services&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About us&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;h4&gt;Contacts&lt;/h4&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;tel:+256751224583&quot;&gt;&lt;i class=&quot;fa fa-phone&quot;&gt;&lt;/i&gt;+256 751224583&lt;/a&gt;
    &lt;li&gt;&lt;a href=&quot;#contacts&quot;&gt;&lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt;alfredkhan@gmail.com&lt;/a&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fab fa-facebook&quot;&gt;&lt;/i&gt;alfredkhan&lt;/a&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JavaScript</p>
  <pre><code>document.querySelector('.fa-bars').addEventListener('click',toggle);
   function toggle() {
  const sidebar=document.querySelector('.sidebar');
  if(sidebar.style.display==='none') {
  sidebar.style.display='block';
  } else {
  sidebar.style.display='none';
  }
  };
  </code></pre>