Implement sidebar navigation for project area

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

app/assets/stylesheets/sections/sidebar.scss

+body.project {
+  padding: 0;
+
+  header .container {
+    width: 100% !important;
+  }
+}
+
+.page-with-sidebar {
+  background: #F5F5F5;
+
+  header .navbar-inner {
+    padding: 0px 20px;
+  }
+}
+
+.sidebar-wrapper {
+  z-index: 1000;
+  position: absolute;
+  left: 250px;
+  width: 0;
+  height: 100%;
+  margin-left: -250px;
+  overflow-y: auto;
+  background: #F5F5F5;
+}
+
+.content-wrapper {
+  width: 100%;
+  padding: 15px;
+  background: #FFF;
+}
+
+.nav-sidebar {
+  position: fixed;
+  top: 45px;
+  width: 250px;
+  margin: 0;
+  list-style: none;
+  margin-top: 20px;
+}
+
+.nav-sidebar li a .count {
+  float: right;
+  background: #eee;
+  padding: 2px 8px;
+  @include border-radius(6px);
+}
+
+.nav-sidebar li.active a {
+  color: #333;
+  background: #EEE;
+  font-weight: bold;
+}
+
+.nav-sidebar li {
+  &.separate-item {
+    border-top: 1px solid #ddd;
+    padding-top: 10px;
+    margin-top: 10px;
+  }
+
+  a {
+    color: #666;
+    display: block;
+    text-decoration: none;
+    padding: 6px 15px;
+    font-size: 13px;
+    line-height: 20px;
+    text-shadow: 0 1px 2px #FFF;
+    padding-left: 30px;
+
+    &:hover {
+      text-decoration: none;
+      color: #333;
+      background: #DDD;
+    }
+
+    &:active, &:focus {
+      text-decoration: none;
+    }
+  }
+}
+
+.project-settings-nav {
+  margin-left: 0px;
+  padding-left: 0px;
+
+  li {
+    line-height: 28px;
+    font-size: 12px;
+    list-style: none;
+
+    a {
+      padding: 5px 15px;
+      font-size: 12px;
+      padding-left: 30px;
+    }
+  }
+}
+
+@media(min-width:768px) {
+  .page-with-sidebar {
+    padding-left: 250px;
+  }
+
+  .sidebar-wrapper {
+    width: 250px;
+  }
+
+  .content-wrapper {
+    padding: 20px;
+  }
+}
+
+/** TODO: REMOVE **/
+.profiler-results {
+  display: none;
+}
+

app/views/layouts/nav/_project.html.haml

-%ul.project-navigation
+%ul.project-navigation.nav.nav-sidebar
   = nav_link(path: 'projects#show', html_options: {class: "home"}) do
     = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
       Project
@@ -40,6 +40,9 @@
       = link_to 'Snippets', project_snippets_path(@project), class: 'shortcuts-snippets'
 
   - if project_nav_tab? :settings
-    = nav_link(html_options: {class: "#{project_tab_class}"}) do
+    = nav_link(html_options: {class: "#{project_tab_class} separate-item"}) do
       = link_to edit_project_path(@project), class: "stat-tab tab " do
         Settings
+        %i.fa.fa-angle-down
+  - if defined?(settings) && settings
+    = render 'projects/settings_nav'

app/views/layouts/project_settings.html.haml

@@ -7,13 +7,13 @@
     = render "layouts/init_auto_complete"
     - if can?(current_user, :download_code, @project)
       = render 'shared/no_ssh'
-    %nav.main-nav.navbar-collapse.collapse
-      .container= render 'layouts/nav/project'
-    .container
-      .content
-        = render "layouts/flash"
-        .row
-          .col-md-2
-            = render "projects/settings_nav"
-          .col-md-10
+
+    .page-with-sidebar
+      .sidebar-wrapper
+        = render 'layouts/nav/project', settings: true
+      .content-wrapper
+        .container-fluid
+          .content
+            = render "layouts/flash"
             = yield
+    = yield :embedded_scripts

app/views/layouts/projects.html.haml

@@ -7,10 +7,13 @@
     = render "layouts/init_auto_complete"
     - if can?(current_user, :download_code, @project)
       = render 'shared/no_ssh'
-    %nav.main-nav.navbar-collapse.collapse
-      .container= render 'layouts/nav/project'
-    .container
-      .content
-        = render "layouts/flash"
-        = yield
+
+    .page-with-sidebar
+      .sidebar-wrapper
+        = render 'layouts/nav/project'
+      .content-wrapper
+        .container-fluid
+          .content
+            = render "layouts/flash"
+            = yield
     = yield :embedded_scripts

app/views/projects/_settings_nav.html.haml

-%ul.nav.nav-pills.nav-stacked.nav-stacked-menu.append-bottom-20.project-settings-nav
+%ul.project-settings-nav
   = nav_link(path: 'projects#edit') do
     = link_to edit_project_path(@project), class: "stat-tab tab " do
       %i.fa.fa-pencil-square-o