modify toggle

src/components/commons/Header.vue

@@ -3,20 +3,21 @@
     <div class="container">
       <div class="navbar-translate">
         <a class="navbar-brand">众测</a>
-        <!-- <button
-          class="navbar-toggler"
+        <button
           type="button"
           data-toggle="collapse"
           aria-expanded="false"
           aria-label="Toggle navigation"
+          @click="openNavBarFunc"
+           v-bind:class="['navbar-toggler',{ 'open-fixed': openNavBar}]"
         >
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
           <span class="navbar-toggler-icon"></span>
-        </button> -->
+        </button>
       </div>
-      <div class="collapse navbar-collapse">
-        <ul class="navbar-nav ml-auto">
+      <div class="collapse navbar-collapse"  v-bind:style="{right:openNavBar?'230px':'0'}">
+        <ul class="navbar-nav ml-auto"  >
           <li class="dropdown nav-item">
             <router-link to="/home">
               <a  class="dropdown-toggle nav-link" data-toggle="dropdown">
@@ -57,11 +58,28 @@
 
 <script>
 export default {
-  name: "header-container"
+  name: "header-container",
+  data(){
+    return{
+      openNavBar:false
+    }
+  },
+  methods:{
+    openNavBarFunc(){
+      this.openNavBar = !this.openNavBar;
+    }
+  }
 };
 </script>
 
 <style lang="less" scoped>
+
+.open-fixed{
+  position:fixed;
+  right:5px;
+  z-index: 1033;
+}
+
 .navbar {
   background-color: #fff !important;
   box-shadow: none;
@@ -120,29 +138,29 @@ export default {
   align-items: center;
 }
 
-// @media (max-width: 991px) {
-//   .navbar-collapse {
-//     position: fixed;
-//     display: block;
-//     top: 0;
-//     height: 100vh;
-//     width: 230px;
-//     right: 0;
-//     margin-right: 0 !important;
-//     z-index: 1032;
-//     visibility: visible;
-//     background-color: #999;
-//     overflow-y: visible;
-//     border-top: none;
-//     text-align: left;
-//     padding-right: 0;
-//     padding-left: 0;
-//     max-height: none !important;
-//     -webkit-transform: translate3d(230px, 0, 0);
-//     transform: translate3d(230px, 0, 0);
-//     transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
-//   }
-// }
+@media (max-width: 991px) {
+  .navbar-collapse {
+    position: absolute;
+    display: block;
+    top: 0;
+    height:100vh;
+    width: 230px;
+    right: 0;
+    margin-right: 0 !important;
+    z-index: 1032;
+    visibility: visible;
+    background-color: #fff;
+    overflow-y: visible;
+    border-top: none;
+    text-align: left;
+    padding-right: 0;
+    padding-left: 0;
+    max-height: none !important;
+    -webkit-transform: translate3d(230px, 0, 0);
+    transform: translate3d(230px, 0, 0);
+    transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
+  }
+}
 
 @media (min-width: 992px) {
   .navbar-collapse {
@@ -168,6 +186,8 @@ html [type="button"] {
   outline: none;
 }
 
+
+
 .navbar-toggler:not(:disabled):not(.disabled) {
   cursor: pointer;
 }
@@ -216,6 +236,7 @@ html [type="button"] {
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
+  text-align: center;
 }
 
 @media (min-width: 991px) {
@@ -230,6 +251,13 @@ html [type="button"] {
   }
 }
 
+@media (max-width: 991px) {
+  .navbar-nav {
+    margin-top:70px;
+    text-align: right;
+  }
+}
+
 .ml-auto,
 .mx-auto {
   margin-left: auto !important;
@@ -291,7 +319,7 @@ html [type="button"] {
 
 .navbar .navbar-nav .nav-item .nav-link {
   padding: 15px;
-  text-align: center;
+  // text-align: center;
   height: 20px;
   vertical-align: middle;
   color: inherit;

src/main.js

@@ -6,6 +6,7 @@ import router from './router'
 import 'font-awesome/css/font-awesome.css'
 import './style/main.scss';
 
+
 import {
   Carousel, CarouselItem, Row, Col, Table, TableColumn, Form, FormItem, Button, ButtonGroup,
   Menu, Submenu, MenuItem, MenuItemGroup, Input, InputNumber, Radio, RadioGroup, RadioButton,