title: How do I make the hoverable dropdown close when navigating to a differerent link in Bulma?
body: <p><a href="https://codesandbox.io/s/admiring-perlman-b014x" rel="nofollow noreferrer">HERE is a SANDBOX with the issue on it</a></p>
  <ul>
  <li>I have a hoverable dropdown inside a Navbar</li>
  <li>When I move to a different page, the dropdown is still open</li>
  <li>I have tried this in plain Bulma, the issue still remains</li>
  <li>I am on Nuxt.js using SSR</li>
  <li>I am using nuxt-link / equivalent of Vue router-link to navigate to a different page.</li>
  </ul>
  <p><strong>Here is the my default.vue file</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;ch-container&quot;&gt;
      &lt;header class=&quot;ch-header&quot;&gt;
        &lt;nav
          class=&quot;navbar is-fixed-top&quot;
          role=&quot;navigation&quot;
          aria-label=&quot;main navigation&quot;
        &gt;
          &lt;div class=&quot;navbar-brand&quot;&gt;
            &lt;nuxt-link class=&quot;navbar-item&quot; to=&quot;/&quot;&gt;
              &lt;img
                alt=&quot;CH Logo&quot;
                src=&quot;https://i.imgur.com/v35Kfc9.png&quot;
                width=&quot;28&quot;
                height=&quot;28&quot;
              /&gt;
            &lt;/nuxt-link&gt;
  
            &lt;a
              role=&quot;button&quot;
              class=&quot;navbar-burger burger&quot;
              aria-label=&quot;menu&quot;
              aria-expanded=&quot;false&quot;
              data-target=&quot;navbarBasicExample&quot;
            &gt;
              &lt;span aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
              &lt;span aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
              &lt;span aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
            &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div id=&quot;navbarBasicExample&quot; class=&quot;navbar-menu&quot;&gt;
            &lt;div class=&quot;navbar-start&quot;&gt;
              &lt;nuxt-link class=&quot;navbar-item&quot; to=&quot;/news&quot;&gt;
                News
              &lt;/nuxt-link&gt;
  
              &lt;nuxt-link class=&quot;navbar-item&quot; to=&quot;/resources&quot;&gt;
                Resources
              &lt;/nuxt-link&gt;
  
              &lt;nuxt-link class=&quot;navbar-item&quot; to=&quot;/tickers&quot;&gt;
                Tickers
              &lt;/nuxt-link&gt;
  
              &lt;div class=&quot;navbar-item has-dropdown is-hoverable&quot;&gt;
                &lt;a class=&quot;navbar-link&quot;&gt;
                  More
                &lt;/a&gt;
                &lt;div class=&quot;navbar-dropdown&quot;&gt;
                  &lt;a class=&quot;navbar-item&quot;&gt;
                    FAQ
                  &lt;/a&gt;
                  &lt;nuxt-link class=&quot;navbar-item&quot; to=&quot;/contact&quot;&gt;
                    Contact
                  &lt;/nuxt-link&gt;
                  &lt;hr class=&quot;navbar-divider&quot; /&gt;
                  &lt;a class=&quot;navbar-item&quot;&gt;
                    Feature Request
                  &lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class=&quot;navbar-end&quot;&gt;
              &lt;div class=&quot;navbar-item&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;
                  &lt;fa :icon=&quot;faMoon&quot; /&gt;
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;navbar-item has-dropdown is-hoverable&quot;&gt;
                &lt;a class=&quot;navbar-link is-arrowless&quot;&gt;
                  &lt;fa :icon=&quot;faExclamationCircle&quot; /&gt;
                &lt;/a&gt;
                &lt;div class=&quot;navbar-dropdown&quot;&gt;
                  &lt;a class=&quot;navbar-item&quot;&gt;
                    No new notifications
                  &lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;navbar-item&quot;&gt;
                &lt;div class=&quot;buttons&quot;&gt;
                  &lt;nuxt-link class=&quot;button is-primary&quot; to=&quot;/signup&quot;&gt;
                    &lt;strong&gt;Sign up&lt;/strong&gt;
                  &lt;/nuxt-link&gt;
                  &lt;nuxt-link id=&quot;login&quot; class=&quot;button is-light&quot; to=&quot;/login&quot;&gt;
                    Log in
                  &lt;/nuxt-link&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;main class=&quot;ch-main&quot;&gt;
        &lt;nuxt /&gt;
      &lt;/main&gt;
      &lt;footer class=&quot;ch-footer is-hidden-mobile&quot;&gt;
        &lt;div class=&quot;level&quot;&gt;
          &lt;div class=&quot;level-left&quot;&gt;
            &lt;div class=&quot;level-item&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;icon&quot;&gt;
                  &lt;fa :icon=&quot;faFacebookSquare&quot; /&gt;
                &lt;/span&gt;
              &lt;/a&gt;
              &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;icon&quot;&gt;
                  &lt;fa :icon=&quot;faTwitterSquare&quot; /&gt;
                &lt;/span&gt;
              &lt;/a&gt;
              &lt;a href=&quot;#&quot;&gt;
                &lt;span class=&quot;icon&quot;&gt;
                  &lt;fa :icon=&quot;faRedditSquare&quot; /&gt;
                &lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;level-right&quot;&gt;
            &lt;div class=&quot;level-item&quot;&gt;
              &amp;copy;ch, All Rights Reserved
            &lt;/div&gt;
            &lt;div class=&quot;level-item&quot;&gt;
              &lt;nuxt-link to=&quot;/contact&quot;&gt;Contact&lt;/nuxt-link&gt;
            &lt;/div&gt;
            &lt;div class=&quot;level-item&quot;&gt;
              &lt;nuxt-link to=&quot;/terms-of-service&quot;&gt;Terms&lt;/nuxt-link&gt;
            &lt;/div&gt;
            &lt;div class=&quot;level-item&quot;&gt;
              &lt;nuxt-link to=&quot;/privacy-policy&quot;&gt;Privacy&lt;/nuxt-link&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {
    faFacebookSquare,
    faTwitterSquare,
    faRedditSquare,
  } from '@fortawesome/free-brands-svg-icons'
  
  import { faMoon, faExclamationCircle } from '@fortawesome/free-solid-svg-icons'
  
  export default {
    computed: {
      faFacebookSquare() {
        return faFacebookSquare
      },
      faTwitterSquare() {
        return faTwitterSquare
      },
      faRedditSquare() {
        return faRedditSquare
      },
      faMoon() {
        return faMoon
      },
      faExclamationCircle() {
        return faExclamationCircle
      },
    },
  
    mounted() {
      // Get all &quot;navbar-burger&quot; elements
      const $navbarBurgers = Array.prototype.slice.call(
        document.querySelectorAll('.navbar-burger'),
        0
      )
  
      // Check if there are any navbar burgers
      if ($navbarBurgers.length &gt; 0) {
        // Add a click event on each of them
        $navbarBurgers.forEach((el) =&gt; {
          el.addEventListener('click', () =&gt; {
            // Get the target from the &quot;data-target&quot; attribute
            const target = el.dataset.target
            const $target = document.getElementById(target)
  
            // Toggle the &quot;is-active&quot; class on both the &quot;navbar-burger&quot; and the &quot;navbar-menu&quot;
            el.classList.toggle('is-active')
            $target.classList.toggle('is-active')
          })
        })
      }
    },
  }
  &lt;/script&gt;
  
  &lt;style&gt;&lt;/style&gt;
  </code></pre>
  <p><strong>Here is a GIF illustrating the problem</strong></p>
  <p><a href="https://i.stack.imgur.com/GsZwa.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GsZwa.gif" alt="enter image description here" /></a></p>
  <p>How to close the dropdown after you move to a different page?</p>