Concept of 2 level navigation sidebar

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

2 files changed, 155 insertions, 113 deletions

diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 18189e985c4..c042684dd71 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -309,3 +309,56 @@
     padding-right: $sidebar_collapsed_width;
   }
 }
+
+.page-sidebar-expanded {
+  .complex-sidebar {
+    margin-bottom: 100px;
+    display: inline-block;
+
+    .nav-sidebar {
+      margin-bottom: 0;
+    }
+
+    .nav-primary {
+      width: 60px;
+      float: left;
+
+      .nav-sidebar {
+        width: 60px;
+
+        li a {
+          width: 60px;
+
+          span {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .nav-secondary {
+      border-left: 1px solid rgba(255, 255, 255, 0.1);
+      float: left;
+      width: 168px;
+
+      .nav-sidebar {
+        width: 168px;
+
+        li a {
+          width: 168px;
+
+          i {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.page-sidebar-collapsed {
+  .nav-secondary {
+    display: none;
+    transition-duration: .3s;
+  }
+}
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index 86b46e8c75e..8fdbf5b6022 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -1,126 +1,115 @@
-%ul.nav.nav-sidebar
-  - if @project.group
-    = nav_link do
-      = link_to group_path(@project.group), title: 'Go to group', class: 'back-link' do
-        = icon('caret-square-o-left fw')
-        %span
-          Go to group
-  - else
-    = nav_link do
-      = link_to root_path, title: 'Go to dashboard', class: 'back-link' do
-        = icon('caret-square-o-left fw')
-        %span
-          Go to dashboard
+.complex-sidebar
+  .nav-primary
+    = render 'layouts/nav/dashboard'
+  .nav-secondary
+    %ul.nav.nav-sidebar
+      = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
+        = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
+          = icon('bookmark fw')
+          %span
+            Project
+      = nav_link(path: 'projects#activity') do
+        = link_to activity_project_path(@project), title: 'Activity', class: 'shortcuts-project-activity' do
+          = icon('dashboard fw')
+          %span
+            Activity
+      - if project_nav_tab? :files
+        = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
+          = link_to project_files_path(@project), title: 'Files',  class: 'shortcuts-tree' do
+            = icon('files-o fw')
+            %span
+              Files
 
-  %li.separate-item
+      - if project_nav_tab? :commits
+        = nav_link(controller: %w(commit commits compare repositories tags branches releases network)) do
+          = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
+            = icon('history fw')
+            %span
+              Commits
 
-  = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
-    = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
-      = icon('bookmark fw')
-      %span
-        Project
-  = nav_link(path: 'projects#activity') do
-    = link_to activity_project_path(@project), title: 'Activity', class: 'shortcuts-project-activity' do
-      = icon('dashboard fw')
-      %span
-        Activity
-  - if project_nav_tab? :files
-    = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
-      = link_to project_files_path(@project), title: 'Files',  class: 'shortcuts-tree' do
-        = icon('files-o fw')
-        %span
-          Files
+      - if project_nav_tab? :builds
+        = nav_link(controller: %w(builds)) do
+          = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
+            = icon('cubes fw')
+            %span
+              Builds
+              %span.count.builds_counter= number_with_delimiter(@project.builds.running_or_pending.count(:all))
 
-  - if project_nav_tab? :commits
-    = nav_link(controller: %w(commit commits compare repositories tags branches releases network)) do
-      = link_to project_commits_path(@project), title: 'Commits', class: 'shortcuts-commits' do
-        = icon('history fw')
-        %span
-          Commits
+      - if project_nav_tab? :graphs
+        = nav_link(controller: %w(graphs)) do
+          = link_to namespace_project_graph_path(@project.namespace, @project, current_ref), title: 'Graphs',  class: 'shortcuts-graphs' do
+            = icon('area-chart fw')
+            %span
+              Graphs
 
-  - if project_nav_tab? :builds
-    = nav_link(controller: %w(builds)) do
-      = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
-        = icon('cubes fw')
-        %span
-          Builds
-          %span.count.builds_counter= number_with_delimiter(@project.builds.running_or_pending.count(:all))
+      - if project_nav_tab? :milestones
+        = nav_link(controller: :milestones) do
+          = link_to namespace_project_milestones_path(@project.namespace, @project), title: 'Milestones' do
+            = icon('clock-o fw')
+            %span
+              Milestones
 
-  - if project_nav_tab? :graphs
-    = nav_link(controller: %w(graphs)) do
-      = link_to namespace_project_graph_path(@project.namespace, @project, current_ref), title: 'Graphs',  class: 'shortcuts-graphs' do
-        = icon('area-chart fw')
-        %span
-          Graphs
+      - if project_nav_tab? :issues
+        = nav_link(controller: :issues) do
+          = link_to url_for_project_issues(@project, only_path: true), title: 'Issues', class: 'shortcuts-issues' do
+            = icon('exclamation-circle fw')
+            %span
+              Issues
+              - if @project.default_issues_tracker?
+                %span.count.issue_counter= number_with_delimiter(@project.issues.visible_to_user(current_user).opened.count)
 
-  - if project_nav_tab? :milestones
-    = nav_link(controller: :milestones) do
-      = link_to namespace_project_milestones_path(@project.namespace, @project), title: 'Milestones' do
-        = icon('clock-o fw')
-        %span
-          Milestones
+      - if project_nav_tab? :merge_requests
+        = nav_link(controller: :merge_requests) do
+          = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
+            = icon('tasks fw')
+            %span
+              Merge Requests
+              %span.count.merge_counter= number_with_delimiter(@project.merge_requests.opened.count)
 
-  - if project_nav_tab? :issues
-    = nav_link(controller: :issues) do
-      = link_to url_for_project_issues(@project, only_path: true), title: 'Issues', class: 'shortcuts-issues' do
-        = icon('exclamation-circle fw')
-        %span
-          Issues
-          - if @project.default_issues_tracker?
-            %span.count.issue_counter= number_with_delimiter(@project.issues.visible_to_user(current_user).opened.count)
+      - if project_nav_tab? :settings
+        = nav_link(controller: [:project_members, :teams]) do
+          = link_to namespace_project_project_members_path(@project.namespace, @project), title: 'Members', class: 'team-tab tab' do
+            = icon('users fw')
+            %span
+              Members
 
-  - if project_nav_tab? :merge_requests
-    = nav_link(controller: :merge_requests) do
-      = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
-        = icon('tasks fw')
-        %span
-          Merge Requests
-          %span.count.merge_counter= number_with_delimiter(@project.merge_requests.opened.count)
+      - if project_nav_tab? :labels
+        = nav_link(controller: :labels) do
+          = link_to namespace_project_labels_path(@project.namespace, @project), title: 'Labels' do
+            = icon('tags fw')
+            %span
+              Labels
 
-  - if project_nav_tab? :settings
-    = nav_link(controller: [:project_members, :teams]) do
-      = link_to namespace_project_project_members_path(@project.namespace, @project), title: 'Members', class: 'team-tab tab' do
-        = icon('users fw')
-        %span
-          Members
+      - if project_nav_tab? :wiki
+        = nav_link(controller: :wikis) do
+          = link_to get_project_wiki_path(@project), title: 'Wiki', class: 'shortcuts-wiki' do
+            = icon('book fw')
+            %span
+              Wiki
 
-  - if project_nav_tab? :labels
-    = nav_link(controller: :labels) do
-      = link_to namespace_project_labels_path(@project.namespace, @project), title: 'Labels' do
-        = icon('tags fw')
-        %span
-          Labels
+      - if project_nav_tab? :forks
+        = nav_link(controller: :forks, action: :index) do
+          = link_to namespace_project_forks_path(@project.namespace, @project), title: 'Forks' do
+            = icon('code-fork fw')
+            %span
+              Forks
 
-  - if project_nav_tab? :wiki
-    = nav_link(controller: :wikis) do
-      = link_to get_project_wiki_path(@project), title: 'Wiki', class: 'shortcuts-wiki' do
-        = icon('book fw')
-        %span
-          Wiki
+      - if project_nav_tab? :snippets
+        = nav_link(controller: :snippets) do
+          = link_to namespace_project_snippets_path(@project.namespace, @project), title: 'Snippets', class: 'shortcuts-snippets' do
+            = icon('clipboard fw')
+            %span
+              Snippets
 
-  - if project_nav_tab? :forks
-    = nav_link(controller: :forks, action: :index) do
-      = link_to namespace_project_forks_path(@project.namespace, @project), title: 'Forks' do
-        = icon('code-fork fw')
-        %span
-          Forks
+      - if project_nav_tab? :settings
+        = nav_link(html_options: {class: "#{project_tab_class} separate-item"}) do
+          = link_to edit_project_path(@project), title: 'Settings' do
+            = icon('cogs fw')
+            %span
+              Settings
 
-  - if project_nav_tab? :snippets
-    = nav_link(controller: :snippets) do
-      = link_to namespace_project_snippets_path(@project.namespace, @project), title: 'Snippets', class: 'shortcuts-snippets' do
-        = icon('clipboard fw')
-        %span
-          Snippets
-
-  - if project_nav_tab? :settings
-    = nav_link(html_options: {class: "#{project_tab_class} separate-item"}) do
-      = link_to edit_project_path(@project), title: 'Settings' do
-        = icon('cogs fw')
-        %span
-          Settings
-
-  -# Global shortcut to network page for compatibility
-  - if project_nav_tab? :network
-    %li.hidden
-      = link_to namespace_project_network_path(@project.namespace, @project, current_ref), title: 'Network', class: 'shortcuts-network' do
-        Network
+      -# Global shortcut to network page for compatibility
+      - if project_nav_tab? :network
+        %li.hidden
+          = link_to namespace_project_network_path(@project.namespace, @project, current_ref), title: 'Network', class: 'shortcuts-network' do
+            Network