Merge branch 'fly-out-top-level-item' into 'master'

Add top level items to fly-out navigation

Closes #36294

See merge request !13981

1 files changed, 32 insertions, 7 deletions

diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index fd5e344d8c9..3082f728ac8 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -106,11 +106,8 @@ $new-sidebar-collapsed-width: 50px;
       overflow-x: hidden;
     }
 
-    .badge,
-    .sidebar-context-title {
-      display: none;
-    }
-
+    .badge:not(.fly-out-badge),
+    .sidebar-context-title,
     .nav-item-name {
       display: none;
     }
@@ -118,6 +115,10 @@ $new-sidebar-collapsed-width: 50px;
     .sidebar-top-level-items > li > a {
       min-height: 44px;
     }
+
+    .fly-out-top-item {
+      display: block;
+    }
   }
 
   &.nav-sidebar-expanded {
@@ -179,6 +180,10 @@ $new-sidebar-collapsed-width: 50px;
       width: 16px;
     }
   }
+
+  .fly-out-top-item {
+    display: none;
+  }
 }
 
 .nav-sidebar-inner-scroll {
@@ -249,7 +254,7 @@ $new-sidebar-collapsed-width: 50px;
           left: $new-sidebar-width;
           min-width: 150px;
           margin-top: -1px;
-          padding: 8px 1px;
+          padding: 4px 1px;
           background-color: $white-light;
           box-shadow: 2px 1px 3px $dropdown-shadow-color;
           border: 1px solid $gray-darker;
@@ -270,6 +275,13 @@ $new-sidebar-collapsed-width: 50px;
             margin-top: 1px;
           }
 
+          .divider {
+            height: 1px;
+            margin: 4px -1px;
+            padding: 0;
+            background-color: $dropdown-divider-color;
+          }
+
           > .active {
             box-shadow: none;
 
@@ -309,7 +321,7 @@ $new-sidebar-collapsed-width: 50px;
         font-weight: $gl-font-weight-bold;
       }
 
-      .sidebar-sub-level-items {
+      .sidebar-sub-level-items:not(.is-fly-out-only) {
         display: block;
       }
     }
@@ -407,6 +419,19 @@ $new-sidebar-collapsed-width: 50px;
   }
 }
 
+.fly-out-top-item {
+  > a {
+    display: flex;
+  }
+
+  .fly-out-badge {
+    margin-left: 8px;
+  }
+}
+
+.fly-out-top-item-name {
+  flex: 1;
+}
 
 // Mobile nav