Skip to content

Make navbar configurable

Paul Gascou-Vaillancourt requested to merge configurable-nav into main

What does this do?

This revisits how the navbar is being populated. It drops the current convention over configuration approach in favor of a JSON configuration file to define all the items that show up in the left navbar.

By doing this, we have more control over the order the items are rendered in. We are currently tied to the content Markdown filenames, which can be inconvenient as those filenames are also used as the paths. For example, accessibility audits documents have been prefixed with numbers to order them properly: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/tree/main/contents/accessibility-audits But we end up with URLs suchs as https://design.gitlab.com/accessibility-audits/1-accessibility-audits. Note the 1- in the last fragment, which is not desirable.

With this new approach, all the paths defined in nav.json should match the Markdown filenames, but they can be re-ordered at will without affecting the URLs. This also gives us more option to add more nesting levels to the navigation in the future.

Wait, why is this MR so big?

The diff is quite huge with over 4000 additions.

The main cause for this is that I've setup unit tests in the first commit. I did this so that I could snapshot test the navbar before refactoring it, this gave me a convenient way to make sure that the navbar was still in a similar shape before and after the changes. The downside is that it makes Yarn's lockfile much bigger because of the dependencies Jest and Vue Test Utils require. And the snapshot itself is quite big. I felt like it was alright to ship those changes in the same MR as they are closely tied to the refactoring, but we could also move them in a separate MR to clean things up a bit.

Related to #766 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports