Implement compact side nav

5 files changed, 47 insertions, 143 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 0da96c4017d..3be83b0fc65 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -79,13 +79,17 @@ header {
 
     &.header-collapsed {
       padding: 0 16px;
+
+      .side-nav-toggle {
+        display: block;
+      }
     }
 
     .side-nav-toggle {
       display: none;
       position: absolute;
       left: -10px;
-      margin: 6px 0;
+      margin: 8px 0;
       padding: 6px 10px;
       border: none;
       background-color: $background-color;
@@ -97,10 +101,6 @@ header {
       &:focus {
         outline: none;
       }
-
-      @media (max-width: $screen-xs-min) {
-        display: block;
-      }
     }
   }
 
@@ -171,31 +171,21 @@ header {
   }
 }
 
-@mixin collapsed-header {
-  margin-left: $sidebar_collapsed_width;
-}
-
 .header-collapsed {
-  margin-left: $sidebar_collapsed_width;
-
-  @media (min-width: $screen-md-min) {
-    @include collapsed-header;
-  }
+  margin-left: 0;
 
-  @media (max-width: $screen-xs-min) {
-    margin-left: 0;
+  .header-content {
+    padding-left: 30px;
+    transition-duration: .3s;
   }
 }
 
 .header-expanded {
-  margin-left: $sidebar_collapsed_width;
+  margin-left: 0;
 
-  @media (min-width: $screen-md-min) {
-    margin-left: $sidebar_width;
-  }
-
-  @media (max-width: $screen-xs-min) {
-    margin-left: 0;
+  .header-content {
+    padding-left: $sidebar_width;
+    transition-duration: .3s;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 67f491b6d9c..0acb010b239 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -1,9 +1,7 @@
 #logo {
   z-index: 2;
-  position: absolute;
-  width: 58px;
+  position: relative;
   cursor: pointer;
-  margin-top: 8px;
 }
 
 .page-with-sidebar {
@@ -20,12 +18,6 @@
     height: 100%;
     transition-duration: .3s;
   }
-
-  .gitlab-text-container-link {
-    z-index: 1;
-    position: absolute;
-    left: 0;
-  }
 }
 
 .sidebar-wrapper {
@@ -50,47 +42,8 @@
 
 .sidebar-wrapper {
   .header-logo {
-    border-bottom: 1px solid transparent;
-    float: left;
     height: $header-height;
-    width: $sidebar_width;
-    position: fixed;
-    z-index: 999;
-    overflow: hidden;
-    transition-duration: .3s;
-
-    a {
-      float: left;
-      height: $header-height;
-      width: 100%;
-      padding-left: 22px;
-      overflow: hidden;
-      outline: none;
-      transition-duration: .3s;
-
-      img {
-        width: 36px;
-        height: 36px;
-      }
-
-      #tanuki-logo, img {
-        float: left;
-      }
-
-      .gitlab-text-container {
-        width: 230px;
-
-        h3 {
-          width: 158px;
-          float: left;
-          margin: 0;
-          margin-left: 50px;
-          font-size: 19px;
-          line-height: 50px;
-          font-weight: normal;
-        }
-      }
-    }
+    padding: 8px 26px;
 
     &:hover {
       background-color: #eee;
@@ -98,7 +51,7 @@
   }
 
   .sidebar-user {
-    padding: 7px 22px;
+    padding: 15px 22px;
     position: fixed;
     bottom: 40px;
     width: $sidebar_width;
@@ -126,8 +79,7 @@
 
 
 .nav-sidebar {
-  margin-top: 14 + $header-height;
-  margin-bottom: 100px;
+  margin: 22px 0;
   transition-duration: .3s;
   list-style: none;
   overflow: hidden;
@@ -145,13 +97,13 @@
     }
 
     a {
-      padding: 7px 15px;
+      text-align: center;
+      padding: 8px 0;
       font-size: $gl-font-size;
       line-height: 24px;
       color: $gray;
       display: block;
       text-decoration: none;
-      padding-left: 23px;
       font-weight: normal;
       outline: none;
 
@@ -166,7 +118,6 @@
       i {
         width: 16px;
         color: $gray-light;
-        margin-right: 13px;
       }
 
       .count {
@@ -217,25 +168,13 @@
 }
 
 .page-sidebar-collapsed {
-  padding-left: $sidebar_collapsed_width;
-
-  @media (max-width: $screen-xs-min) {
-    padding-left: 0;
-  }
+  padding-left: 0;
 
   .sidebar-wrapper {
-    width: $sidebar_collapsed_width;
-
-    @media (max-width: $screen-xs-min) {
-      width: 0;
-    }
+    width: 0;
 
     .header-logo {
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-      }
+      width: 0;
 
       a {
         padding-left: ($sidebar_collapsed_width - 36) / 2;
@@ -246,6 +185,10 @@
       }
     }
 
+    #logo {
+      display: none;
+    }
+
     .nav-sidebar {
       width: $sidebar_collapsed_width;
 
@@ -261,44 +204,23 @@
     }
 
     .collapse-nav a {
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-      }
+      width: 0;
     }
 
     .sidebar-user {
-      padding-left: ($sidebar_collapsed_width - 36) / 2;
-      width: $sidebar_collapsed_width;
-
-      @media (max-width: $screen-xs-min) {
-        width: 0;
-        padding-left: 0;
-        padding-right: 0;
-      }
+      width: 0;
+      padding-left: 0;
+      padding-right: 0;
 
       .username {
         display: none;
       }
     }
   }
-
-  .layout-nav {
-    padding-right: $sidebar_collapsed_width;
-
-    @media (max-width: $screen-xs-min) {
-      padding-right: 0;;
-    }
-  }
 }
 
 .page-sidebar-expanded {
-  padding-left: $sidebar_collapsed_width;
-
-  @media (min-width: $screen-md-min) {
-    padding-left: $sidebar_width;
-  }
+  padding-left: $sidebar_width;
 
   @media (max-width: $screen-xs-min) {
     padding-left: 0;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f253da814bc..60207ecf1d6 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -2,7 +2,7 @@
  * Layout
  */
 $sidebar_collapsed_width: 62px;
-$sidebar_width: 220px;
+$sidebar_width: 90px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 258px;
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 1e961853c70..f0ba62fa68d 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,11 +1,9 @@
 .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
-    .header-logo
-      %a#logo
-        = brand_header_logo
-      = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
-        .gitlab-text-container
-          %h3 GitLab
+    = link_to root_path, class: 'gitlab-text-container-link', title: 'Dashboard', id: 'js-shortcuts-home' do
+      .header-logo
+        #logo
+          = brand_header_logo
 
     - if defined?(sidebar) && sidebar
       = render "layouts/nav/#{sidebar}"
@@ -18,9 +16,7 @@
       = render partial: 'layouts/collapse_button'
     - if current_user
       = link_to current_user, class: 'sidebar-user', title: "Profile" do
-        = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s36'
-        .username
-          = current_user.username
+        = image_tag avatar_icon(current_user, 60), alt: 'Profile', class: 'avatar avatar s46'
   - if defined?(nav) && nav
     .layout-nav
       .container-fluid
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index 306ebd5fcf7..1d5c243b181 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -2,54 +2,50 @@
   = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: "#{project_tab_class} home"}) do
     = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
       = icon('bookmark fw')
-      %span
+      %div
         Projects
   = nav_link(controller: :todos) do
     = link_to dashboard_todos_path, title: 'Todos' do
       = icon('bell fw')
-      %span
+      %div
         Todos
-        %span.count.todos-pending-count= number_with_delimiter(todos_pending_count)
   = nav_link(path: 'dashboard#activity') do
     = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
       = icon('dashboard fw')
-      %span
+      %div
         Activity
   = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
     = link_to dashboard_groups_path, title: 'Groups' do
       = icon('group fw')
-      %span
+      %div
         Groups
   = nav_link(controller: 'dashboard/milestones') do
     = link_to dashboard_milestones_path, title: 'Milestones' do
       = icon('clock-o fw')
-      %span
+      %div
         Milestones
   = nav_link(path: 'dashboard#issues') do
     = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do
       = icon('exclamation-circle fw')
-      %span
+      %div
         Issues
-        %span.count= number_with_delimiter(current_user.assigned_open_issues_count)
   = nav_link(path: 'dashboard#merge_requests') do
     = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do
       = icon('tasks fw')
-      %span
+      %div
         Merge Requests
-        %span.count= number_with_delimiter(current_user.assigned_open_merge_request_count)
   = nav_link(controller: :snippets) do
     = link_to dashboard_snippets_path, title: 'Snippets' do
       = icon('clipboard fw')
-      %span
+      %div
         Snippets
   = nav_link(controller: :help) do
     = link_to help_path, title: 'Help' do
       = icon('question-circle fw')
-      %span
+      %div
         Help
-
   = nav_link(html_options: {class: profile_tab_class}) do
     = link_to profile_path, title: 'Profile Settings', data: {placement: 'bottom'} do
       = icon('user fw')
-      %span
+      %div
         Profile Settings