Skip to content

Add support for Vue router to super sidebar nav item

Peter Hegman requested to merge add-router-link-support-to-nav-item into master

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.

Edited by Peter Hegman

Merge request reports