feat[sidebar]: add resonsive sidebar (PanJiaChen#636)

Author: PanJiaChen

src/store/getters.js

@@ -1,6 +1,7 @@
 const getters = {
   sidebar: state => state.app.sidebar,
   language: state => state.app.language,
+  device: state => state.app.device,
   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,
   token: state => state.user.token,

src/store/modules/app.js

@@ -3,8 +3,10 @@ import Cookies from 'js-cookie'
 const app = {
   state: {
     sidebar: {
-      opened: !+Cookies.get('sidebarStatus')
+      opened: !+Cookies.get('sidebarStatus'),
+      withoutAnimation: false
     },
+    device: 'desktop',
     language: Cookies.get('language') || 'en'
   },
   mutations: {
@@ -15,6 +17,15 @@ const app = {
         Cookies.set('sidebarStatus', 0)
       }
       state.sidebar.opened = !state.sidebar.opened
+      state.sidebar.withoutAnimation = false
+    },
+    CLOSE_SIDEBAR: (state, withoutAnimation) => {
+      Cookies.set('sidebarStatus', 1)
+      state.sidebar.opened = false
+      state.sidebar.withoutAnimation = withoutAnimation
+    },
+    TOGGLE_DEVICE: (state, device) => {
+      state.device = device
     },
     SET_LANGUAGE: (state, language) => {
       state.language = language
@@ -25,6 +36,12 @@ const app = {
     toggleSideBar({ commit }) {
       commit('TOGGLE_SIDEBAR')
     },
+    closeSideBar({ commit }, { withoutAnimation }) {
+      commit('CLOSE_SIDEBAR', withoutAnimation)
+    },
+    toggleDevice({ commit }, device) {
+      commit('TOGGLE_DEVICE', device)
+    },
     setLanguage({ commit }, language) {
       commit('SET_LANGUAGE', language)
     }

src/styles/sidebar.scss

@@ -1,11 +1,13 @@
 #app {
+
   // 主体区域
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
     margin-left: 180px;
   }
-  // 侧边栏
+
+   // 侧边栏
   .sidebar-container {
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
@@ -32,6 +34,7 @@
       width: 100% !important;
     }
   }
+
   .hideSidebar {
     .sidebar-container {
       width: 36px !important;
@@ -62,7 +65,8 @@
       }
     }
   }
-  .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
+
+  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
   .sidebar-container .el-submenu .el-menu-item {
     min-width: 180px !important;
     background-color: $subMenuBg !important;
@@ -73,4 +77,29 @@
   .el-menu--collapse .el-menu .el-submenu {
     min-width: 180px !important;
   }
+
+  //适配移动端
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+    .sidebar-container {
+      top: 50px;
+      transition: transform .28s;
+      width: 180px !important;
+    }
+    &.hideSidebar {
+      .sidebar-container {
+        transition-duration: 0.3s;
+        transform: translate3d(-180px, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
 }

src/views/layout/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
+  <div class="app-wrapper" :class="classObj">
     <sidebar class="sidebar-container"></sidebar>
     <div class="main-container">
       <navbar></navbar>
@@ -11,6 +11,7 @@
 
 <script>
 import { Navbar, Sidebar, AppMain, TagsView } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
 
 export default {
   name: 'layout',
@@ -20,9 +21,20 @@ export default {
     AppMain,
     TagsView
   },
+  mixins: [ResizeMixin],
   computed: {
     sidebar() {
       return this.$store.state.app.sidebar
+    },
+    device() {
+      return this.$store.state.app.device
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
     }
   }
 }

src/views/layout/mixin/ResizeHandler.js

@@ -0,0 +1,41 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 1024
+const RATIO = 3
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('closeSideBar', { withoutAnimation: false })
+      }
+    }
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('toggleDevice', 'mobile')
+      store.dispatch('closeSideBar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - RATIO < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('closeSideBar', { withoutAnimation: true })
+        }
+      }
+    }
+  }
+}