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

1 files changed, 29 insertions, 28 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;