Remove GlNav, or update styles of GlNav, or merge GlNav into GlTabs

In gitlab-org/gitlab-ui!4050 (closed) we noticed that the GlNav component has some a11y issues. It is currently used only once in deisng.gitlab.com. However, we found multiple GlTabs usages within the GitLab main repo and at least 3 of them are built with browser redirections. They should be using GlNav instead. We assume, it was necessary to (mis-)use GlTabs because the styles of GlNav are not matching the ones from GlTabs. Which is the goal we'd like to achieve in this issue.

If possible, this can be done together with gitlab-org/gitlab-ui#2873 (moved) (and maybe even gitlab-org/gitlab-ui#2869 (moved)), which is the issue to move away from BootstrapVue and build a custom component instead.

Also, the issue gitlab-org/gitlab#378503 wants to migrate a usage from GlTabs to GlNav, and describes the same problem.

Outcome of this issue:

We need one or two components that do look like the GlTabs. They need to work either with real anchors and URL redirections - with Vue routers, <gl-link>, <router-link>, <nuxt-link>, <a>, etc. (as GlNav currently does) and work as Tabs with actions on the current page (as GlTabs currently does). The outcome could either be that we still have GlNav and GlTabs with the same styles, or a combined component which can handle both use cases. The accessibility is important, we need to make sure that buttons (GlTabs) and Links (GlNav) support all native behaviors of links and buttons.

Edited by Vanessa Otto