Fly-out dropdown menu in new sidebar

Closes #34026

[ci skip]

3 files changed, 62 insertions, 2 deletions

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 26c67fb721c..9364d19def1 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -347,4 +347,21 @@ $(function () {
   gl.utils.renderTimeago();
 
   $(document).trigger('init.scrolling-tabs');
+
+  $('.sidebar-top-level-items > li:not(.active)').on('mouseover', (e) => {
+    const windowHeight = window.innerHeight;
+    const $this = e.currentTarget;
+    const $subitems = $('.sidebar-sub-level-items', $this).show();
+
+    if ($subitems.length) {
+      const boundingRect = $this.getBoundingClientRect();
+
+      const bottomOverflow = windowHeight - (boundingRect.top + $subitems.outerHeight());
+      const top = bottomOverflow < 0 ? boundingRect.top - Math.abs(bottomOverflow) : boundingRect.top;
+
+      $subitems.css({
+        top,
+      });
+    }
+  }).on('mouseout', e => $('.sidebar-sub-level-items', e.currentTarget).hide());
 });
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index bd9a5d7392d..527d47d5353 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -98,6 +98,7 @@ $new-sidebar-width: 220px;
   }
 
   li {
+    position: relative;
     white-space: nowrap;
 
     a {
@@ -126,8 +127,21 @@ $new-sidebar-width: 220px;
   padding-bottom: 8px;
 
   > li {
+    &:not(.active) {
+      @media (min-width: $screen-sm-min) {
+        a {
+          padding: 11px 16px 11px 24px;
+
+          &:hover,
+          &:focus {
+            background: transparent;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+
     a {
-      font-size: 12px;
       padding: 8px 16px 8px 24px;
 
       &:hover,
@@ -152,6 +166,34 @@ $new-sidebar-width: 220px;
 
 .sidebar-top-level-items {
   > li {
+    &:not(.active) {
+      .sidebar-sub-level-items {
+        @media (min-width: $screen-sm-min) {
+          position: fixed;
+          left: 220px;
+          width: 150px;
+          margin-left: -1px;
+          padding-bottom: 0;
+          background-color: #fff;
+          box-shadow: 2px 1px 3px rgba(0,0,0,.1);
+          border: 1px solid #e5e5e5;
+          border-left: 0;
+
+          &::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 21px 12px;
+            border-color: transparent transparent transparent $hover-background;
+          }
+        }
+      }
+    }
+
     .badge {
       float: right;
       background-color: $inactive-badge-background;
@@ -171,6 +213,7 @@ $new-sidebar-width: 220px;
       }
     }
 
+    &:not(.active):hover > a,
     > a:hover {
       background-color: $hover-background;
       color: $hover-color;
diff --git a/app/views/layouts/nav/_new_project_sidebar.html.haml b/app/views/layouts/nav/_new_project_sidebar.html.haml
index 882123c0b0a..da8f9ce1908 100644
--- a/app/views/layouts/nav/_new_project_sidebar.html.haml
+++ b/app/views/layouts/nav/_new_project_sidebar.html.haml
@@ -173,7 +173,7 @@
         %ul.sidebar-sub-level-items
           - can_edit = can?(current_user, :admin_project, @project)
           - if can_edit
-            = nav_link(controller: :projects) do
+            = nav_link(path: %w[projects#edit]) do
               = link_to edit_project_path(@project), title: 'General' do
                 %span
                   General