Implement compact side nav

1 files changed, 13 insertions, 23 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 0da96c4017d..3be83b0fc65 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -79,13 +79,17 @@ header {
 
     &.header-collapsed {
       padding: 0 16px;
+
+      .side-nav-toggle {
+        display: block;
+      }
     }
 
     .side-nav-toggle {
       display: none;
       position: absolute;
       left: -10px;
-      margin: 6px 0;
+      margin: 8px 0;
       padding: 6px 10px;
       border: none;
       background-color: $background-color;
@@ -97,10 +101,6 @@ header {
       &:focus {
         outline: none;
       }
-
-      @media (max-width: $screen-xs-min) {
-        display: block;
-      }
     }
   }
 
@@ -171,31 +171,21 @@ header {
   }
 }
 
-@mixin collapsed-header {
-  margin-left: $sidebar_collapsed_width;
-}
-
 .header-collapsed {
-  margin-left: $sidebar_collapsed_width;
-
-  @media (min-width: $screen-md-min) {
-    @include collapsed-header;
-  }
+  margin-left: 0;
 
-  @media (max-width: $screen-xs-min) {
-    margin-left: 0;
+  .header-content {
+    padding-left: 30px;
+    transition-duration: .3s;
   }
 }
 
 .header-expanded {
-  margin-left: $sidebar_collapsed_width;
+  margin-left: 0;
 
-  @media (min-width: $screen-md-min) {
-    margin-left: $sidebar_width;
-  }
-
-  @media (max-width: $screen-xs-min) {
-    margin-left: 0;
+  .header-content {
+    padding-left: $sidebar_width;
+    transition-duration: .3s;
   }
 }