From 68fefa202f4fea2c09eeacb8dc59ff600c184242 Mon Sep 17 00:00:00 2001
From: Bontagnoli Andrea <andrea.bontagnoli@gmail.com>
Date: Wed, 17 Dec 2025 08:17:59 +0000
Subject: [PATCH] First commit Draft solution

---
 .../super_sidebar/components/menu_section.vue  | 18 ++++++++++++++++++
 .../framework/application-chrome.scss          | 11 +++++++++++
 2 files changed, 29 insertions(+)

diff --git a/app/assets/javascripts/super_sidebar/components/menu_section.vue b/app/assets/javascripts/super_sidebar/components/menu_section.vue
index 054caaf713598f..c38b51953190e3 100644
--- a/app/assets/javascripts/super_sidebar/components/menu_section.vue
+++ b/app/assets/javascripts/super_sidebar/components/menu_section.vue
@@ -91,6 +91,17 @@ export default {
     showExpanded() {
       return !this.isIconOnly && this.isExpanded;
     },
+    arrowStyle() {
+      const button = this.$refs.menuButton;
+      if (!button) return {};
+
+      return {
+        top: '50%',
+        left: 'calc(100% + 4px)',
+        transform: 'translateY(-50%) rotate(45deg)',
+        zIndex: 10001,
+      };
+    },
   },
   watch: {
     isExpanded(newIsExpanded) {
@@ -140,6 +151,7 @@ export default {
   <component :is="tag">
     <button
       :id="`menu-section-button-${itemId}`"
+      ref="menuButton"
       v-outside="handleClickOutside"
       class="super-sidebar-nav-item gl-relative gl-mb-1 gl-flex gl-w-full gl-appearance-none gl-items-center gl-gap-3 gl-rounded-base gl-border-0 gl-bg-transparent gl-px-2 gl-py-1 gl-text-left !gl-text-default !gl-no-underline focus:gl-focus"
       :class="computedLinkClasses"
@@ -168,6 +180,12 @@ export default {
       <span v-if="!isIconOnly" class="gl-mr-2 gl-text-right gl-text-subtle">
         <gl-animated-chevron-right-down-icon :is-on="showExpanded" />
       </span>
+
+      <div
+        v-if="hasFlyout && isMouseOver && !showExpanded"
+        class="menu-section-arrow"
+        :style="arrowStyle"
+      ></div>
     </button>
 
     <flyout-menu
diff --git a/app/assets/stylesheets/framework/application-chrome.scss b/app/assets/stylesheets/framework/application-chrome.scss
index 231a9de97f90fb..9ff2677d7677fe 100644
--- a/app/assets/stylesheets/framework/application-chrome.scss
+++ b/app/assets/stylesheets/framework/application-chrome.scss
@@ -700,6 +700,17 @@
 
 }
 
+.menu-section-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--gl-dropdown-background-color);
+  border-bottom: 2px solid var(--gl-border-color-default);
+  border-left: 2px solid var(--gl-border-color-default);
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+
 /*
  * Themes
  */
-- 
GitLab