Draft: Vue super sidebar PoC

Notes

• The user dropdown probably needs to be implemented with GlDropdown for now. Ideally, this would be implemented as a menu, but we don't have a component for this yet, perhaps something we should prioritize as part of this effort. It's worth noting that the dropdown's toggle needs to be the user's avatar, which implies having control over that area via a slot, which GlDropdown does, but GlListbox doesn't.
• Still related to the user dropdown: rendering a GlToggle within a GlDropdown proved to be cumbersome as the latter's styles are leaking into the former. We'll need to be careful about this sort of thing with GlMenu.
• The PoC currently leverages the existing .nav-sidebar CSS class to piggy back on the current spacing and positioning. In the actual implementation, we might want to start from scratch to avoid undesired styles from getting in the way. For example, some a styles are leaking in the user dropdown menu, we've had to override the left margin manually there.
• Potential startup CSS caveat: gitlab-org/frontend/rfcs#92 (comment 1169303552).
• Empty aside while the Vue app initializes: would this be a good candidate for UI over the Wire (gitlab-org/frontend/rfcs#112 - closed)?

app/assets/javascripts/nav/components/context.vue

-<script>
-import { GlAvatar } from '@gitlab/ui';
-import NavItem from './nav_item.vue';
-
-export default {
-  components: {
-    GlAvatar,
-    NavItem
-  },
-  props: {
-    context: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    item() {
-      const { name: title, path: link } = this.context.container
-
-      return { title, link }
-    }
-  }
-}
-</script>
-
-<template>
-  <nav-item class="context-header" :item="item">
-    <template #icon>
-      <gl-avatar :size="32" shape="rect"
-        src="https://gitlab.com/uploads/-/system/project/avatar/278964/project_avatar.png?width=32" />
-    </template>
-  </nav-item>
-</template>
\ No newline at end of file