Remove toggle partial; Move pin link to top of side nav

4 files changed, 38 insertions, 35 deletions

diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 9aefc158d6e..99833ef842a 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -17,7 +17,7 @@
     height: 100%;
     overflow: hidden;
     transition: width $sidebar-transition-duration;
-    @include box-shadow(2px 0 16px 0 #bbb);
+    @include box-shadow(2px 0 16px 0 $box-shadow-gray);
   }
 }
 
@@ -76,7 +76,7 @@
     }
 
     a {
-      padding: 7px 15px;
+      padding: 7px 16px;
       font-size: $gl-font-size;
       line-height: 24px;
       display: block;
@@ -108,7 +108,7 @@
   }
 }
 
-.toggle-nav-collapse {
+.sidebar-action-buttons {
   width: $sidebar_width;
   position: absolute;
   top: 0;
@@ -117,12 +117,37 @@
   padding: 5px 0;
   font-size: 18px;
   line-height: 30px;
+
+  .toggle-nav-collapse {
+    left: 0;
+  }
+
+  .pin-nav-btn {
+    right: 0;
+    display: none;
+
+    @media (min-width: $sidebar-breakpoint) {
+      display: block;
+    }
+
+    .fa {
+      transition: transform .15s;
+    }
+
+    &.is-active {
+      .fa {
+        transform: rotate(90deg);
+      }
+    }
+  }
 }
 
 .nav-header-btn {
-  padding: 10px 5px;
+  padding: 10px 16px;
   color: inherit;
   transition-duration: .3s;
+  position: absolute;
+  top: 0;
 
   &:hover,
   &:focus {
@@ -131,30 +156,6 @@
   }
 }
 
-.pin-nav-btn {
-  display: none;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  height: 50px;
-  width: $sidebar_width;
-  line-height: 30px;
-
-  @media (min-width: $sidebar-breakpoint) {
-    display: block;
-  }
-
-  .fa {
-    transition: transform .15s;
-  }
-
-  &.is-active {
-    .fa {
-      transform: rotate(90deg);
-    }
-  }
-}
-
 .page-sidebar-collapsed {
   padding-left: 0;
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 4337fab5d87..230ed28438a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -86,6 +86,7 @@ $todo-alert-blue: #428bca;
 $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
 $btn-xs-side-margin: 5px;
+$box-shadow-gray: #bbb;
 
 /*
  * Color schema
diff --git a/app/views/layouts/_collapse_button.html.haml b/app/views/layouts/_collapse_button.html.haml
deleted file mode 100644
index 8c140a5943e..00000000000
--- a/app/views/layouts/_collapse_button.html.haml
+++ /dev/null
@@ -1,3 +0,0 @@
-= link_to '#', class: 'nav-header-btn text-center toggle-nav-collapse', title: "Open/Close" do
-  %span.sr-only Toggle navigation
-  = icon('bars')
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 8596bbfdef6..90c1fa4c87c 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,6 +1,13 @@
 .page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
   .sidebar-wrapper.nicescroll{ class: nav_sidebar_class }
-    = render partial: 'layouts/collapse_button'
+    .sidebar-action-buttons
+      = link_to '#', class: 'nav-header-btn toggle-nav-collapse', title: "Open/Close" do
+        %span.sr-only Toggle navigation
+        = icon('bars')
+      = link_to '#', class: "nav-header-btn pin-nav-btn has-tooltip #{'is-active' if pinned_nav?} js-nav-pin", title: pinned_nav? ? "Unpin navigation" : "Pin Navigation", data: {placement: 'right', container: 'body'} do
+        %span.sr-only Toggle navigation pinning
+        = icon('thumb-tack')
+
     - if defined?(sidebar) && sidebar
       = render "layouts/nav/#{sidebar}"
     - elsif current_user
@@ -8,9 +15,6 @@
     - else
       = render 'layouts/nav/explore'
 
-    = link_to '#', class: "nav-header-btn text-center pin-nav-btn has-tooltip #{'is-active' if pinned_nav?} js-nav-pin", title: pinned_nav? ? "Unpin navigation" : "Pin Navigation", data: {placement: 'right', container: 'body'} do
-      %span.sr-only Toggle navigation pinning
-      = icon('thumb-tack')
   - if defined?(nav) && nav
     .layout-nav
       .container-fluid