Merge branch '322680-fly-out-menus' into 'master'

Style flyout menu Style the new flyout menu which encapsulates the sidebar re-design effort. See merge request gitlab-org/gitlab!63536

Merge branch '322680-fly-out-menus' into 'master'
Style flyout menu Style the new flyout menu which encapsulates the sidebar re-design effort. See merge request gitlab-org/gitlab!63536
d31f442c · David O'Regan · a6d9e198 · 323f980c · d31f442c · d31f442c
Commit d31f442c authored Jun 10, 2021 by David O'Regan
16 changed files
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/app/assets/javascripts/fly_out_nav.js
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar';
+const isRefactoring = document.body.classList.contains('sidebar-refactoring');
 const HIDE_INTERVAL_TIMEOUT = 300;
+const COLLAPSED_PANEL_WIDTH = isRefactoring ? 48 : 50;
 const IS_OVER_CLASS = 'is-over';
 const IS_ABOVE_CLASS = 'is-above';
 const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
@@ -22,12 +24,7 @@ export const setOpenMenu = (menu = null) => {
 export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
-let headerHeight = 50;
+export const getHeaderHeight = () => sidebar?.offsetTop || 0;
-export const getHeaderHeight = () => headerHeight;
-const setHeaderHeight = () => {
-  headerHeight = sidebar.offsetTop;
-};
 export const isSidebarCollapsed = () =>
  sidebar && sidebar.classList.contains(SIDEBAR_COLLAPSED_CLASS);
@@ -87,14 +84,20 @@ export const hideMenu = (el) => {
 };
 export const moveSubItemsToPosition = (el, subItems) => {
+  const hasSubItems = subItems.parentNode.querySelector('.has-sub-items');
+  const header = subItems.querySelector('.fly-out-top-item');
  const boundingRect = el.getBoundingClientRect();
-  const top = calculateTop(boundingRect, subItems.offsetHeight);
+  const left = sidebar ? sidebar.offsetWidth : COLLAPSED_PANEL_WIDTH;
-  const left = sidebar ? sidebar.offsetWidth : 50;
+  let top = calculateTop(boundingRect, subItems.offsetHeight);
+  if (isRefactoring && hasSubItems) {
+    top -= header.offsetHeight;
+  } else if (isRefactoring) {
+    top = boundingRect.top;
+  }
  const isAbove = top < boundingRect.top;
  subItems.classList.add('fly-out-list');
-  subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign
+  subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - getHeaderHeight()}px, 0)`; // eslint-disable-line no-param-reassign
  const subItemsRect = subItems.getBoundingClientRect();
  menuCornerLocs = [
@@ -188,8 +191,6 @@ export default () => {
    });
  }
-  requestIdleCallback(setHeaderHeight);
  items.forEach((el) => {
    const subItems = el.querySelector('.sidebar-sub-level-items');

--- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
@@ -22,7 +22,7 @@ $top-level-item-color: $purple-900;
  color: $gray-darkest;
 }
-&.ui-indigo .nav-sidebar li.active > a {
+&.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a {
  color: $top-level-item-color;
 }
@@ -99,15 +99,15 @@ $top-level-item-color: $purple-900;
    min-height: unset;
  }
-  .fly-out-top-item {
+  .fly-out-top-item:not(.divider) {
-    display: block;
+    display: block !important;
  }
  .avatar-container {
    margin: 0 auto;
  }
-  li.active > a {
+  li.active:not(.fly-out-top-item) > a {
    background-color: $indigo-900-alpha-008;
  }
 }
@@ -115,40 +115,41 @@ $top-level-item-color: $purple-900;
 @mixin sub-level-items-flyout {
  .sidebar-sub-level-items {
    @include media-breakpoint-up(sm) {
-      position: fixed;
+      @include gl-fixed;
-      top: 0;
+      @include gl-top-0;
-      left: 0;
+      @include gl-left-0;
+      @include gl-ml-3;
+      @include gl-mt-0;
+      @include gl-px-0;
+      @include gl-pb-2;
+      @include gl-pt-0;
      min-width: 150px;
-      margin-top: -1px;
+      background-color: $gray-10;
-      padding: 4px 1px;
+      box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24;
-      background-color: $white;
+      border-style: none;
-      box-shadow: 2px 1px 3px $dropdown-shadow-color;
+      border-radius: $border-radius-default;
-      border: 1px solid $gray-darker;
-      border-left: 0;
-      border-radius: 0 3px 3px 0;
-      &::before {
+      .divider {
-        content: '';
+        @include gl-display-none;
-        position: absolute;
-        top: -30px;
-        bottom: -30px;
-        left: -10px;
-        right: -30px;
-        z-index: -1;
      }
-      &.is-above {
+      .divider + li > a {
-        margin-top: 1px;
+        @include gl-mt-2;
      }
-      .divider {
+      li:last-of-type a {
-        height: 1px;
+        @include gl-mb-0;
-        margin: 4px -1px;
+      }
-        padding: 0;
-        background-color: $dropdown-divider-bg;
+      &.is-above {
+        @include gl-mt-0;
      }
    }
+    a {
+      @include gl-px-4;
+    }
    .fly-out-top-item {
      > a {
        display: flex;
@@ -200,6 +201,8 @@ $top-level-item-color: $purple-900;
  @include gl-align-items-center;
  @include gl-rounded-base;
  @include gl-w-auto;
+  @include gl-line-height-normal;
+  transition: none;
  margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
  &:hover {
@@ -207,6 +210,52 @@ $top-level-item-color: $purple-900;
  }
 }
+@mixin fly-out-top-item($has-sub-items: false) {
+  @include gl-display-none;
+  a,
+  a:hover,
+  &.active a,
+  .fly-out-top-item-container {
+    @include gl-mx-0;
+    @include gl-px-5;
+    @include gl-cursor-default;
+    @include gl-pointer-events-none;
+    @include gl-font-sm;
+    background-color: $purple-900;
+    color: $white;
+    @if $has-sub-items {
+      @include gl-mt-n2;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    } @else {
+      @include gl-my-n2;
+      @include gl-mt-0;
+      @include gl-relative;
+      background-color: $black;
+      strong {
+        @include gl-font-weight-normal;
+      }
+      &::before {
+        @include gl-absolute;
+        content: '';
+        display: block;
+        top: 50%;
+        left: $gl-spacing-scale-3/-2;
+        margin-top: -$gl-spacing-scale-3;
+        width: 0;
+        height: 0;
+        border-top: $gl-spacing-scale-3 solid transparent;
+        border-bottom: $gl-spacing-scale-3 solid transparent;
+        border-right: $gl-spacing-scale-3 solid $black;
+      }
+    }
+  }
+}
 //
 // PAGE-LAYOUT
 //
@@ -258,7 +307,6 @@ $top-level-item-color: $purple-900;
  a {
    @include gl-text-decoration-none;
-    @include gl-line-height-normal;
    color: $top-level-item-color;
  }
@@ -269,7 +317,8 @@ $top-level-item-color: $purple-900;
      flex: 1;
    }
-    > a {
+    > a,
+    > .fly-out-top-item-container {
      @include top-level-item;
    }
@@ -278,11 +327,13 @@ $top-level-item-color: $purple-900;
        font-weight: $gl-font-weight-bold;
      }
+      &:not(.fly-out-top-item) {
        > a:not(.has-sub-items) {
          background-color: $indigo-900-alpha-008;
        }
      }
    }
+  }
  ul {
    padding-left: 0;
@@ -298,8 +349,16 @@ $top-level-item-color: $purple-900;
    margin-right: 8px;
  }
+  a:not(.has-sub-items) + .sidebar-sub-level-items {
    .fly-out-top-item {
-    display: none;
+      @include fly-out-top-item($has-sub-items: false);
+    }
+  }
+  a.has-sub-items + .sidebar-sub-level-items {
+    .fly-out-top-item {
+      @include fly-out-top-item($has-sub-items: true);
+    }
  }
  @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
@@ -356,8 +415,8 @@ $top-level-item-color: $purple-900;
 }
 .sidebar-sub-level-items {
-  @include gl-pb-0;
+  @include gl-py-0;
-  display: none;
+  @include gl-display-none;
  &:not(.fly-out-list) {
    li > a {

--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -1251,7 +1251,10 @@ body.sidebar-refactoring.gl-dark
  .sidebar-context-title {
  color: #c4c4c4;
 }
-body.sidebar-refactoring.ui-indigo .nav-sidebar li.active > a {
+body.sidebar-refactoring.ui-indigo
+  .nav-sidebar
+  li.active:not(.fly-out-top-item)
+  > a {
  color: #2f2a6b;
 }
 body.sidebar-refactoring.ui-indigo
@@ -1325,20 +1328,22 @@ body.sidebar-refactoring
 }
 body.sidebar-refactoring
  .nav-sidebar.sidebar-collapsed-desktop
-  .fly-out-top-item {
+  .fly-out-top-item:not(.divider) {
-  display: block;
+  display: block !important;
 }
 body.sidebar-refactoring
  .nav-sidebar.sidebar-collapsed-desktop
  .avatar-container {
  margin: 0 auto;
 }
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop li.active > a {
+body.sidebar-refactoring
+  .nav-sidebar.sidebar-collapsed-desktop
+  li.active:not(.fly-out-top-item)
+  > a {
  background-color: rgba(41, 41, 97, 0.08);
 }
 body.sidebar-refactoring .nav-sidebar a {
  text-decoration: none;
-  line-height: 1rem;
  color: #2f2a6b;
 }
 body.sidebar-refactoring .nav-sidebar li {
@@ -1347,7 +1352,8 @@ body.sidebar-refactoring .nav-sidebar li {
 body.sidebar-refactoring .nav-sidebar li .nav-item-name {
  flex: 1;
 }
-body.sidebar-refactoring .nav-sidebar li > a {
+body.sidebar-refactoring .nav-sidebar li > a,
+body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
@@ -1356,12 +1362,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
  align-items: center;
  border-radius: 0.25rem;
  width: auto;
+  line-height: 1rem;
  margin: 1px 4px;
 }
 body.sidebar-refactoring .nav-sidebar li.active > a {
  font-weight: 600;
 }
-body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) {
+body.sidebar-refactoring
+  .nav-sidebar
+  li.active:not(.fly-out-top-item)
+  > a:not(.has-sub-items) {
  background-color: rgba(41, 41, 97, 0.08);
 }
 body.sidebar-refactoring .nav-sidebar ul {
@@ -1377,9 +1387,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
  display: flex;
  margin-right: 8px;
 }
-body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item {
+  display: none;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: default;
+  pointer-events: none;
+  font-size: 0.75rem;
+  background-color: #2f2a6b;
+  color: #333;
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+  margin-top: 0;
+  position: relative;
+  background-color: #fff;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a
+  strong,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a
+  strong,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container
+  strong {
+  font-weight: 400;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a::before,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a::before,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container::before {
+  position: absolute;
+  content: "";
+  display: block;
+  top: 50%;
+  left: -0.25rem;
+  margin-top: -0.5rem;
+  width: 0;
+  height: 0;
+  border-top: 0.5rem solid transparent;
+  border-bottom: 0.5rem solid transparent;
+  border-right: 0.5rem solid #fff;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item {
  display: none;
 }
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: default;
+  pointer-events: none;
+  font-size: 0.75rem;
+  background-color: #2f2a6b;
+  color: #333;
+  margin-top: -0.25rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
 @media (min-width: 768px) and (max-width: 1199px) {
  body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
    width: 48px;
@@ -1417,8 +1555,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .fly-out-top-item {
+    .fly-out-top-item:not(.divider) {
-    display: block;
+    display: block !important;
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
@@ -1427,7 +1565,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
-    li.active
+    li.active:not(.fly-out-top-item)
    > a {
    background-color: rgba(41, 41, 97, 0.08);
  }
@@ -1516,6 +1654,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
  align-items: center;
  border-radius: 0.25rem;
  width: auto;
+  line-height: 1rem;
  margin: 1px 4px;
  padding: 0.25rem;
  margin-bottom: 0.25rem;
@@ -1617,6 +1756,7 @@ body.sidebar-refactoring
  color: #9dc7f1;
 }
 body.sidebar-refactoring .sidebar-sub-level-items {
+  padding-top: 0;
  padding-bottom: 0;
  display: none;
 }

--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -1213,7 +1213,10 @@ input {
    display: none;
  }
 }
-body.sidebar-refactoring.ui-indigo .nav-sidebar li.active > a {
+body.sidebar-refactoring.ui-indigo
+  .nav-sidebar
+  li.active:not(.fly-out-top-item)
+  > a {
  color: #2f2a6b;
 }
 body.sidebar-refactoring.ui-indigo
@@ -1287,20 +1290,22 @@ body.sidebar-refactoring
 }
 body.sidebar-refactoring
  .nav-sidebar.sidebar-collapsed-desktop
-  .fly-out-top-item {
+  .fly-out-top-item:not(.divider) {
-  display: block;
+  display: block !important;
 }
 body.sidebar-refactoring
  .nav-sidebar.sidebar-collapsed-desktop
  .avatar-container {
  margin: 0 auto;
 }
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop li.active > a {
+body.sidebar-refactoring
+  .nav-sidebar.sidebar-collapsed-desktop
+  li.active:not(.fly-out-top-item)
+  > a {
  background-color: rgba(41, 41, 97, 0.08);
 }
 body.sidebar-refactoring .nav-sidebar a {
  text-decoration: none;
-  line-height: 1rem;
  color: #2f2a6b;
 }
 body.sidebar-refactoring .nav-sidebar li {
@@ -1309,7 +1314,8 @@ body.sidebar-refactoring .nav-sidebar li {
 body.sidebar-refactoring .nav-sidebar li .nav-item-name {
  flex: 1;
 }
-body.sidebar-refactoring .nav-sidebar li > a {
+body.sidebar-refactoring .nav-sidebar li > a,
+body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
@@ -1318,12 +1324,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
  align-items: center;
  border-radius: 0.25rem;
  width: auto;
+  line-height: 1rem;
  margin: 1px 4px;
 }
 body.sidebar-refactoring .nav-sidebar li.active > a {
  font-weight: 600;
 }
-body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) {
+body.sidebar-refactoring
+  .nav-sidebar
+  li.active:not(.fly-out-top-item)
+  > a:not(.has-sub-items) {
  background-color: rgba(41, 41, 97, 0.08);
 }
 body.sidebar-refactoring .nav-sidebar ul {
@@ -1339,9 +1349,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
  display: flex;
  margin-right: 8px;
 }
-body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item {
+  display: none;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: default;
+  pointer-events: none;
+  font-size: 0.75rem;
+  background-color: #2f2a6b;
+  color: #fff;
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+  margin-top: 0;
+  position: relative;
+  background-color: #000;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a
+  strong,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a
+  strong,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container
+  strong {
+  font-weight: 400;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a::before,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a::before,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container::before {
+  position: absolute;
+  content: "";
+  display: block;
+  top: 50%;
+  left: -0.25rem;
+  margin-top: -0.5rem;
+  width: 0;
+  height: 0;
+  border-top: 0.5rem solid transparent;
+  border-bottom: 0.5rem solid transparent;
+  border-right: 0.5rem solid #000;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item {
  display: none;
 }
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: default;
+  pointer-events: none;
+  font-size: 0.75rem;
+  background-color: #2f2a6b;
+  color: #fff;
+  margin-top: -0.25rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
 @media (min-width: 768px) and (max-width: 1199px) {
  body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
    width: 48px;
@@ -1379,8 +1517,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .fly-out-top-item {
+    .fly-out-top-item:not(.divider) {
-    display: block;
+    display: block !important;
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
@@ -1389,7 +1527,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
-    li.active
+    li.active:not(.fly-out-top-item)
    > a {
    background-color: rgba(41, 41, 97, 0.08);
  }
@@ -1478,6 +1616,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
  align-items: center;
  border-radius: 0.25rem;
  width: auto;
+  line-height: 1rem;
  margin: 1px 4px;
  padding: 0.25rem;
  margin-bottom: 0.25rem;
@@ -1579,6 +1718,7 @@ body.sidebar-refactoring
  color: #0b5cad;
 }
 body.sidebar-refactoring .sidebar-sub-level-items {
+  padding-top: 0;
  padding-bottom: 0;
  display: none;
 }

--- a/app/views/groups/sidebar/_packages.html.haml
+++ b/app/views/groups/sidebar/_packages.html.haml
@@ -2,7 +2,7 @@
 - if group_packages_nav?
  = nav_link(controller: ['groups/packages', 'groups/registry/repositories', 'groups/dependency_proxies']) do
-    = link_to packages_link, title: _('Packages') do
+    = link_to packages_link, title: _('Packages'), class: 'has-sub-items' do
      .nav-icon-container
        = sprite_icon('package')
      %span.nav-item-name

--- a/app/views/layouts/nav/sidebar/_admin.html.haml
+++ b/app/views/layouts/nav/sidebar/_admin.html.haml
@@ -11,7 +11,7 @@
          = _('Admin Area')
    %ul.sidebar-top-level-items{ data: { qa_selector: 'admin_sidebar_overview_submenu_content' } }
      = nav_link(controller: %w(dashboard admin admin/projects users groups jobs runners gitaly_servers), html_options: {class: 'home'}) do
-        = link_to admin_root_path do
+        = link_to admin_root_path, class: 'has-sub-items' do
          .nav-icon-container
            = sprite_icon('overview')
          %span.nav-item-name
@@ -52,7 +52,7 @@
                = _('Gitaly Servers')
      = nav_link(controller: admin_analytics_nav_links) do
-        = link_to admin_dev_ops_report_path, data: { qa_selector: 'admin_analytics_link' } do
+        = link_to admin_dev_ops_report_path, data: { qa_selector: 'admin_analytics_link' }, class: 'has-sub-items' do
          .nav-icon-container
            = sprite_icon('chart')
          %span.nav-item-name
@@ -74,7 +74,7 @@
                = _('Usage Trends')
      = nav_link(controller: admin_monitoring_nav_links) do
-        = link_to admin_system_info_path, data: { qa_selector: 'admin_monitoring_link' } do
+        = link_to admin_system_info_path, data: { qa_selector: 'admin_monitoring_link' }, class: 'has-sub-items' do
          .nav-icon-container
            = sprite_icon('monitor')
          %span.nav-item-name
@@ -247,7 +247,7 @@
                = _('Appearance')
      = nav_link(controller: [:application_settings, :integrations]) do
-        = link_to general_admin_application_settings_path do
+        = link_to general_admin_application_settings_path, class: 'has-sub-items' do
          .nav-icon-container
            = sprite_icon('settings')
          %span.nav-item-name.qa-admin-settings-item

--- a/app/views/layouts/nav/sidebar/_analytics_links.html.haml
+++ b/app/views/layouts/nav/sidebar/_analytics_links.html.haml
@@ -4,7 +4,7 @@
 - if navbar_links.any?
  = nav_link(path: all_paths) do
-    = link_to analytics_link.link, {class: 'shortcuts-analytics', data: { qa_selector: 'analytics_anchor' } } do
+    = link_to analytics_link.link, {class: 'shortcuts-analytics has-sub-items', data: { qa_selector: 'analytics_anchor' } } do
      .nav-icon-container
        = sprite_icon('chart')
      %span.nav-item-name{ data: { qa_selector: 'analytics_link' } }

--- a/app/views/layouts/nav/sidebar/_group.html.haml
+++ b/app/views/layouts/nav/sidebar/_group.html.haml
@@ -19,7 +19,7 @@
        - paths = group_overview_nav_link_paths
        = nav_link(path: paths, unless: -> { current_path?('groups/contribution_analytics#show') }, html_options: { class: 'home' }) do
          - information_link = sidebar_refactor_enabled? ? activity_group_path(@group) : group_path(@group)
-          = link_to information_link do
+          = link_to information_link, class: 'has-sub-items' do
            .nav-icon-container
              - sprite = sidebar_refactor_enabled? ? 'group' : 'home'
              = sprite_icon(sprite)
@@ -62,7 +62,7 @@
      - if group_sidebar_link?(:issues)
        = nav_link(path: group_issues_sub_menu_items, unless: -> { current_path?('issues_analytics#show') }) do
-          = link_to issues_group_path(@group), data: { qa_selector: 'group_issues_item' } do
+          = link_to issues_group_path(@group), data: { qa_selector: 'group_issues_item' }, class: 'has-sub-items' do
            .nav-icon-container
              = sprite_icon('issues')
            %span.nav-item-name
@@ -157,7 +157,7 @@
      - if group_sidebar_link?(:settings)
        = nav_link(path: group_settings_nav_link_paths) do
-          = link_to edit_group_path(@group) do
+          = link_to edit_group_path(@group), class: 'has-sub-items' do
            .nav-icon-container
              = sprite_icon('settings')
            %span.nav-item-name{ data: { qa_selector: 'group_settings' } }

--- a/app/views/shared/nav/_sidebar_menu.html.haml
+++ b/app/views/shared/nav/_sidebar_menu.html.haml
@@ -16,11 +16,12 @@
  %ul.sidebar-sub-level-items{ class: ('is-fly-out-only' unless sidebar_menu.has_renderable_items?) }
    = nav_link(**sidebar_menu.all_active_routes, html_options: { class: 'fly-out-top-item' } ) do
      - if sidebar_refactor_disabled?
-        = link_to sidebar_menu.link, **sidebar_menu.collapsed_container_html_options do
+        = link_to sidebar_menu.link, class: "'has-sub-items' if sidebar_menu.has_renderable_items?", **sidebar_menu.collapsed_container_html_options do
          = render 'shared/nav/sidebar_menu_collapsed', sidebar_menu: sidebar_menu
      - else
+        %span.fly-out-top-item-container
          = render 'shared/nav/sidebar_menu_collapsed', sidebar_menu: sidebar_menu
-    - if sidebar_menu.has_items?
+    - if sidebar_menu.has_renderable_items?
      %li.divider.fly-out-top-item
      = render partial: 'shared/nav/sidebar_menu_item', collection: sidebar_menu.renderable_items
--- a/ee/app/assets/stylesheets/startup/startup-dark.scss
+++ b/ee/app/assets/stylesheets/startup/startup-dark.scss
@@ -1251,7 +1251,10 @@ body.sidebar-refactoring.gl-dark
  .sidebar-context-title {
  color: #c4c4c4;
 }
-body.sidebar-refactoring.ui-indigo .nav-sidebar li.active > a {
+body.sidebar-refactoring.ui-indigo
+  .nav-sidebar
+  li.active:not(.fly-out-top-item)
+  > a {
  color: #2f2a6b;
 }
 body.sidebar-refactoring.ui-indigo
@@ -1325,20 +1328,22 @@ body.sidebar-refactoring
 }
 body.sidebar-refactoring
  .nav-sidebar.sidebar-collapsed-desktop
-  .fly-out-top-item {
+  .fly-out-top-item:not(.divider) {
-  display: block;
+  display: block !important;
 }
 body.sidebar-refactoring
  .nav-sidebar.sidebar-collapsed-desktop
  .avatar-container {
  margin: 0 auto;
 }
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop li.active > a {
+body.sidebar-refactoring
+  .nav-sidebar.sidebar-collapsed-desktop
+  li.active:not(.fly-out-top-item)
+  > a {
  background-color: rgba(41, 41, 97, 0.08);
 }
 body.sidebar-refactoring .nav-sidebar a {
  text-decoration: none;
-  line-height: 1rem;
  color: #2f2a6b;
 }
 body.sidebar-refactoring .nav-sidebar li {
@@ -1347,7 +1352,8 @@ body.sidebar-refactoring .nav-sidebar li {
 body.sidebar-refactoring .nav-sidebar li .nav-item-name {
  flex: 1;
 }
-body.sidebar-refactoring .nav-sidebar li > a {
+body.sidebar-refactoring .nav-sidebar li > a,
+body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
@@ -1356,12 +1362,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
  align-items: center;
  border-radius: 0.25rem;
  width: auto;
+  line-height: 1rem;
  margin: 1px 4px;
 }
 body.sidebar-refactoring .nav-sidebar li.active > a {
  font-weight: 600;
 }
-body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) {
+body.sidebar-refactoring
+  .nav-sidebar
+  li.active:not(.fly-out-top-item)
+  > a:not(.has-sub-items) {
  background-color: rgba(41, 41, 97, 0.08);
 }
 body.sidebar-refactoring .nav-sidebar ul {
@@ -1377,9 +1387,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
  display: flex;
  margin-right: 8px;
 }
-body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item {
+  display: none;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: default;
+  pointer-events: none;
+  font-size: 0.75rem;
+  background-color: #2f2a6b;
+  color: #333;
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+  margin-top: 0;
+  position: relative;
+  background-color: #fff;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a
+  strong,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a
+  strong,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container
+  strong {
+  font-weight: 400;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a::before,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a::before,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container::before {
+  position: absolute;
+  content: "";
+  display: block;
+  top: 50%;
+  left: -0.25rem;
+  margin-top: -0.5rem;
+  width: 0;
+  height: 0;
+  border-top: 0.5rem solid transparent;
+  border-bottom: 0.5rem solid transparent;
+  border-right: 0.5rem solid #fff;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item {
  display: none;
 }
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: default;
+  pointer-events: none;
+  font-size: 0.75rem;
+  background-color: #2f2a6b;
+  color: #333;
+  margin-top: -0.25rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
 @media (min-width: 768px) and (max-width: 1199px) {
  body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
    width: 48px;
@@ -1417,8 +1555,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .fly-out-top-item {
+    .fly-out-top-item:not(.divider) {
-    display: block;
+    display: block !important;
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
@@ -1427,7 +1565,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
-    li.active
+    li.active:not(.fly-out-top-item)
    > a {
    background-color: rgba(41, 41, 97, 0.08);
  }
@@ -1516,6 +1654,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
  align-items: center;
  border-radius: 0.25rem;
  width: auto;
+  line-height: 1rem;
  margin: 1px 4px;
  padding: 0.25rem;
  margin-bottom: 0.25rem;
@@ -1617,6 +1756,7 @@ body.sidebar-refactoring
  color: #9dc7f1;
 }
 body.sidebar-refactoring .sidebar-sub-level-items {
+  padding-top: 0;
  padding-bottom: 0;
  display: none;
 }

--- a/ee/app/assets/stylesheets/startup/startup-general.scss
+++ b/ee/app/assets/stylesheets/startup/startup-general.scss
@@ -1213,7 +1213,10 @@ input {
    display: none;
  }
 }
-body.sidebar-refactoring.ui-indigo .nav-sidebar li.active > a {
+body.sidebar-refactoring.ui-indigo
+  .nav-sidebar
+  li.active:not(.fly-out-top-item)
+  > a {
  color: #2f2a6b;
 }
 body.sidebar-refactoring.ui-indigo
@@ -1287,20 +1290,22 @@ body.sidebar-refactoring
 }
 body.sidebar-refactoring
  .nav-sidebar.sidebar-collapsed-desktop
-  .fly-out-top-item {
+  .fly-out-top-item:not(.divider) {
-  display: block;
+  display: block !important;
 }
 body.sidebar-refactoring
  .nav-sidebar.sidebar-collapsed-desktop
  .avatar-container {
  margin: 0 auto;
 }
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop li.active > a {
+body.sidebar-refactoring
+  .nav-sidebar.sidebar-collapsed-desktop
+  li.active:not(.fly-out-top-item)
+  > a {
  background-color: rgba(41, 41, 97, 0.08);
 }
 body.sidebar-refactoring .nav-sidebar a {
  text-decoration: none;
-  line-height: 1rem;
  color: #2f2a6b;
 }
 body.sidebar-refactoring .nav-sidebar li {
@@ -1309,7 +1314,8 @@ body.sidebar-refactoring .nav-sidebar li {
 body.sidebar-refactoring .nav-sidebar li .nav-item-name {
  flex: 1;
 }
-body.sidebar-refactoring .nav-sidebar li > a {
+body.sidebar-refactoring .nav-sidebar li > a,
+body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
@@ -1318,12 +1324,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
  align-items: center;
  border-radius: 0.25rem;
  width: auto;
+  line-height: 1rem;
  margin: 1px 4px;
 }
 body.sidebar-refactoring .nav-sidebar li.active > a {
  font-weight: 600;
 }
-body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) {
+body.sidebar-refactoring
+  .nav-sidebar
+  li.active:not(.fly-out-top-item)
+  > a:not(.has-sub-items) {
  background-color: rgba(41, 41, 97, 0.08);
 }
 body.sidebar-refactoring .nav-sidebar ul {
@@ -1339,9 +1349,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
  display: flex;
  margin-right: 8px;
 }
-body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item {
+  display: none;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: default;
+  pointer-events: none;
+  font-size: 0.75rem;
+  background-color: #2f2a6b;
+  color: #fff;
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+  margin-top: 0;
+  position: relative;
+  background-color: #000;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a
+  strong,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a
+  strong,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container
+  strong {
+  font-weight: 400;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a::before,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a::before,
+body.sidebar-refactoring
+  .nav-sidebar
+  a:not(.has-sub-items)
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container::before {
+  position: absolute;
+  content: "";
+  display: block;
+  top: 50%;
+  left: -0.25rem;
+  margin-top: -0.5rem;
+  width: 0;
+  height: 0;
+  border-top: 0.5rem solid transparent;
+  border-bottom: 0.5rem solid transparent;
+  border-right: 0.5rem solid #000;
+}
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item {
  display: none;
 }
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item.active
+  a,
+body.sidebar-refactoring
+  .nav-sidebar
+  a.has-sub-items
+  + .sidebar-sub-level-items
+  .fly-out-top-item
+  .fly-out-top-item-container {
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: default;
+  pointer-events: none;
+  font-size: 0.75rem;
+  background-color: #2f2a6b;
+  color: #fff;
+  margin-top: -0.25rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
 @media (min-width: 768px) and (max-width: 1199px) {
  body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
    width: 48px;
@@ -1379,8 +1517,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .fly-out-top-item {
+    .fly-out-top-item:not(.divider) {
-    display: block;
+    display: block !important;
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
@@ -1389,7 +1527,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
  }
  body.sidebar-refactoring
    .nav-sidebar:not(.sidebar-expanded-mobile)
-    li.active
+    li.active:not(.fly-out-top-item)
    > a {
    background-color: rgba(41, 41, 97, 0.08);
  }
@@ -1478,6 +1616,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
  align-items: center;
  border-radius: 0.25rem;
  width: auto;
+  line-height: 1rem;
  margin: 1px 4px;
  padding: 0.25rem;
  margin-bottom: 0.25rem;
@@ -1579,6 +1718,7 @@ body.sidebar-refactoring
  color: #0b5cad;
 }
 body.sidebar-refactoring .sidebar-sub-level-items {
+  padding-top: 0;
  padding-bottom: 0;
  display: none;
 }

--- a/ee/app/views/groups/sidebar/_packages.html.haml
+++ b/ee/app/views/groups/sidebar/_packages.html.haml
@@ -2,7 +2,7 @@
 - if group_packages_nav?
  = nav_link(controller: ['groups/packages', 'groups/registry/repositories', 'groups/dependency_proxies']) do
-    = link_to packages_link, title: _('Packages'), data: { qa_selector: 'group_packages_item' } do
+    = link_to packages_link, title: _('Packages'), data: { qa_selector: 'group_packages_item' }, class: 'has-sub-items' do
      .nav-icon-container
        = sprite_icon('package')
      %span.nav-item-name

--- a/ee/app/views/layouts/nav/ee/_epic_link.html.haml
+++ b/ee/app/views/layouts/nav/ee/_epic_link.html.haml
@@ -4,7 +4,7 @@
 - epics_items = ['epics#show', 'epics#index', 'epic_boards#index', 'epic_boards#show', 'roadmap#show']
 = nav_link(path: epics_items) do
-  = link_to group_epics_path(group), class: 'qa-group-epics-link' do
+  = link_to group_epics_path(group), class: 'qa-group-epics-link has-sub-items' do
    .nav-icon-container
      = sprite_icon('epic')
    %span.nav-item-name

--- a/ee/app/views/layouts/nav/ee/_security_link.html.haml
+++ b/ee/app/views/layouts/nav/ee/_security_link.html.haml
 - main_path = primary_group_level_security_feature_path(@group)
 - if main_path.present?
  = nav_link(path: %w[dashboard#show vulnerabilities#index compliance_dashboards#show credentials#index audit_events#index]) do
-    = link_to main_path, data: { qa_selector: 'security_compliance_link' } do
+    = link_to main_path, data: { qa_selector: 'security_compliance_link' }, class: 'has-sub-items' do
      .nav-icon-container
        = sprite_icon('shield')
      %span.nav-item-name
        = _('Security & Compliance')
    %ul.sidebar-sub-level-items{ data: { qa_selector: 'group_secure_submenu' } }
+      = nav_link(path: %w[dashboard#show vulnerabilities#index compliance_dashboards#show credentials#index audit_events#index], html_options: { class: "fly-out-top-item" } ) do
+        %span.fly-out-top-item-container
+          %strong.fly-out-top-item-name
+            = _('Security & Compliance')
+      %li.divider.fly-out-top-item
      - if group_level_security_dashboard_available?(@group)
        = nav_link(path: 'dashboard#show') do
          = link_to group_security_dashboard_path(@group), title: _('Security Dashboard'), data: { qa_selector: 'security_dashboard_link' } do

--- a/ee/app/views/layouts/nav/ee/admin/_geo_sidebar.html.haml
+++ b/ee/app/views/layouts/nav/ee/admin/_geo_sidebar.html.haml
 = nav_link(controller: %w(admin/geo/nodes admin/geo/projects admin/geo/uploads admin/geo/settings admin/geo/designs admin/geo/replicables)) do
-  = link_to admin_geo_nodes_path, class: "qa-link-geo-menu" do
+  = link_to admin_geo_nodes_path, class: "qa-link-geo-menu has-sub-items" do
    .nav-icon-container
      = sprite_icon('location-dot')
    %span.nav-item-name
@@ -9,6 +9,7 @@
      = link_to admin_geo_nodes_path do
        %strong.fly-out-top-item-name
          #{ _('Geo') }
+      %li.divider.fly-out-top-item
      = nav_link(path: 'admin/geo/nodes#index') do
        = link_to admin_geo_nodes_path, title: _('Nodes') do
          %span

--- a/ee/app/views/layouts/nav/sidebar/_security.html.haml
+++ b/ee/app/views/layouts/nav/sidebar/_security.html.haml
@@ -17,17 +17,49 @@
            = sprite_icon('dashboard')
          %span.nav-item-name
            = _('Security Dashboard')
+        %ul.sidebar-sub-level-items.is-fly-out-only
+          = nav_link(path: %w[dashboard#show], html_options: { class: "fly-out-top-item" } ) do
+            - if sidebar_refactor_disabled?
+              = link_to security_dashboard_path do
+                %strong.fly-out-top-item-name
+                  = _('Security Dashboard')
+            - else
+              %span.fly-out-top-item-container
+                %strong.fly-out-top-item-name
+                  = _('Security Dashboard')
      = nav_link(path: %w[vulnerabilities#index]) do
        = link_to security_vulnerabilities_path, class: 'shortcuts-project rspec-project-link' do
          .nav-icon-container
            = sprite_icon('list-bulleted')
          %span.nav-item-name
            = _('Vulnerability Report')
+        %ul.sidebar-sub-level-items.is-fly-out-only
+          = nav_link(path: %w[vulnerabilities#index], html_options: { class: "fly-out-top-item" } ) do
+            - if sidebar_refactor_disabled?
+              = link_to security_vulnerabilities_path do
+                %strong.fly-out-top-item-name
+                  = _('Vulnerability Report')
+            - else
+              %span.fly-out-top-item-container
+                %strong.fly-out-top-item-name
+                  = _('Vulnerability Report')
      = nav_link(path: %w[dashboard#settings]) do
        = link_to settings_security_dashboard_path, class: 'shortcuts-project rspec-project-link' do
          .nav-icon-container
            = sprite_icon('settings')
          %span.nav-item-name
            = _('Settings')
+        %ul.sidebar-sub-level-items.is-fly-out-only
+          = nav_link(path: %w[dashboard#settings], html_options: { class: "fly-out-top-item" } ) do
+            - if sidebar_refactor_disabled?
+              = link_to settings_security_dashboard_path do
+                %strong.fly-out-top-item-name
+                  = _('Settings')
+            - else
+              %span.fly-out-top-item-container
+                %strong.fly-out-top-item-name
+                  = _('Settings')
    = render 'shared/sidebar_toggle_button'