Navbar toggler animation with Nuxt causing bug


Topic: Navbar toggler animation with Nuxt causing bug

GuillaumeDgr pro premium priority asked 4 months ago

Expected behavior Put navbar toggler animation in my website (using nuxt / on mobile).

Actual behavior Navbar toggler animation with Nuxt causing bug when navigating : "TypeError: can't access property "classList", this.$refs.animatedIcon is undefined"

Resources (screenshots, code snippets etc.)

 <mdb-navbar
    animation="1"
    transparent
    class="z-depth-0"
    container
    color="secondary"
    dark
    position="top"
    scrolling
  ></mdb-navbar>

enter image description here


Mikołaj Smoleński staff commented 4 months ago

Are you able to recreate this issue in our snippets creator? https://mdbootstrap.com/snippets/

Keep coding, Mikołaj from MDB


GuillaumeDgr pro premium priority commented 2 months ago

What do you mean ? Thanks


Mikołaj Smoleński staff commented 2 months ago

We'll try to fix it with the next release (26.07).

Keep coding,  Mikołaj from MDB


Mikołaj Smoleński staff commented 2 months ago

Hi there again,

Unfortunately Navbar component will not work properly in Nuxt with SSR as its state depends on the browser window object, which is undefined on the server-side.

To fix the issue, please disable ssr: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-ssr

Keep coding, Mikołaj from MDB


GuillaumeDgr pro premium priority commented 2 months ago

Unfortunately, tests are not good, bug still here... :/ thks


Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB4 6.7.2
  • Device: Mac book pro
  • Browser: Firefox developers
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No
Tags