Steps to automatically hide dropdowns when a menu item is selected

Question

Steps to automatically hide dropdowns when a menu item is selected

I am working on a dropdown menu using NUXT JS and Tailwind CSS. However, I have encountered an issue with nuxt-js - since it does not change pages using SSR, the dropdown does not close when navigating to a new page. How can I make the dropdown automatically close when a menu item is clicked?

Here is the template:

      <!-- dropdown -->
      <button class="mt-1 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800 sm:mt-0 sm:ml-2"
        type="button" v-on:click="toggleDropdown()" ref="btnDropdownRef">
        Applications
      </button>
      <div v-bind:class="{'hidden': !dropdownPopoverShow, 'block': dropdownPopoverShow}"
        class="bg-gray-800 w-full md:w-1/5 text-white z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
         ref="popoverDropdownRef">
        <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/education">
        education
        </NuxtLink>
        <NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white  rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/lifescience">
        life sciences 
        </NuxtLink>
        ...
      </div>

And here is the script:

<script>
  import {
    createPopper
  } from "@popperjs/core";

  export default {
    data() {
      return {
        isOpen: false,
        dropdownPopoverShow: false,
      }
    },
    methods: {
      toggleDropdown: function () {
        if (this.dropdownPopoverShow) {
          this.dropdownPopoverShow = false;
        } else {
          this.dropdownPopoverShow = true;
          createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
            placement: "bottom-start"
          });
        }
      }
    }
  }
</script>

javascript vue.js nuxt.js tailwind-css

Answer 1

Answer №1

After some consideration, I ultimately decided to implement the watch route approach

 watch: {
    '$route' () {
      // Disabling the dropdown popover
      this.dropdownPopoverShow = false,  
      // Hiding the mobile menu when page changes
      this.isOpen = false
    }

Answer 2

After some consideration, I ultimately decided to implement the watch route approach

 watch: {
    '$route' () {
      // Disabling the dropdown popover
      this.dropdownPopoverShow = false,  
      // Hiding the mobile menu when page changes
      this.isOpen = false
    }

Answer 3

Answer №2

To ensure a method runs every time a page is changed, utilize the afterEach hook on the Vue router instance. It's advisable to integrate this functionality as a plug-in in Nuxt and transfer `dropdownPopoverShow` from your navigation component to the store.

Move the `dropdownPopoverShow` property to the store so it can be accessed outside of the navigation component.

export const state = () => ({
  dropdownPopoverShow: false
})

export const mutations = {
  toggleDropdown(state) {
    // Instead of using an 'if/then' statement, directly toggle the Boolean value
    state.dropdownPopoverShow = !state.dropdownPopoverShow
  },
  hideDropdown(state) {
    state.dropdownPopoverShow = false
  }
}

In your navigation component, invoke the mutation present in the store.

methods: {
  toggleDropdown() {
    this.$store.commit('toggleDropdown')
  }
}

Lastly, create a plug-in that resets `dropdownPopoverShow` to false after each route change.

// plugins/hideDropdown.js:
export default async ({ app, store }) => {
  app.router.afterEach((to, from) => {
    store.commit('hideDropdown')
  });
}

Don't forget to include the plug-in in your nuxt config:

plugins: [ { src: '~/plugins/hideDropdown.js', mode: 'client' } ]

Answer 4

To ensure a method runs every time a page is changed, utilize the afterEach hook on the Vue router instance. It's advisable to integrate this functionality as a plug-in in Nuxt and transfer `dropdownPopoverShow` from your navigation component to the store.

Move the `dropdownPopoverShow` property to the store so it can be accessed outside of the navigation component.

export const state = () => ({
  dropdownPopoverShow: false
})

export const mutations = {
  toggleDropdown(state) {
    // Instead of using an 'if/then' statement, directly toggle the Boolean value
    state.dropdownPopoverShow = !state.dropdownPopoverShow
  },
  hideDropdown(state) {
    state.dropdownPopoverShow = false
  }
}

In your navigation component, invoke the mutation present in the store.

methods: {
  toggleDropdown() {
    this.$store.commit('toggleDropdown')
  }
}

Lastly, create a plug-in that resets `dropdownPopoverShow` to false after each route change.

// plugins/hideDropdown.js:
export default async ({ app, store }) => {
  app.router.afterEach((to, from) => {
    store.commit('hideDropdown')
  });
}

Don't forget to include the plug-in in your nuxt config:

plugins: [ { src: '~/plugins/hideDropdown.js', mode: 'client' } ]

Answer 5

Answer №3

Using Composition API

const currentRoute = useRoute();

watch(currentRoute, () => {
  this.dropdownPopoverShow = false, 
  this.isOpen = false
});

When utilizing Option API

watch: {
  '$route' () {
    this.dropdownPopoverShow = false,  
    this.isOpen = false
}

Answer 6

Using Composition API

const currentRoute = useRoute();

watch(currentRoute, () => {
  this.dropdownPopoverShow = false, 
  this.isOpen = false
});

When utilizing Option API

watch: {
  '$route' () {
    this.dropdownPopoverShow = false,  
    this.isOpen = false
}

Steps to automatically hide dropdowns when a menu item is selected

Answer №1

Answer №2

Answer №3

Similar questions

Tips for sending a command to the server using the ssh2-promise package in Node.js

Utilizing JSX within this.state results in it being displayed as plain text when rendered

Simulating nodemailer functionality for testing purposes using Jest

Refresh your webpage with new content and modified URLs without the need to reload using window.history.pushState

Tips for building a dynamic view using Angular

Preventing Page Content Overflow in Semantic-ui SideNav

Ways to Ensure a Property of an Object Remains Synced with Another

Retrieving the initial data from a JSON array

What is the best option: using a Javascript template or exploring another

The addition of one hour to the date time format increases the total time

An error occurred in React.js: 'TypeError: kinds.map is not a function.'

Utilizing Vuex store to showcase data in component according to route

Using Vue JS, I am facing difficulties in integrating Vue page transitions with Inertia JS within my application

Paste the input text into the div element

Avoiding the resizing of table headers when positioned at the top of a window

Get a Javascript file from Amazon S3 and run it within a Lambda function

Ways to create a fixed button positioned statically at the bottom of a page

What is the best method for interacting with a blocked element in Protractor?

Is it possible to center the image and resize it even when the window is resized?

Issue with Vue 3 component not updating following vue-router invocation