1 files changed, 25 insertions, 11 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 7ee1776bf07..ee72e8eafb4 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -1,10 +1,12 @@
 <script>
-import { GlAvatar, GlDropdown, GlIcon } from '@gitlab/ui';
+import { GlAvatar, GlDropdown, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import NewNavToggle from '~/nav/components/new_nav_toggle.vue';
 import logo from '../../../../views/shared/_logo.svg';
+import CreateMenu from './create_menu.vue';
 import Counter from './counter.vue';
+import MergeRequestMenu from './merge_request_menu.vue';
 
 export default {
   logo,
@@ -12,15 +14,19 @@ export default {
     GlAvatar,
     GlDropdown,
     GlIcon,
+    CreateMenu,
     NewNavToggle,
     Counter,
+    MergeRequestMenu,
   },
   i18n: {
+    createNew: __('Create new...'),
     issues: __('Issues'),
     mergeRequests: __('Merge requests'),
     todoList: __('To-Do list'),
   },
   directives: {
+    GlTooltip: GlTooltipDirective,
     SafeHtml,
   },
   inject: ['rootPath', 'toggleNewNavEndpoint'],
@@ -39,11 +45,7 @@ export default {
       <div class="gl-flex-grow-1">
         <a v-safe-html="$options.logo" :href="rootPath"></a>
       </div>
-      <gl-dropdown variant="link" no-caret>
-        <template #button-content>
-          <gl-icon name="plus" class="gl-vertical-align-middle gl-text-black-normal" />
-        </template>
-      </gl-dropdown>
+      <create-menu :groups="sidebarData.create_new_menu_groups" />
       <button class="gl-border-none">
         <gl-icon name="search" class="gl-vertical-align-middle" />
       </button>
@@ -56,17 +58,29 @@ export default {
     </div>
     <div class="gl-display-flex gl-justify-content-space-between gl-px-3 gl-py-2 gl-gap-2">
       <counter
+        v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.issues"
+        class="gl-flex-basis-third"
         icon="issues"
         :count="sidebarData.assigned_open_issues_count"
         :href="sidebarData.issues_dashboard_path"
         :label="$options.i18n.issues"
       />
+      <merge-request-menu
+        class="gl-flex-basis-third gl-display-block!"
+        :items="sidebarData.merge_request_menu"
+      >
+        <counter
+          v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.mergeRequests"
+          class="gl-w-full"
+          tabindex="-1"
+          icon="merge-request-open"
+          :count="sidebarData.total_merge_requests_count"
+          :label="$options.i18n.mergeRequests"
+        />
+      </merge-request-menu>
       <counter
-        icon="merge-request-open"
-        :count="sidebarData.assigned_open_merge_requests_count"
-        :label="$options.i18n.mergeRequests"
-      />
-      <counter
+        v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.todoList"
+        class="gl-flex-basis-third"
         icon="todo-done"
         :count="sidebarData.todos_pending_count"
         href="/dashboard/todos"