Moved pinned button to the bottom

Changed breakpoint width to 1440px

1 files changed, 23 insertions, 13 deletions

diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 1ac11989d7f..281c0a0e1e9 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -49,6 +49,10 @@
   font-size: 16px;
   line-height: 36px;
   transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
+
+  @media (min-width: $sidebar-breakpoint) {
+    bottom: 50px;
+  }
 }
 
 
@@ -70,6 +74,10 @@
   overflow-y: auto;
   overflow-x: hidden;
 
+  @media (min-width: $sidebar-breakpoint) {
+    bottom: 115px;
+  }
+
   &.navbar-collapse {
     padding: 0 !important;
   }
@@ -120,15 +128,15 @@
   }
 }
 
-.collapse-nav {
-  width: 100%;
+.toggle-nav-collapse {
+  width: $sidebar_width;
   position: absolute;
   top: 0;
   left: 0;
   min-height: 50px;
   padding: 5px 0;
   font-size: 18px;
-  background: transparent;
+  line-height: 30px;
 }
 
 .nav-header-btn {
@@ -143,16 +151,18 @@
   }
 }
 
-.toggle-nav-collapse {
-  position: relative;
-  left: 10px;
-  line-height: 40px;
-}
-
 .pin-nav-btn {
+  display: none;
   position: absolute;
-  right: 10px;
-  top: 2px;
+  left: 0;
+  bottom: 0;
+  height: 50px;
+  width: $sidebar_width;
+  line-height: 30px;
+
+  @media (min-width: $sidebar-breakpoint) {
+    display: block;
+  }
 
   .fa {
     transition: transform .15s;
@@ -182,14 +192,14 @@
 .page-sidebar-pinned {
   .content-wrapper,
   .layout-nav {
-    @media (min-width: $screen-lg-min) {
+    @media (min-width: $sidebar-breakpoint) {
       padding-left: $sidebar_width;
     }
   }
 }
 
 header.header-pinned-nav {
-  @media (min-width: $screen-lg-min) {
+  @media (min-width: $sidebar-breakpoint) {
     padding-left: ($sidebar_width + $gl-padding);
 
     .side-nav-toggle {