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

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 = () => headerHeight;
-const setHeaderHeight = () => {
-  headerHeight = sidebar.offsetTop;
-};
+export const getHeaderHeight = () => sidebar?.offsetTop || 0;
 
 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 : 50;
+  const left = sidebar ? sidebar.offsetWidth : COLLAPSED_PANEL_WIDTH;
+  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');
 

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 {
-    display: block;
+  .fly-out-top-item:not(.divider) {
+    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;
-      top: 0;
-      left: 0;
+      @include gl-fixed;
+      @include gl-top-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;
-      padding: 4px 1px;
-      background-color: $white;
-      box-shadow: 2px 1px 3px $dropdown-shadow-color;
-      border: 1px solid $gray-darker;
-      border-left: 0;
-      border-radius: 0 3px 3px 0;
+      background-color: $gray-10;
+      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;
+      border-style: none;
+      border-radius: $border-radius-default;
 
-      &::before {
-        content: '';
-        position: absolute;
-        top: -30px;
-        bottom: -30px;
-        left: -10px;
-        right: -30px;
-        z-index: -1;
+      .divider {
+        @include gl-display-none;
       }
 
-      &.is-above {
-        margin-top: 1px;
+      .divider + li > a {
+        @include gl-mt-2;
       }
 
-      .divider {
-        height: 1px;
-        margin: 4px -1px;
-        padding: 0;
-        background-color: $dropdown-divider-bg;
+      li:last-of-type a {
+        @include gl-mb-0;
+      }
+
+      &.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;
-  display: none;
+  @include gl-py-0;
+  @include gl-display-none;
 
   &:not(.fly-out-list) {
     li > a {

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 {
-  display: block;
+  .fly-out-top-item:not(.divider) {
+  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 {
-    display: block;
+    .fly-out-top-item:not(.divider) {
+    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;
 }

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 {
-  display: block;
+  .fly-out-top-item:not(.divider) {
+  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 {
-    display: block;
+    .fly-out-top-item:not(.divider) {
+    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;
 }

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

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

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' } }

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' } }

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

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 {
-  display: block;
+  .fly-out-top-item:not(.divider) {
+  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 {
-    display: block;
+    .fly-out-top-item:not(.divider) {
+    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;
 }

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 {
-  display: block;
+  .fly-out-top-item:not(.divider) {
+  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 {
-    display: block;
+    .fly-out-top-item:not(.divider) {
+    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;
 }

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

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

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

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

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'