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/user_bar.vue

@@ -6,33 +6,46 @@ export default {
     GlAvatar,
     GlIcon,
   },
-}
+};
 </script>
 
 <template>
   <!-- TODO: Text color -> indigo-50 -->
   <div class="gl-bg-theme-indigo-900 gl-text-white">
     <div class="gl-display-flex gl-align-items-center gl-px-3 gl-py-3 gl-gap-3">
-      <div class="gl-flex-grow-1 gl-h-5">
-        <svg width="25" height="24" class="tanuki-logo" viewBox="0 0 50 48" fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path class="tanuki-shape tanuki"
+      <div class="gl-flex-grow-1">
+        <svg
+          width="25"
+          height="24"
+          class="tanuki-logo gl-vertical-align-middle"
+          viewBox="0 0 50 48"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            class="tanuki-shape tanuki"
             d="m49.014 19-.067-.18-6.784-17.696a1.792 1.792 0 0 0-3.389.182l-4.579 14.02H15.651l-4.58-14.02a1.795 1.795 0 0 0-3.388-.182l-6.78 17.7-.071.175A12.595 12.595 0 0 0 5.01 33.556l.026.02.057.044 10.32 7.734 5.12 3.87 3.11 2.351a2.102 2.102 0 0 0 2.535 0l3.11-2.352 5.12-3.869 10.394-7.779.029-.022a12.595 12.595 0 0 0 4.182-14.554Z"
-            fill="#E24329" />
-          <path class="tanuki-shape right-cheek"
+            fill="#E24329"
+          />
+          <path
+            class="tanuki-shape right-cheek"
             d="m49.014 19-.067-.18a22.88 22.88 0 0 0-9.12 4.103L24.931 34.187l9.485 7.167 10.393-7.779.03-.022a12.595 12.595 0 0 0 4.175-14.554Z"
-            fill="#FC6D26" />
-          <path class="tanuki-shape chin"
+            fill="#FC6D26"
+          />
+          <path
+            class="tanuki-shape chin"
             d="m15.414 41.354 5.12 3.87 3.11 2.351a2.102 2.102 0 0 0 2.535 0l3.11-2.352 5.12-3.869-9.484-7.167-9.51 7.167Z"
-            fill="#FCA326" />
-          <path class="tanuki-shape left-cheek"
+            fill="#FCA326"
+          />
+          <path
+            class="tanuki-shape left-cheek"
             d="M10.019 22.923a22.86 22.86 0 0 0-9.117-4.1L.832 19A12.595 12.595 0 0 0 5.01 33.556l.026.02.057.044 10.32 7.734 9.491-7.167L10.02 22.923Z"
-            fill="#FC6D26" />
+            fill="#FC6D26"
+          />
         </svg>
-
       </div>
       <div>
-        <gl-icon name="search" />
+        <gl-icon name="search" :size="24" class="gl-vertical-align-middle" />
       </div>
       <div>
         <gl-avatar entity-name="GitLab" :size="32" />
@@ -40,16 +53,25 @@ export default {
     </div>
     <div class="gl-display-flex gl-justify-content-space-between gl-px-3 gl-py-3 gl-gap-3">
       <!-- TODO: Replace with indigo-800 -->
-      <a href="#" class="gl-display-inline-block gl-flex-grow-1 gl-text-center gl-py-3 gl-bg-theme-indigo-700"
-        :style="{ borderRadius: '4px' }">
+      <a
+        href="#"
+        class="gl-display-inline-block gl-flex-grow-1 gl-text-center gl-py-3 gl-bg-theme-indigo-700"
+        :style="{ borderRadius: '4px' }"
+      >
         <gl-icon name="issues" class="gl-text-white" />
       </a>
-      <a href="#" class="gl-display-inline-block gl-flex-grow-1 gl-text-center gl-py-3 gl-bg-theme-indigo-700"
-        :style="{ borderRadius: '4px' }">
+      <a
+        href="#"
+        class="gl-display-inline-block gl-flex-grow-1 gl-text-center gl-py-3 gl-bg-theme-indigo-700"
+        :style="{ borderRadius: '4px' }"
+      >
         <gl-icon name="merge-request-open" class="gl-text-white" />
       </a>
-      <a href="#" class="gl-display-inline-block gl-flex-grow-1 gl-text-center gl-py-3 gl-bg-theme-indigo-700"
-        :style="{ borderRadius: '4px' }">
+      <a
+        href="#"
+        class="gl-display-inline-block gl-flex-grow-1 gl-text-center gl-py-3 gl-bg-theme-indigo-700"
+        :style="{ borderRadius: '4px' }"
+      >
         <gl-icon name="todo-done" class="gl-text-white" />
       </a>
     </div>