Add support for Vue router to super sidebar nav item
What does this MR do and why?
Related to #389842
Relevant discussion in !119370 (comment 1375640310)
In &9056 we are working on converting the profile page from HAML/jQuery to Vue. Currently we have it setup as tabs because that is how it was previously setup but the new super nav moves the tabs into the sidebar. To accomplish this in Vue we are going to remove the tabs and switch to Vue router. To do this we need a way to use Vue router links in the super nav sidebar. This MR adds support to the super nav for Vue router links. The Vue router links can be inserted in the sidebar by using ~/super_sidebar/components/sidebar_portal.vue
.
Screen recording
After we implement Vue router on the profile it will work like this:
Screen_Recording_2023-05-08_at_1.16.36_PM
How to set up and validate locally
This functionality is not yet used, it will be used in a follow-up MR. For now running the relevant tests is the easiest way to test.
It will be used like this:
<script>
// app.vue
export default {
items: [
{
id: 'foo',
title: 'Foo',
to: { name: 'foo' }
}
]
}
</script>
<template>
<sidebar-portal>
<nav-item v-for="item in $options.items" :key="item.id" :item="item" />
</sidebar-portal>
</template>
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.