Improve mobile sidebar

1 files changed, 23 insertions, 30 deletions

diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index c82c8a00530..0b09fa8888c 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -15,7 +15,9 @@ $new-sidebar-width: 220px;
 $new-sidebar-collapsed-width: 50px;
 
 .page-with-new-sidebar {
-  padding-left: $new-sidebar-collapsed-width;
+  @media (min-width: $screen-md-min) {
+    padding-left: $new-sidebar-collapsed-width;
+  }
 
   @media (min-width: $screen-lg-min) {
     padding-left: $new-sidebar-width;
@@ -49,10 +51,6 @@ $new-sidebar-collapsed-width: 50px;
     align-items: center;
     padding: 10px 16px 10px 10px;
     color: $gl-text-color;
-
-    @media (max-width: $screen-xs-max) {
-      padding-right: 30px;
-    }
   }
 
   &:hover,
@@ -77,26 +75,6 @@ $new-sidebar-collapsed-width: 50px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  .close-nav-button {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    background-color: transparent;
-    border: 0;
-    padding: 0 10px;
-    color: $gl-text-color-secondary;
-
-    @media (max-width: $screen-xs-max) {
-      display: block;
-    }
-
-    &:hover {
-      color: $gl-text-color;
-    }
-  }
 }
 
 .settings-avatar {
@@ -339,21 +317,19 @@ $new-sidebar-collapsed-width: 50px;
 
 // Collapsed nav
 
-.toggle-sidebar-button {
+.toggle-sidebar-button,
+.close-nav-button {
   width: $new-sidebar-width - 2px;
   position: fixed;
   bottom: 0;
   padding: 16px;
   background-color: $gray-normal;
+  border: 0;
   border-top: 2px solid $border-color;
   color: $gl-text-color-secondary;
   display: flex;
   align-items: center;
 
-  @media (max-width: $screen-xs-max) {
-    display: none;
-  }
-
   i {
     font-size: 20px;
     margin-right: 8px;
@@ -369,6 +345,13 @@ $new-sidebar-collapsed-width: 50px;
   }
 }
 
+.toggle-sidebar-button {
+  @media (max-width: $screen-xs-max) {
+    display: none;
+  }
+}
+
+
 .sidebar-icons-only {
   .context-header {
     height: 60px;
@@ -415,6 +398,10 @@ $new-sidebar-collapsed-width: 50px;
 
 // Mobile nav
 
+.close-nav-button {
+  display: none;
+}
+
 .toggle-mobile-nav {
   display: none;
   background-color: transparent;
@@ -434,6 +421,12 @@ $new-sidebar-collapsed-width: 50px;
   }
 }
 
+@media (max-width: $screen-xs-max) {
+  .close-nav-button {
+    display: flex;
+  }
+}
+
 .mobile-overlay {
   display: none;