From c56100b3ec26a0f5d71bb80f94c661674b3226b8 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 1 Sep 2017 08:41:31 +0100
Subject: Add top level items to fly-out navigation

This only appears when in the collapsed sidebar. If the sidebar is expanded, then these items are hidden & no fly-out navigation is displayed.

Closes #36294
---
 app/assets/stylesheets/new_sidebar.scss | 39 +++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 7 deletions(-)

(limited to 'app/assets/stylesheets/new_sidebar.scss')

diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 90b0a543c5c..653acaf7344 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -107,11 +107,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;
     }
@@ -119,6 +116,10 @@ $new-sidebar-collapsed-width: 50px;
     .sidebar-top-level-items > li > a {
       min-height: 44px;
     }
+
+    .fly-out-top-item {
+      display: block;
+    }
   }
 
   &.nav-sidebar-expanded {
@@ -180,6 +181,10 @@ $new-sidebar-collapsed-width: 50px;
       width: 16px;
     }
   }
+
+  .fly-out-top-item {
+    display: none;
+  }
 }
 
 .nav-sidebar-inner-scroll {
@@ -250,7 +255,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;
@@ -271,6 +276,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;
 
@@ -310,7 +322,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;
       }
     }
@@ -404,6 +416,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
 
-- 
cgit v1.2.1