search

symfony / ux

Symfony UX initiative: a JavaScript ecosystem for Symfony
https://ux.symfony.com/
MIT License
817 stars 299 forks source link

[Turbo-Drive] Mega menu breaking #359

Closed KDederichs closed 2 years ago

KDederichs commented 2 years ago

I just tried to enable turbo but found that it seems to brick our mega menu: How it's supposed to look (it's a test don't shame me pls :p):

Screenshot 2022-06-20 at 17 28 46

How it looks after navigating:

Screenshot 2022-06-20 at 17 28 20

It's based on this one here: https://webslidemenu.com/menudemo/webslide/mobile-drawer-style/layout-03-ecommerce/#

Anyone having similar problems with turbo drive?

weaverryan commented 2 years ago

Hey!

That's super weird... Turbo doesn't include any CSS that would break things. Are you getting any JavaScript errors? Can you see what is different in the HTML/CSS that causes the difference?

Cheers!

KDederichs commented 2 years ago

Hmm looking closer it might be related to a JS that's running on load that's doing some DOM manipulation that gets swapped out every time drive switches the content but then doesn't trigger the same JS again.

Interestingly I don't have the same problem with the Swup one (I assume cause it just switches out the content part and doesn't touch the navigation).

Is there any thing I could do about it? (Except maybe rewrite that JS :D ). Or do you think it'd be more viable to use the Swup one on this case? Also does that just break all the other Turbo stuff as well? Cause it doesn't seem I can't just not use Drive and still use Frames for example because they all come as one bundle.

weaverryan commented 2 years ago

Interestingly I don't have the same problem with the Swup one (I assume cause it just switches out the content part and doesn't touch the navigation).

Yup - that makes sense to me :).

Is there any thing I could do about it? (Except maybe rewrite that JS :D ). Or do you think it'd be more viable to use the Swup one on this case?

Turbo really requires your JavaScript to be written in a way where it can be initialized just once and "work forever". It's an excellent thing to make your JS work this way, but it CAN be some serious work (we did it on Symfonycasts, but it took us some time). I you want to use Swup, that is definitely a good option :).

Also does that just break all the other Turbo stuff as well? Cause it doesn't seem I can't just not use Drive and still use Frames for example because they all come as one bundle.

Good question. Turbo (the JavaScript library) comes with Drive, Frames and Streams all in one. However, in app.js, you could import Turbo (import * as Turbo from "@hotwired/turbo" ) and disable it via: https://turbo.hotwired.dev/reference/drive#turbo.session.drive

Cheers!