Nuxt•16mo ago

Responsive Header Menu

I am working on a responsive menu and this is what I came up with:
https://gist.github.com/Sagar-Kap/abdbac1380f76cc36d3297ff9dead1b2

The only thing about this menu that is bugging me out is that I am using this piece of code to change the visibility of the menu buttons:

watchEffect(() => {
  if (isClient.value) {
    if (mobileNav.value) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  }
});

watchEffect(() => {
  if (isClient.value) {
    if (mobileNav.value) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  }
});

watchEffect(() => {
  if (isClient.value) {
    if (mobileNav.value) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  }
});

watchEffect(() => {
  if (isClient.value) {
    if (mobileNav.value) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  }
});

Is this acceptable in this case? is there a workaround?

Gist

Responsive Menu

Responsive Menu. GitHub Gist: instantly share code, notes, and snippets.

Responsive Header Menu

Similar Threads

Similar Threads

Similar Threads