Vue3: Fixed navigation active style not applied

[eva-vashkevich]

Summary

Fixes #11904

In Vue 3, isActive behavior has changed:
https://router.vuejs.org/guide/essentials/active-links#When-are-links-active-
https://v3.router.vuejs.org/api/#active-class

Created computed property that matches old behavior to use instead of router's isActive.

Note: If you navigate to workloads, close group tab and re-open it again, 'Workload' tab is not highlighted. This is unrelated to Vue3 migration and can be reproduced on 2.9. It is not part of this fix and we might want to address it in the future.

Occurred changes and/or fixed issues

Changed behavior to match Vue2

Technical notes summary

Areas or cases that should be tested

1. Go to "Local" cluster -> Workloads -> Pods
2. Click on any pod to go into "Details" page
3. "Pods" should still be selected in side nav

Areas which could experience regressions

Side bar navigation

Screenshot/Video

Screen.Recording.2024-09-25.at.11.02.53.AM.mov

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes

[codyrancher]

I'm okay with the change but I think it might still need some tweaking. I clicked around and found what appears to be broken highlighting when looking at fleet. Multiple items were being highlighted when I would only expect one.

navigation.mp4