Nuxt•2mo 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 = "";
    }
  }
});

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

Gist

Responsive Menu

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

1 Reply

Sagar Kapoor•2mo ago

Should I use teleport to solve this issue? From what I read it is not a good practice to change anything in the Body element like I am doing in the above code.

Gaming

Programming

Responsive Header Menu