adjust navbar layout in small size screen

clarkdo · Aug 18, 2017 · 30a7176 · 30a7176
1 parent a024eda
commit 30a7176
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/client/components/Navbar.vue b/client/components/Navbar.vue
@@ -81,5 +81,17 @@ export default class Navbar extends Vue {
       }
     }
   }
+  @media (max-width: 768px) {
+    position: inherit;
+    width: auto;
+    height: auto;
+    .el-menu {
+      header {
+        img {
+          margin-left: 20px;
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="app">
     <el-row class='main'>
-      <el-col :span="4" :class="{hide: isMenuHidden, navCol: true}">
+      <el-col :sm="4" :xs:="24" :class="{hide: isMenuHidden, navCol: true}">
         <navbar :authUser="authUser"></navbar>
       </el-col>
-      <el-col :span="colSize" class="content">
+      <el-col :sm="colSize" xs:="24" class="content">
         <el-row><headbar></headbar></el-row>
         <el-row><nuxt></nuxt></el-row>
       </el-col>
@@ -32,24 +32,25 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.navCol {
-  &.hide {
-    opacity: 0;
-    width: 0;
-    transition: width 0.5s, opacity 0.5s ease-out;
-  }
-  transition: width 0.5s, opacity 0.5s ease-in;
-}
+
 .app {
   height: 100%;
   .el-row.main {
     height: 100%;
     .el-col {
       height: 100%;
     }
-    .content {
+    .navCol {
+      &.hide {
+        opacity: 0;
+        width: 0;
+        transition: width 0.5s, opacity 0.5s ease-out;
+      }
       transition: width 0.5s, opacity 0.5s ease-in;
     }
   }
+  @media (max-width: 768px) {
+    height: auto;
+  }
 }
 </style>