Persistent layout with navigation highlights

[jesperbjoernandersen]

I'm using a persistent layout, which imports a navigation component.
Having some issues getting the navigation "active" class to update, when clicking the different InertiaLinks
I've made a wrapper component for the links, that has a computed property of active(), which is looking at this.route().current() from Ziggy, but it's just not working.

Does anyone have any idea how make it work or perhaps any ideas how to make something simular?

[ajnsn]

@jesperbjoernandersen Please take a look at this discussion and the documentaton and see if this solves your issue.

[jesperbjoernandersen]

Aha, so because this.$page.url is reactive, it'll trigger a component update on my link components but not the whole layout if I'm correct?

[ajnsn]

@jesperbjoernandersen If you are using Vue 2 it's more about more about telling Vue that something has changed. In Vue 3 it should work without any "helpers". You can also omit Ziggy completely and rely on the $page.url, as mention in the documentation.

[jesperbjoernandersen]

Ah okay. Still waiting a bit with migrating to Vue3, so staying with 2 for now.

Yeah I got that from the docs, but I kinda like using the route names rather than urls and components. Made a quick mixin yesterday that takes routenames and compares theirs urls with $page.url, which seems to work for now, even with parameters.

Thanks for your guidance ☺️👍