title: How to target body tag to close the side Navbar clicking any where on the screen using Vue?
body: <p>I want to move the Navbar right: -500px (close the navbar) by clicking anywhere on the window. In Html, JS I can target body tag to do the same. How to do it in vue?
  I have two functions for two (open and close) button. Still I want to add additional functionality to hide the Navbar by clicking anywhere on the screen.
  My code</p>
  <pre><code>&lt;div class=&quot;chatbot-whole-wrap&quot;&gt;
      &lt;PopUpMsg class=&quot;pop-up-chat&quot; /&gt;
      &lt;div class=&quot;chat-bot-wrapper&quot;&gt;
          &lt;input id=&quot;open&quot; type=&quot;checkbox&quot; /&gt;
          &lt;img id=&quot;chat-btn&quot; alt=&quot;chat-icon&quot; src=&quot;@/assets/chat-bot-bee-icon.svg&quot; @click=&quot;openWindow()&quot; /&gt;
          &lt;div id=&quot;sidebar&quot;&gt;
              &lt;img id=&quot;chat-close-btn&quot; alt=&quot;chat-icon&quot; src=&quot;@/assets/close-icon.svg&quot; @click=&quot;closeWindow()&quot; /&gt;
              &lt;iframe class=&quot;chat-bot-iframe&quot; src=&quot;https://hggsbnjsggxvbxjkksb/&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here are two methods I have used</p>
  <pre><code>methods: {
      openWindow() {
          document.getElementById('sidebar').style.right = '0';
      },
      closeWindow() {
          document.getElementById('sidebar').style.right = '-500px';
      },
  },
  </code></pre>