From 8b4f9f8fa5647a1d3a3ed59d279632220623e9eb Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Tue, 29 Jul 2025 15:59:31 +0200
Subject: [PATCH 01/12] WIP: add global topbar

looks totally broken at the moment. wip!
---
 .../javascripts/entrypoints/super_sidebar.js  |  2 ++
 .../super_sidebar/components/topbar.vue       | 22 ++++++++++++++++
 .../super_sidebar/super_sidebar_bundle.js     | 21 ++++++++++++++++
 .../stylesheets/framework/super_sidebar.scss  | 25 +++++++++++++++++++
 app/helpers/sidebars_helper.rb                |  8 ++++++
 app/views/layouts/application.html.haml       |  4 ++-
 6 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/super_sidebar/components/topbar.vue

diff --git a/app/assets/javascripts/entrypoints/super_sidebar.js b/app/assets/javascripts/entrypoints/super_sidebar.js
index 961ffc56e60d6e..e85e94e9fea1a1 100644
--- a/app/assets/javascripts/entrypoints/super_sidebar.js
+++ b/app/assets/javascripts/entrypoints/super_sidebar.js
@@ -5,10 +5,12 @@ import {
   initSuperSidebarToggle,
   initPageBreadcrumbs,
   getSuperSidebarData,
+  initSuperTopbar,
 } from '~/super_sidebar/super_sidebar_bundle';
 
 const superSidebarData = getSuperSidebarData();
 
 initSuperSidebar(superSidebarData);
 initSuperSidebarToggle();
+initSuperTopbar();
 initPageBreadcrumbs();
diff --git a/app/assets/javascripts/super_sidebar/components/topbar.vue b/app/assets/javascripts/super_sidebar/components/topbar.vue
new file mode 100644
index 00000000000000..d701e4a3b82e9e
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/topbar.vue
@@ -0,0 +1,22 @@
+<script>
+import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
+
+export default {
+  components: { BrandLogo },
+  props: {
+    logoUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <header id="app-topnav">
+    <brand-logo :logo-url="logoUrl" />
+    tbd: org switcher, breadcrumbs, command palette, duo button, admin foo, user actions, user
+    dropdown
+  </header>
+</template>
diff --git a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
index fcced25ab11676..2e505099f3f092 100644
--- a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
+++ b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
@@ -10,6 +10,7 @@ import {
   initSuperSidebarCollapsedState,
 } from './super_sidebar_collapsed_state_manager';
 import SuperSidebar from './components/super_sidebar.vue';
+import SuperTopbar from './components/topbar.vue';
 import SuperSidebarToggle from './components/super_sidebar_toggle.vue';
 
 export { initPageBreadcrumbs } from './super_sidebar_breadcrumbs';
@@ -196,3 +197,23 @@ export const initSuperSidebarToggle = () => {
     },
   });
 };
+
+export const initSuperTopbar = () => {
+  const el = document.querySelector('#app-topnav');
+  if (!el) return false;
+
+  const { props } = el.dataset;
+  const topbarProps = JSON.parse(props);
+
+  return new Vue({
+    el,
+    provide: {
+      rootPath: '/',
+    },
+    render(h) {
+      return h(SuperTopbar, {
+        props: topbarProps,
+      });
+    },
+  });
+};
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 3e2ae99607f6e1..0be0d87dfb511e 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -737,3 +737,28 @@ $scroll-scrim-height: 2.25rem;
 .custom-gradient-progress .gl-progress {
   background: linear-gradient(90deg, #ffb177 0%, #936fff 100%);
 }
+
+
+
+
+
+
+
+
+
+// drafting CSS for new topnav
+// TODO: move to its own file
+#app-topnav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 1rem;
+
+  z-index: 99999; // total hack to see the topbar while layout isn't ready for it yet
+
+  padding: 0.25rem;
+}
diff --git a/app/helpers/sidebars_helper.rb b/app/helpers/sidebars_helper.rb
index 0c7bb670e2293e..27531fe649d1ca 100644
--- a/app/helpers/sidebars_helper.rb
+++ b/app/helpers/sidebars_helper.rb
@@ -133,6 +133,14 @@ def super_sidebar_whats_new_data
     }
   end
 
+  # TODO: Use feature flag in sidebar data methods above to already mark the ones we duplicate noew (like logo_url).
+  # otherwise we'll never clean this up later
+  def super_topbar_props
+    return {
+      logo_url: current_appearance&.header_logo_path,
+    }
+  end
+
   def work_items_modal_data(group, project)
     if project&.persisted?
       return {
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index f630ec888eb2df..cdccf80ede3f4f 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -15,7 +15,9 @@
     = render 'peek/bar'
     = header_message
 
-    - if !current_user
+    - if current_user # && tbd_feature-flag is true
+      %header#app-topnav{data: { props: super_topbar_props.to_json } }
+    - else
       = render partial: "layouts/header/super_sidebar_logged_out"
     = render 'layouts/page', sidebar: sidebar, nav: nav
     = footer_message
-- 
GitLab


From d4b380b3d3b7422a075e0be286676a9e71df0e50 Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Wed, 30 Jul 2025 12:26:51 +0200
Subject: [PATCH 02/12] wip: share sidebardata for now

---
 .../javascripts/entrypoints/super_sidebar.js  |  2 +-
 .../super_sidebar/components/topbar.vue       | 13 +++-
 .../super_sidebar/components/user_bar.vue     |  7 +-
 .../super_sidebar/super_sidebar_bundle.js     | 68 +++++++++++++++++--
 .../stylesheets/framework/super_sidebar.scss  |  4 +-
 app/views/layouts/application.html.haml       |  2 +-
 config/feature_flags/wip/global_topbar.yml    | 10 +++
 lib/gitlab/gon_helper.rb                      |  1 +
 8 files changed, 92 insertions(+), 15 deletions(-)
 create mode 100644 config/feature_flags/wip/global_topbar.yml

diff --git a/app/assets/javascripts/entrypoints/super_sidebar.js b/app/assets/javascripts/entrypoints/super_sidebar.js
index e85e94e9fea1a1..6fbb77673cb824 100644
--- a/app/assets/javascripts/entrypoints/super_sidebar.js
+++ b/app/assets/javascripts/entrypoints/super_sidebar.js
@@ -12,5 +12,5 @@ const superSidebarData = getSuperSidebarData();
 
 initSuperSidebar(superSidebarData);
 initSuperSidebarToggle();
-initSuperTopbar();
+initSuperTopbar(superSidebarData);
 initPageBreadcrumbs();
diff --git a/app/assets/javascripts/super_sidebar/components/topbar.vue b/app/assets/javascripts/super_sidebar/components/topbar.vue
index d701e4a3b82e9e..6b9282ddd41296 100644
--- a/app/assets/javascripts/super_sidebar/components/topbar.vue
+++ b/app/assets/javascripts/super_sidebar/components/topbar.vue
@@ -1,14 +1,19 @@
 <script>
 import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
+import UserMenu from './user_menu.vue';
 
 export default {
-  components: { BrandLogo },
+  components: { BrandLogo, UserMenu },
   props: {
     logoUrl: {
       type: String,
       required: false,
       default: '',
     },
+    sidebarData: {
+      type: Object,
+      required: true,
+    },
   },
 };
 </script>
@@ -16,7 +21,9 @@ export default {
 <template>
   <header id="app-topnav">
     <brand-logo :logo-url="logoUrl" />
-    tbd: org switcher, breadcrumbs, command palette, duo button, admin foo, user actions, user
-    dropdown
+    <span>
+      tbd: org switcher, breadcrumbs, command palette, duo button, admin foo, user actions
+    </span>
+    <user-menu v-if="sidebarData.is_logged_in" :data="sidebarData" />
   </header>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 68693b5dadb607..6baa43f1d6151b 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -90,6 +90,9 @@ export default {
         this.glFeatures.uiForOrganizations && this.isLoggedIn && window.gon.current_organization
       );
     },
+    appHasTopbar() {
+      return gon.features.globalTopbar;
+    },
   },
   created() {
     Object.assign(userCounts, this.sidebarData.user_counts);
@@ -126,7 +129,7 @@ export default {
       class="gl-flex gl-items-center gl-gap-1"
     >
       <template v-if="sidebarData.is_logged_in">
-        <brand-logo :logo-url="sidebarData.logo_url" />
+        <brand-logo v-if="!appHasTopbar" :logo-url="sidebarData.logo_url" />
         <gl-badge
           v-if="sidebarData.gitlab_com_and_canary"
           variant="success"
@@ -149,7 +152,7 @@ export default {
         :groups="sidebarData.create_new_menu_groups"
       />
 
-      <user-menu v-if="sidebarData.is_logged_in" :data="sidebarData" />
+      <user-menu v-if="sidebarData.is_logged_in && !appHasTopbar" :data="sidebarData" />
 
       <gl-button
         v-if="isImpersonating"
diff --git a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
index 2e505099f3f092..b26efc4df8cf32 100644
--- a/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
+++ b/app/assets/javascripts/super_sidebar/super_sidebar_bundle.js
@@ -198,21 +198,75 @@ export const initSuperSidebarToggle = () => {
   });
 };
 
-export const initSuperTopbar = () => {
-  const el = document.querySelector('#app-topnav');
+export const initSuperTopbar = async ({
+  rootPath,
+  currentPath,
+  isSaas,
+  sidebarData,
+  searchPath,
+  issuesPath,
+  mrPath,
+  autocompletePath,
+  settingsPath,
+  searchContext,
+  projectsPath,
+  groupsPath,
+  projectFilesPath,
+  projectBlobPath,
+  commandPaletteCommands,
+  commandPaletteLinks,
+  contextSwitcherLinks,
+  isImpersonating,
+  isGroup,
+}) => {
+  const el = document.querySelector('#js-app-topbar');
   if (!el) return false;
 
-  const { props } = el.dataset;
-  const topbarProps = JSON.parse(props);
-
   return new Vue({
     el,
+    apolloProvider: await getApolloProvider(),
     provide: {
-      rootPath: '/',
+      rootPath,
+      currentPath,
+      isImpersonating,
+      ...getTrialStatusWidgetData(sidebarData),
+      commandPaletteCommands,
+      commandPaletteLinks,
+      contextSwitcherLinks,
+      autocompletePath,
+      settingsPath,
+      searchContext,
+      projectFilesPath,
+      projectBlobPath,
+      projectsPath,
+      groupsPath,
+      groupPath: groupsPath,
+      fullPath: sidebarData.work_items?.full_path,
+      hasIssuableHealthStatusFeature: sidebarData.work_items?.has_issuable_health_status_feature,
+      hasIssueWeightsFeature: sidebarData.work_items?.has_issue_weights_feature,
+      hasIterationsFeature: sidebarData.work_items?.has_iterations_feature,
+      issuesListPath: sidebarData.work_items?.issues_list_path,
+      canAdminLabel: parseBoolean(sidebarData.work_items?.can_admin_label),
+      labelsManagePath: sidebarData.work_items?.labels_manage_path,
+      workItemPlanningViewEnabled: parseBoolean(
+        sidebarData.work_items?.work_item_planning_view_enabled,
+      ),
+      isGroup,
+      isSaas: parseBoolean(isSaas),
     },
+    store: createStore({
+      searchPath,
+      issuesPath,
+      mrPath,
+      autocompletePath,
+      searchContext,
+      search: '',
+    }),
     render(h) {
       return h(SuperTopbar, {
-        props: topbarProps,
+        props: {
+          sidebarData,
+        },
       });
     },
   });
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 0be0d87dfb511e..644e409dc45329 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -753,12 +753,14 @@ $scroll-scrim-height: 2.25rem;
   top: 0;
   left: 0;
   width: 100vw;
+
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   gap: 1rem;
+  justify-content: space-between;
 
   z-index: 99999; // total hack to see the topbar while layout isn't ready for it yet
 
-  padding: 0.25rem;
+  padding: 0.25rem 1rem;
 }
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index cdccf80ede3f4f..33599e8c7931c6 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -16,7 +16,7 @@
     = header_message
 
     - if current_user # && tbd_feature-flag is true
-      %header#app-topnav{data: { props: super_topbar_props.to_json } }
+      %header#js-app-topbar{data: { props: super_topbar_props.to_json } }
     - else
       = render partial: "layouts/header/super_sidebar_logged_out"
     = render 'layouts/page', sidebar: sidebar, nav: nav
diff --git a/config/feature_flags/wip/global_topbar.yml b/config/feature_flags/wip/global_topbar.yml
new file mode 100644
index 00000000000000..13913df18e234f
--- /dev/null
+++ b/config/feature_flags/wip/global_topbar.yml
@@ -0,0 +1,10 @@
+---
+name: global_topbar
+description: 
+feature_issue_url: 
+introduced_by_url: 
+rollout_issue_url: 
+milestone: '18.3'
+group: group::personal productivity
+type: wip
+default_enabled: false
diff --git a/lib/gitlab/gon_helper.rb b/lib/gitlab/gon_helper.rb
index a0715ff7da386c..6df1970e655e65 100644
--- a/lib/gitlab/gon_helper.rb
+++ b/lib/gitlab/gon_helper.rb
@@ -100,6 +100,7 @@ def add_gon_feature_flags
       push_frontend_feature_flag(:glql_work_items, current_user, type: :wip)
       push_frontend_feature_flag(:whats_new_featured_carousel)
       push_frontend_feature_flag(:extensible_reference_filters, current_user)
+      push_frontend_feature_flag(:global_topbar, current_user)
     end
 
     # Exposes the state of a feature flag to the frontend code.
-- 
GitLab


From 85297a700c640cbc6178c1c49fe6403a58b25f62 Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Wed, 30 Jul 2025 13:09:58 +0200
Subject: [PATCH 03/12] wip: add search modal

modal opens. trigger button not styled yet.
---
 .../super_sidebar/components/topbar.vue       | 23 +++++++++++++++----
 .../super_sidebar/components/user_bar.vue     |  2 +-
 .../stylesheets/framework/super_sidebar.scss  |  2 +-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/super_sidebar/components/topbar.vue b/app/assets/javascripts/super_sidebar/components/topbar.vue
index 6b9282ddd41296..2798867dd7eca3 100644
--- a/app/assets/javascripts/super_sidebar/components/topbar.vue
+++ b/app/assets/javascripts/super_sidebar/components/topbar.vue
@@ -1,9 +1,22 @@
 <script>
+import { GlModalDirective } from '@gitlab/ui';
 import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
 import UserMenu from './user_menu.vue';
+import { SEARCH_MODAL_ID } from './global_search/constants';
 
 export default {
-  components: { BrandLogo, UserMenu },
+  SEARCH_MODAL_ID,
+  components: {
+    BrandLogo,
+    UserMenu,
+    SearchModal: () =>
+      import(
+        /* webpackChunkName: 'global_search_modal' */ './global_search/components/global_search.vue'
+      ),
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
   props: {
     logoUrl: {
       type: String,
@@ -21,9 +34,11 @@ export default {
 <template>
   <header id="app-topnav">
     <brand-logo :logo-url="logoUrl" />
-    <span>
-      tbd: org switcher, breadcrumbs, command palette, duo button, admin foo, user actions
-    </span>
+    <span> tbd: org switcher, breadcrumbs, duo button, admin foo, user actions </span>
+
+    <button v-gl-modal="$options.SEARCH_MODAL_ID">{{ __('Search...') }}</button>
+    <search-modal />
+
     <user-menu v-if="sidebarData.is_logged_in" :data="sidebarData" />
   </header>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 6baa43f1d6151b..ef5e0c24076410 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -217,7 +217,7 @@ export default {
       />
     </div>
 
-    <div class="gl-grow">
+    <div v-if="!appHasTopbar" class="gl-grow">
       <gl-button
         id="super-sidebar-search"
         v-gl-tooltip.bottom.html="searchTooltip"
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 644e409dc45329..a713e0b777bca1 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -760,7 +760,7 @@ $scroll-scrim-height: 2.25rem;
   gap: 1rem;
   justify-content: space-between;
 
-  z-index: 99999; // total hack to see the topbar while layout isn't ready for it yet
+  z-index: 999; // total hack to see the topbar while layout isn't ready for it yet
 
   padding: 0.25rem 1rem;
 }
-- 
GitLab


From 7094a4313425d5bc1de2e8610aa2220c17a486c6 Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Thu, 31 Jul 2025 13:01:51 +0200
Subject: [PATCH 04/12] wip: shift other content below new topbar

---
 app/assets/javascripts/super_sidebar/components/topbar.vue | 4 ++--
 app/assets/stylesheets/framework/common.scss               | 4 ++++
 app/assets/stylesheets/framework/super_sidebar.scss        | 2 ++
 app/assets/stylesheets/framework/variables.scss            | 3 ++-
 app/helpers/application_helper.rb                          | 1 +
 5 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/super_sidebar/components/topbar.vue b/app/assets/javascripts/super_sidebar/components/topbar.vue
index 2798867dd7eca3..02bd1b1740c9aa 100644
--- a/app/assets/javascripts/super_sidebar/components/topbar.vue
+++ b/app/assets/javascripts/super_sidebar/components/topbar.vue
@@ -33,8 +33,8 @@ export default {
 
 <template>
   <header id="app-topnav">
-    <brand-logo :logo-url="logoUrl" />
-    <span> tbd: org switcher, breadcrumbs, duo button, admin foo, user actions </span>
+    <brand-logo :logo-url="logoUrl" class="!gl-p-0" />
+    <span> tbd: org switcher, duo button, admin foo, user actions </span>
 
     <button v-gl-modal="$options.SEARCH_MODAL_ID">{{ __('Search...') }}</button>
     <search-modal />
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index bfce235ba9fa7e..f28fd47bc592e6 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -21,6 +21,10 @@
   --top-bar-height: #{$top-bar-height};
 }
 
+.with-global-top-bar {
+  --global-top-bar-height: #{$global-top-bar-height};
+}
+
 .with-system-footer {
   --system-footer-height: #{$system-footer-height};
 }
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index a713e0b777bca1..3ab3b17087f5e6 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -753,6 +753,8 @@ $scroll-scrim-height: 2.25rem;
   top: 0;
   left: 0;
   width: 100vw;
+  height: $global-top-bar-height;
+
 
   display: flex;
   flex-direction: row;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 80752d31685916..8dea9b94dfec3e 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -151,6 +151,7 @@ $system-footer-height: $system-header-height;
 $mr-sticky-header-height: 4.5rem;
 $mr-review-bar-height: calc(2rem + 16px);
 $top-bar-height: 48px;
+$global-top-bar-height: 36px;
 $home-panel-title-row-height: 48px;
 $home-panel-avatar-mobile-size: 24px;
 $issuable-title-max-width: 350px;
@@ -165,7 +166,7 @@ $file-header-height: 42px;
  * Calculated heights
  */
 $calc-system-headers-height: calc(var(--system-header-height) + var(--performance-bar-height));
-$calc-application-bars-height: calc(var(--header-height) + #{$calc-system-headers-height});
+$calc-application-bars-height: calc(var(--header-height) + #{$calc-system-headers-height} + var(--global-top-bar-height));
 $calc-application-header-height: calc(#{$calc-application-bars-height} + var(--top-bar-height));
 $calc-application-footer-height: var(--system-footer-height);
 $calc-application-viewport-height: calc(100vh - #{$calc-application-header-height} - #{$calc-application-footer-height});
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 531b25ee87c477..c5fcc8b455804a 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -304,6 +304,7 @@ def conditional_link_to(condition, options, html_options = {}, &block)
 
   def page_class
     class_names = ['with-top-bar']
+    class_names << 'with-global-top-bar' if Feature.enabled?(:global_topbar, current_user)
     class_names << 'issue-boards-page gl-overflow-auto' if current_controller?(:boards)
     class_names << 'epic-boards-page gl-overflow-auto' if current_controller?(:epic_boards)
     class_names << 'with-performance-bar' if performance_bar_enabled?
-- 
GitLab


From 1475968df735b921f505c71989fd512684738515 Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Thu, 31 Jul 2025 13:09:08 +0200
Subject: [PATCH 05/12] wip: add user counts

needs a bit of a refactor. could be pulled out and done early.
---
 .../super_sidebar/components/topbar.vue       |   5 +-
 .../super_sidebar/components/user_bar.vue     |  65 +-----------
 .../super_sidebar/components/user_counts.vue  | 100 ++++++++++++++++++
 3 files changed, 108 insertions(+), 62 deletions(-)
 create mode 100644 app/assets/javascripts/super_sidebar/components/user_counts.vue

diff --git a/app/assets/javascripts/super_sidebar/components/topbar.vue b/app/assets/javascripts/super_sidebar/components/topbar.vue
index 02bd1b1740c9aa..07907d086cde18 100644
--- a/app/assets/javascripts/super_sidebar/components/topbar.vue
+++ b/app/assets/javascripts/super_sidebar/components/topbar.vue
@@ -2,12 +2,14 @@
 import { GlModalDirective } from '@gitlab/ui';
 import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
 import UserMenu from './user_menu.vue';
+import UserCounts from './user_counts.vue';
 import { SEARCH_MODAL_ID } from './global_search/constants';
 
 export default {
   SEARCH_MODAL_ID,
   components: {
     BrandLogo,
+    UserCounts,
     UserMenu,
     SearchModal: () =>
       import(
@@ -34,11 +36,12 @@ export default {
 <template>
   <header id="app-topnav">
     <brand-logo :logo-url="logoUrl" class="!gl-p-0" />
-    <span> tbd: org switcher, duo button, admin foo, user actions </span>
+    <span>tbd: org switcher, duo button, admin foo</span>
 
     <button v-gl-modal="$options.SEARCH_MODAL_ID">{{ __('Search...') }}</button>
     <search-modal />
 
+    <user-counts v-if="sidebarData.is_logged_in" :sidebar-data="sidebarData" />
     <user-menu v-if="sidebarData.is_logged_in" :data="sidebarData" />
   </header>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index ef5e0c24076410..f326dc30e15797 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -13,10 +13,9 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
 import { JS_TOGGLE_COLLAPSE_CLASS } from '../constants';
 import CreateMenu from './create_menu.vue';
-import Counter from './counter.vue';
-import MergeRequestMenu from './merge_request_menu.vue';
 import UserMenu from './user_menu.vue';
 import SuperSidebarToggle from './super_sidebar_toggle.vue';
+import UserCounts from './user_counts.vue';
 import { SEARCH_MODAL_ID } from './global_search/constants';
 
 const trackingMixin = InternalEvents.mixin();
@@ -28,12 +27,11 @@ export default {
   JS_TOGGLE_COLLAPSE_CLASS,
   SEARCH_MODAL_ID,
   components: {
-    Counter,
     CreateMenu,
     GlBadge,
     GlButton,
-    MergeRequestMenu,
     UserMenu,
+    UserCounts,
     SearchModal: () =>
       import(
         /* webpackChunkName: 'global_search_modal' */ './global_search/components/global_search.vue'
@@ -45,14 +43,11 @@ export default {
       import(/* webpackChunkName: 'organization_switcher' */ './organization_switcher.vue'),
   },
   i18n: {
-    issues: __('Assigned issues'),
-    mergeRequests: __('Merge requests'),
     searchKbdHelp: sprintf(
       s__('GlobalSearch|Type %{kbdOpen}/%{kbdClose} to search'),
       { kbdOpen: '<kbd>', kbdClose: '</kbd>' },
       false,
     ),
-    todoList: __('To-Do List'),
     stopImpersonating: __('Stop impersonating'),
     searchBtnText: __('Search or go to…'),
   },
@@ -75,16 +70,11 @@ export default {
   },
   data() {
     return {
-      mrMenuShown: false,
       searchTooltip: this.$options.i18n.searchKbdHelp,
-      userCounts,
       isLoggedIn: isLoggedIn(),
     };
   },
   computed: {
-    mergeRequestMenuComponent() {
-      return this.sidebarData.merge_request_menu ? 'merge-request-menu' : 'div';
-    },
     shouldShowOrganizationSwitcher() {
       return (
         this.glFeatures.uiForOrganizations && this.isLoggedIn && window.gon.current_organization
@@ -167,55 +157,8 @@ export default {
       />
     </div>
     <organization-switcher v-if="shouldShowOrganizationSwitcher" />
-    <div v-if="sidebarData.is_logged_in" class="gl-flex gl-justify-between gl-gap-2">
-      <counter
-        v-gl-tooltip:super-sidebar.bottom="$options.i18n.issues"
-        class="dashboard-shortcuts-issues gl-basis-1/3"
-        icon="issues"
-        :count="userCounts.assigned_issues"
-        :href="sidebarData.issues_dashboard_path"
-        :label="$options.i18n.issues"
-        data-testid="issues-shortcut-button"
-        data-track-action="click_link"
-        data-track-label="issues_link"
-        data-track-property="nav_core_menu"
-      />
-      <component
-        :is="mergeRequestMenuComponent"
-        class="!gl-block gl-basis-1/3"
-        :items="sidebarData.merge_request_menu"
-        @shown="mrMenuShown = true"
-        @hidden="mrMenuShown = false"
-      >
-        <counter
-          v-gl-tooltip:super-sidebar.bottom="mrMenuShown ? '' : $options.i18n.mergeRequests"
-          class="gl-w-full"
-          :class="{
-            'js-merge-request-dashboard-shortcut': !sidebarData.merge_request_menu,
-          }"
-          icon="merge-request"
-          :href="sidebarData.merge_request_dashboard_path"
-          :count="userCounts.total_merge_requests"
-          :label="$options.i18n.mergeRequests"
-          data-testid="merge-requests-shortcut-button"
-          data-track-action="click_dropdown"
-          data-track-label="merge_requests_menu"
-          data-track-property="nav_core_menu"
-        />
-      </component>
-      <counter
-        v-gl-tooltip:super-sidebar.bottom="$options.i18n.todoList"
-        class="shortcuts-todos js-todos-count gl-basis-1/3"
-        icon="todo-done"
-        :count="userCounts.todos"
-        :href="sidebarData.todos_dashboard_path"
-        :label="$options.i18n.todoList"
-        data-testid="todos-shortcut-button"
-        data-track-action="click_link"
-        data-track-label="todos_link"
-        data-track-property="nav_core_menu"
-      />
-    </div>
+
+    <user-counts v-if="sidebarData.is_logged_in && !appHasTopbar" :sidebar-data="sidebarData" />
 
     <div v-if="!appHasTopbar" class="gl-grow">
       <gl-button
diff --git a/app/assets/javascripts/super_sidebar/components/user_counts.vue b/app/assets/javascripts/super_sidebar/components/user_counts.vue
new file mode 100644
index 00000000000000..8be4e9b11a061c
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/user_counts.vue
@@ -0,0 +1,100 @@
+<script>
+import { GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { userCounts } from '~/super_sidebar/user_counts_manager';
+import Counter from './counter.vue';
+import MergeRequestMenu from './merge_request_menu.vue';
+
+export default {
+  name: 'UserCounts',
+  components: {
+    Counter,
+    MergeRequestMenu,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    sidebarData: {
+      type: Object,
+      required: true,
+    },
+  },
+  i18n: {
+    issues: __('Assigned issues'),
+    mergeRequests: __('Merge requests'),
+    todoList: __('To-Do List'),
+  },
+  data() {
+    return {
+      mrMenuShown: false,
+      userCounts,
+    };
+  },
+  computed: {
+    mergeRequestMenuComponent() {
+      return this.sidebarData.merge_request_menu ? 'merge-request-menu' : 'div';
+    },
+  },
+  methods: {
+    onMergeRequestMenuShown() {
+      this.mrMenuShown = true;
+    },
+    onMergeRequestMenuHidden() {
+      this.mrMenuShown = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-flex gl-justify-between gl-gap-2">
+    <counter
+      v-gl-tooltip:super-sidebar.bottom="$options.i18n.issues"
+      class="dashboard-shortcuts-issues gl-basis-1/3"
+      icon="issues"
+      :count="userCounts.assigned_issues"
+      :href="sidebarData.issues_dashboard_path"
+      :label="$options.i18n.issues"
+      data-testid="issues-shortcut-button"
+      data-track-action="click_link"
+      data-track-label="issues_link"
+      data-track-property="nav_core_menu"
+    />
+    <component
+      :is="mergeRequestMenuComponent"
+      class="!gl-block gl-basis-1/3"
+      :items="sidebarData.merge_request_menu"
+      @shown="onMergeRequestMenuShown"
+      @hidden="onMergeRequestMenuHidden"
+    >
+      <counter
+        v-gl-tooltip:super-sidebar.bottom="mrMenuShown ? '' : $options.i18n.mergeRequests"
+        class="gl-w-full"
+        :class="{
+          'js-merge-request-dashboard-shortcut': !sidebarData.merge_request_menu,
+        }"
+        icon="merge-request"
+        :href="sidebarData.merge_request_dashboard_path"
+        :count="userCounts.total_merge_requests"
+        :label="$options.i18n.mergeRequests"
+        data-testid="merge-requests-shortcut-button"
+        data-track-action="click_dropdown"
+        data-track-label="merge_requests_menu"
+        data-track-property="nav_core_menu"
+      />
+    </component>
+    <counter
+      v-gl-tooltip:super-sidebar.bottom="$options.i18n.todoList"
+      class="shortcuts-todos js-todos-count gl-basis-1/3"
+      icon="todo-done"
+      :count="userCounts.todos"
+      :href="sidebarData.todos_dashboard_path"
+      :label="$options.i18n.todoList"
+      data-testid="todos-shortcut-button"
+      data-track-action="click_link"
+      data-track-label="todos_link"
+      data-track-property="nav_core_menu"
+    />
+  </div>
+</template>
-- 
GitLab


From e2e6cb98951702ed050fe84c6b6b8df06c897c10 Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Thu, 31 Jul 2025 13:21:54 +0200
Subject: [PATCH 06/12] wip: add duo chat button

---
 .../super_sidebar/components/topbar.vue       | 22 ++++++++++++++-----
 .../stylesheets/framework/super_sidebar.scss  |  3 ++-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/super_sidebar/components/topbar.vue b/app/assets/javascripts/super_sidebar/components/topbar.vue
index 07907d086cde18..74dbb0bcfe6e78 100644
--- a/app/assets/javascripts/super_sidebar/components/topbar.vue
+++ b/app/assets/javascripts/super_sidebar/components/topbar.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModalDirective } from '@gitlab/ui';
 import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
 import UserMenu from './user_menu.vue';
 import UserCounts from './user_counts.vue';
@@ -9,6 +9,7 @@ export default {
   SEARCH_MODAL_ID,
   components: {
     BrandLogo,
+    GlButton,
     UserCounts,
     UserMenu,
     SearchModal: () =>
@@ -35,13 +36,24 @@ export default {
 
 <template>
   <header id="app-topnav">
+    <!-- tbd: org switcher, admin foo -->
+
+    <!-- left side -->
     <brand-logo :logo-url="logoUrl" class="!gl-p-0" />
-    <span>tbd: org switcher, duo button, admin foo</span>
 
-    <button v-gl-modal="$options.SEARCH_MODAL_ID">{{ __('Search...') }}</button>
+    <!-- center -->
+    <gl-button icon="search" size="small" v-gl-modal="$options.SEARCH_MODAL_ID">{{
+      __('Search...')
+    }}</gl-button>
     <search-modal />
 
-    <user-counts v-if="sidebarData.is_logged_in" :sidebar-data="sidebarData" />
-    <user-menu v-if="sidebarData.is_logged_in" :data="sidebarData" />
+    <!-- right side -->
+    <div class="gl-flex gl-flex-nowrap gl-gap-3">
+      <gl-button icon="duo-chat" size="small" class="js-tanuki-bot-chat-toggle"
+        >GitLab Duo Chat</gl-button
+      >
+      <user-counts v-if="sidebarData.is_logged_in" :sidebar-data="sidebarData" />
+      <user-menu v-if="sidebarData.is_logged_in" :data="sidebarData" />
+    </div>
   </header>
 </template>
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 3ab3b17087f5e6..704e1ea6d1e0af 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -762,7 +762,8 @@ $scroll-scrim-height: 2.25rem;
   gap: 1rem;
   justify-content: space-between;
 
-  z-index: 999; // total hack to see the topbar while layout isn't ready for it yet
+  z-index: $top-bar-z-index;
+  background-color: var(--gl-background-color-default);
 
   padding: 0.25rem 1rem;
 }
-- 
GitLab


From 6bddddb9e47e684591534093b065763a2625829c Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Thu, 31 Jul 2025 14:03:33 +0200
Subject: [PATCH 07/12] wip: add org switcher

---
 .../super_sidebar/components/topbar.vue       | 39 +++++++++++++++++--
 .../super_sidebar/components/user_bar.vue     |  6 ++-
 .../stylesheets/framework/super_sidebar.scss  | 14 ++++++-
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/super_sidebar/components/topbar.vue b/app/assets/javascripts/super_sidebar/components/topbar.vue
index 74dbb0bcfe6e78..39e20bc88e09b7 100644
--- a/app/assets/javascripts/super_sidebar/components/topbar.vue
+++ b/app/assets/javascripts/super_sidebar/components/topbar.vue
@@ -1,8 +1,11 @@
 <script>
 import { GlButton, GlModalDirective } from '@gitlab/ui';
 import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
+import { isLoggedIn } from '~/lib/utils/common_utils';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import UserMenu from './user_menu.vue';
 import UserCounts from './user_counts.vue';
+import CreateMenu from './create_menu.vue';
 import { SEARCH_MODAL_ID } from './global_search/constants';
 
 export default {
@@ -10,16 +13,20 @@ export default {
   components: {
     BrandLogo,
     GlButton,
+    CreateMenu,
     UserCounts,
     UserMenu,
     SearchModal: () =>
       import(
         /* webpackChunkName: 'global_search_modal' */ './global_search/components/global_search.vue'
       ),
+    OrganizationSwitcher: () =>
+      import(/* webpackChunkName: 'organization_switcher' */ './organization_switcher.vue'),
   },
   directives: {
     GlModal: GlModalDirective,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     logoUrl: {
       type: String,
@@ -31,15 +38,30 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isLoggedIn: isLoggedIn(),
+    };
+  },
+  computed: {
+    shouldShowOrganizationSwitcher() {
+      return (
+        this.glFeatures.uiForOrganizations && this.isLoggedIn && window.gon.current_organization
+      );
+    },
+  },
 };
 </script>
 
 <template>
   <header id="app-topnav">
-    <!-- tbd: org switcher, admin foo -->
+    <!-- tbd: admin foo -->
 
     <!-- left side -->
-    <brand-logo :logo-url="logoUrl" class="!gl-p-0" />
+    <div class="gl-flex gl-flex-nowrap gl-items-center gl-gap-3">
+      <brand-logo :logo-url="logoUrl" class="!gl-p-0" />
+      <organization-switcher v-if="shouldShowOrganizationSwitcher" />
+    </div>
 
     <!-- center -->
     <gl-button icon="search" size="small" v-gl-modal="$options.SEARCH_MODAL_ID">{{
@@ -48,11 +70,20 @@ export default {
     <search-modal />
 
     <!-- right side -->
-    <div class="gl-flex gl-flex-nowrap gl-gap-3">
+    <div class="gl-flex gl-flex-nowrap gl-items-center gl-gap-3">
+      <create-menu
+        v-if="sidebarData.is_logged_in && sidebarData.create_new_menu_groups.length > 0"
+        :groups="sidebarData.create_new_menu_groups"
+      />
+
       <gl-button icon="duo-chat" size="small" class="js-tanuki-bot-chat-toggle"
         >GitLab Duo Chat</gl-button
       >
-      <user-counts v-if="sidebarData.is_logged_in" :sidebar-data="sidebarData" />
+      <user-counts
+        v-if="sidebarData.is_logged_in"
+        :sidebar-data="sidebarData"
+        class="topbar-user-counts"
+      />
       <user-menu v-if="sidebarData.is_logged_in" :data="sidebarData" />
     </div>
   </header>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index f326dc30e15797..82d19686313b49 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -138,7 +138,9 @@ export default {
         type="collapse"
       />
       <create-menu
-        v-if="sidebarData.is_logged_in && sidebarData.create_new_menu_groups.length > 0"
+        v-if="
+          sidebarData.is_logged_in && sidebarData.create_new_menu_groups.length > 0 && !appHasTopbar
+        "
         :groups="sidebarData.create_new_menu_groups"
       />
 
@@ -156,7 +158,7 @@ export default {
         data-testid="stop-impersonation-btn"
       />
     </div>
-    <organization-switcher v-if="shouldShowOrganizationSwitcher" />
+    <organization-switcher v-if="shouldShowOrganizationSwitcher && !appHasTopbar" />
 
     <user-counts v-if="sidebarData.is_logged_in && !appHasTopbar" :sidebar-data="sidebarData" />
 
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 704e1ea6d1e0af..8eb27f8928d94e 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -761,9 +761,21 @@ $scroll-scrim-height: 2.25rem;
   flex-wrap: nowrap;
   gap: 1rem;
   justify-content: space-between;
+  align-items: center;
 
-  z-index: $top-bar-z-index;
+  // needs higher z-index than sidebar to have org switcher dropdown visible
+  z-index: calc($super-sidebar-z-index + 1);
   background-color: var(--gl-background-color-default);
 
   padding: 0.25rem 1rem;
+
+  .topbar-user-counts {
+    gap: 0.5rem;
+
+    a {
+      display: flex;
+      color: var(--gl-text-color-default);
+      align-items: center;
+    }
+  }
 }
-- 
GitLab


From 211605e9d29dafb3fc252fc69043227178abcd4d Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Fri, 1 Aug 2025 12:03:41 +0200
Subject: [PATCH 08/12] wip: use existing "with-header" class

this simplifies things! we can reuse the spacing logic for the logged-out topbar.

this fixes a bug where the performance bar overlapped the new topbar.
---
 app/assets/stylesheets/framework/common.scss        | 4 ----
 app/assets/stylesheets/framework/super_sidebar.scss | 4 ++--
 app/assets/stylesheets/framework/variables.scss     | 3 +--
 app/helpers/application_helper.rb                   | 2 +-
 4 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index f28fd47bc592e6..bfce235ba9fa7e 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -21,10 +21,6 @@
   --top-bar-height: #{$top-bar-height};
 }
 
-.with-global-top-bar {
-  --global-top-bar-height: #{$global-top-bar-height};
-}
-
 .with-system-footer {
   --system-footer-height: #{$system-footer-height};
 }
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index 8eb27f8928d94e..d093870686acf7 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -750,10 +750,10 @@ $scroll-scrim-height: 2.25rem;
 // TODO: move to its own file
 #app-topnav {
   position: fixed;
-  top: 0;
+  top: $calc-system-headers-height;
   left: 0;
   width: 100vw;
-  height: $global-top-bar-height;
+  height: var(--header-height);
 
 
   display: flex;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 8dea9b94dfec3e..80752d31685916 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -151,7 +151,6 @@ $system-footer-height: $system-header-height;
 $mr-sticky-header-height: 4.5rem;
 $mr-review-bar-height: calc(2rem + 16px);
 $top-bar-height: 48px;
-$global-top-bar-height: 36px;
 $home-panel-title-row-height: 48px;
 $home-panel-avatar-mobile-size: 24px;
 $issuable-title-max-width: 350px;
@@ -166,7 +165,7 @@ $file-header-height: 42px;
  * Calculated heights
  */
 $calc-system-headers-height: calc(var(--system-header-height) + var(--performance-bar-height));
-$calc-application-bars-height: calc(var(--header-height) + #{$calc-system-headers-height} + var(--global-top-bar-height));
+$calc-application-bars-height: calc(var(--header-height) + #{$calc-system-headers-height});
 $calc-application-header-height: calc(#{$calc-application-bars-height} + var(--top-bar-height));
 $calc-application-footer-height: var(--system-footer-height);
 $calc-application-viewport-height: calc(100vh - #{$calc-application-header-height} - #{$calc-application-footer-height});
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index c5fcc8b455804a..82e28690d1b815 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -304,7 +304,7 @@ def conditional_link_to(condition, options, html_options = {}, &block)
 
   def page_class
     class_names = ['with-top-bar']
-    class_names << 'with-global-top-bar' if Feature.enabled?(:global_topbar, current_user)
+    class_names << 'with-header' if Feature.enabled?(:global_topbar, current_user)
     class_names << 'issue-boards-page gl-overflow-auto' if current_controller?(:boards)
     class_names << 'epic-boards-page gl-overflow-auto' if current_controller?(:epic_boards)
     class_names << 'with-performance-bar' if performance_bar_enabled?
-- 
GitLab


From 8a7043e1c2bc5fe15e674e0d82a06d105e91492f Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Fri, 1 Aug 2025 12:19:30 +0200
Subject: [PATCH 09/12] f1 if ff

---
 app/views/layouts/application.html.haml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 33599e8c7931c6..d7922a49de5ca6 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -15,9 +15,9 @@
     = render 'peek/bar'
     = header_message
 
-    - if current_user # && tbd_feature-flag is true
-      %header#js-app-topbar{data: { props: super_topbar_props.to_json } }
-    - else
+    - if current_user && Feature.enabled?(:global_topbar, current_user)
+      %header#js-app-topbar{ data: { props: super_topbar_props.to_json } }
+    - elsif !current_user
       = render partial: "layouts/header/super_sidebar_logged_out"
     = render 'layouts/page', sidebar: sidebar, nav: nav
     = footer_message
-- 
GitLab


From 2845ca1aabe9efc62eb2315f1879886ad815e47b Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Mon, 4 Aug 2025 13:52:03 +0200
Subject: [PATCH 10/12] wip: add stop-impersonate button

---
 .../super_sidebar/components/topbar.vue       | 19 +++++++++++++++++--
 .../super_sidebar/components/user_bar.vue     |  2 +-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/super_sidebar/components/topbar.vue b/app/assets/javascripts/super_sidebar/components/topbar.vue
index 39e20bc88e09b7..e087d1c7341a49 100644
--- a/app/assets/javascripts/super_sidebar/components/topbar.vue
+++ b/app/assets/javascripts/super_sidebar/components/topbar.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
 import BrandLogo from 'jh_else_ce/super_sidebar/components/brand_logo.vue';
 import { isLoggedIn } from '~/lib/utils/common_utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -25,8 +25,10 @@ export default {
   },
   directives: {
     GlModal: GlModalDirective,
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [glFeatureFlagsMixin()],
+  inject: ['isImpersonating'],
   props: {
     logoUrl: {
       type: String,
@@ -77,13 +79,26 @@ export default {
       />
 
       <gl-button icon="duo-chat" size="small" class="js-tanuki-bot-chat-toggle"
-        >GitLab Duo Chat</gl-button
+        ><span class="gl-hidden sm:gl-inline">{{ __('GitLab Duo Chat') }}</span></gl-button
       >
+
       <user-counts
         v-if="sidebarData.is_logged_in"
         :sidebar-data="sidebarData"
         class="topbar-user-counts"
       />
+
+      <gl-button
+        v-if="isImpersonating"
+        v-gl-tooltip
+        :href="sidebarData.stop_impersonation_path"
+        :title="__('Stop impersonating')"
+        icon="incognito"
+        category="tertiary"
+        data-method="delete"
+        data-testid="stop-impersonation-btn"
+      />
+
       <user-menu v-if="sidebarData.is_logged_in" :data="sidebarData" />
     </div>
   </header>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 82d19686313b49..66d1b46acef914 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -147,7 +147,7 @@ export default {
       <user-menu v-if="sidebarData.is_logged_in && !appHasTopbar" :data="sidebarData" />
 
       <gl-button
-        v-if="isImpersonating"
+        v-if="isImpersonating && !appHasTopbar"
         v-gl-tooltip.bottom
         :href="sidebarData.stop_impersonation_path"
         :title="$options.i18n.stopImpersonating"
-- 
GitLab


From 94743263192c9605b3e4803f3e24d7d963018ff5 Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Mon, 4 Aug 2025 13:52:42 +0200
Subject: [PATCH 11/12] wip: undo tooltip anchoring

not sure why this was needed. check...
---
 .../javascripts/super_sidebar/components/user_counts.vue    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/super_sidebar/components/user_counts.vue b/app/assets/javascripts/super_sidebar/components/user_counts.vue
index 8be4e9b11a061c..66c6953a711a2e 100644
--- a/app/assets/javascripts/super_sidebar/components/user_counts.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_counts.vue
@@ -50,7 +50,7 @@ export default {
 <template>
   <div class="gl-flex gl-justify-between gl-gap-2">
     <counter
-      v-gl-tooltip:super-sidebar.bottom="$options.i18n.issues"
+      v-gl-tooltip="$options.i18n.issues"
       class="dashboard-shortcuts-issues gl-basis-1/3"
       icon="issues"
       :count="userCounts.assigned_issues"
@@ -69,7 +69,7 @@ export default {
       @hidden="onMergeRequestMenuHidden"
     >
       <counter
-        v-gl-tooltip:super-sidebar.bottom="mrMenuShown ? '' : $options.i18n.mergeRequests"
+        v-gl-tooltip="mrMenuShown ? '' : $options.i18n.mergeRequests"
         class="gl-w-full"
         :class="{
           'js-merge-request-dashboard-shortcut': !sidebarData.merge_request_menu,
@@ -85,7 +85,7 @@ export default {
       />
     </component>
     <counter
-      v-gl-tooltip:super-sidebar.bottom="$options.i18n.todoList"
+      v-gl-tooltip="$options.i18n.todoList"
       class="shortcuts-todos js-todos-count gl-basis-1/3"
       icon="todo-done"
       :count="userCounts.todos"
-- 
GitLab


From d3638a612d96a8741f82fc112d828852e7986beb Mon Sep 17 00:00:00 2001
From: Thomas Hutterer <thutterer@gitlab.com>
Date: Mon, 4 Aug 2025 13:54:23 +0200
Subject: [PATCH 12/12] wip: f mr btn

(when that ff is manually off)
---
 app/assets/stylesheets/framework/super_sidebar.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index d093870686acf7..238d5146960550 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -772,10 +772,11 @@ $scroll-scrim-height: 2.25rem;
   .topbar-user-counts {
     gap: 0.5rem;
 
-    a {
+    .user-bar-button {
       display: flex;
       color: var(--gl-text-color-default);
       align-items: center;
+      border: none;
     }
   }
 }
-- 
GitLab