Hide navbar on mobile

1 files changed, 40 insertions, 0 deletions

diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e940fd7286e..f4b79911b66 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -210,15 +210,33 @@
   }
 }
 
+.sidebar-wrapper {
+  &.hidden-nav {
+    width: 0;
+  }
+}
+
 .page-sidebar-collapsed {
   padding-left: $sidebar_collapsed_width;
 
+  @media (max-width: $screen-xs-min) {
+    padding-left: 0;
+  }
+
   .sidebar-wrapper {
     width: $sidebar_collapsed_width;
 
+    @media (max-width: $screen-xs-min) {
+      width: 0;
+    }
+
     .header-logo {
       width: $sidebar_collapsed_width;
 
+      @media (max-width: $screen-xs-min) {
+        width: 0;
+      }
+
       a {
         padding-left: ($sidebar_collapsed_width - 36) / 2;
 
@@ -244,12 +262,22 @@
 
     .collapse-nav a {
       width: $sidebar_collapsed_width;
+
+      @media (max-width: $screen-xs-min) {
+        width: 0;
+      }
     }
 
     .sidebar-user {
       padding-left: ($sidebar_collapsed_width - 36) / 2;
       width: $sidebar_collapsed_width;
 
+      @media (max-width: $screen-xs-min) {
+        width: 0;
+        padding-left: 0;
+        padding-right: 0;
+      }
+
       .username {
         display: none;
       }
@@ -258,6 +286,10 @@
 
   .layout-nav {
     padding-right: $sidebar_collapsed_width;
+
+    @media (max-width: $screen-xs-min) {
+      padding-right: 0;;
+    }
   }
 }
 
@@ -268,6 +300,10 @@
     padding-left: $sidebar_width;
   }
 
+  @media (max-width: $screen-xs-min) {
+    padding-left: 0;
+  }
+
   .sidebar-wrapper {
     width: $sidebar_width;
 
@@ -288,6 +324,10 @@
 
   .layout-nav {
     padding-right: $sidebar_width;
+
+    @media (max-width: $screen-xs-min) {
+      padding-right: 0;;
+    }
   }
 }