1 files changed, 11 insertions, 30 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/context_switcher_toggle.vue b/app/assets/javascripts/super_sidebar/components/context_switcher_toggle.vue
index 17227a2b123..faa7eba6470 100644
--- a/app/assets/javascripts/super_sidebar/components/context_switcher_toggle.vue
+++ b/app/assets/javascripts/super_sidebar/components/context_switcher_toggle.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlTruncate, GlAvatar, GlIcon } from '@gitlab/ui';
+import { GlIcon } from '@gitlab/ui';
+import ContextHeader from './context_header.vue';
 
 export default {
   components: {
-    GlTruncate,
-    GlAvatar,
     GlIcon,
+    ContextHeader,
   },
   props: {
     /*
@@ -24,39 +24,20 @@ export default {
     collapseIcon() {
       return this.expanded ? 'chevron-up' : 'chevron-down';
     },
-    avatarShape() {
-      return this.context.avatar_shape || 'rect';
-    },
   },
 };
 </script>
 
 <template>
-  <button
+  <context-header
+    :context="context"
+    tag="button"
     type="button"
-    class="context-switcher-toggle gl-p-0 gl-bg-transparent gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-border-0 border-top border-bottom gl-border-gray-a-08! gl-box-shadow-none gl-display-flex gl-align-items-center gl-font-weight-bold gl-w-full gl-h-8 gl-flex-shrink-0"
-    data-qa-selector="context_switcher"
+    class="context-switcher-toggle gl-p-0 gl-bg-transparent gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-border-0 gl-box-shadow-none gl-text-left"
+    data-testid="context-switcher"
   >
-    <span
-      v-if="context.icon"
-      class="gl-avatar avatar-container gl-bg-t-gray-a-08 icon-avatar rect-avatar s24 gl-mr-3 gl-ml-4"
-    >
-      <gl-icon class="gl-text-gray-700" :name="context.icon" :size="16" />
-    </span>
-    <gl-avatar
-      v-else
-      :size="24"
-      :shape="avatarShape"
-      :entity-name="context.title"
-      :entity-id="context.id"
-      :src="context.avatar"
-      class="gl-mr-3 gl-ml-4"
-    />
-    <div class="gl-overflow-auto gl-text-gray-900">
-      <gl-truncate :text="context.title" />
-    </div>
-    <span class="gl-flex-grow-1 gl-text-right gl-mr-4">
+    <template #end>
       <gl-icon class="gl-text-gray-400" :name="collapseIcon" />
-    </span>
-  </button>
+    </template>
+  </context-header>
 </template>