perf: optimize the experience of collapsing the menu (#493)

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/App.vue

@@ -22,11 +22,11 @@ export default {
       switch (deviceType) {
         case DEVICE_TYPE.DESKTOP:
           $store.commit('TOGGLE_DEVICE', 'desktop')
-          $store.dispatch('setSidebar', true)
+          $store.dispatch('setSidebar', this.$store.getters.sidebar)
           break
         case DEVICE_TYPE.TABLET:
           $store.commit('TOGGLE_DEVICE', 'tablet')
-          $store.dispatch('setSidebar', false)
+          $store.dispatch('setSidebar', this.$store.getters.sidebar)
           break
         case DEVICE_TYPE.MOBILE:
         default:

src/components/GlobalHeader/GlobalHeader.vue

@@ -1,6 +1,5 @@
 <template>
   <transition name="showHeader">
-    <div v-if="visible" class="header-animat">
     <a-layout-header
       v-if="visible"
       :class="[
@@ -30,7 +29,6 @@
         </div>
       </div>
     </a-layout-header>
-    </div>
   </transition>
 </template>
 
@@ -116,11 +114,6 @@ export default {
 </script>
 
 <style lang="less">
-.header-animat {
-  position: relative;
-  z-index: 999;
-}
-
 .showHeader-enter-active {
   transition: all 0.25s ease;
 }

src/components/SettingDrawer/SettingDrawer.vue

@@ -176,6 +176,7 @@ export default {
       } else {
         this.handleSetFixedHeader(true)
         this.handleSetFixedSidebar(false)
+        this.$store.dispatch('setSidebar', true)
       }
     },
     handleContentWidthChange(type) {

src/components/Tools/Logo.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="logo">
     <img
+      :style="{ width: sidebarOpened ? '64px' : '48px' }"
       alt="Halo Logo"
       class="select-none cursor-pointer hover:brightness-125 transition-all"
       src="/images/logo.svg"
@@ -13,9 +14,11 @@
 import { mapActions, mapGetters } from 'vuex'
 import apiClient from '@/utils/api-client'
 import throttle from 'lodash.throttle'
+import { mixin } from '@/mixins/mixin'
 
 export default {
   name: 'Logo',
+  mixins: [mixin],
   data() {
     return {
       clickCount: 0

src/layouts/BasicLayout.vue

@@ -131,15 +131,6 @@ export default {
       this.setSidebar(!this.collapsed)
       triggerWindowResizeEvent()
     },
-    paddingCalc() {
-      let left = ''
-      if (this.sidebarOpened) {
-        left = this.isDesktop() ? '256px' : '80px'
-      } else {
-        left = (this.isMobile() && '0') || (this.fixedSidebar && '80px') || '0'
-      }
-      return left
-    },
     menuSelect() {
       if (!this.isDesktop()) {
         this.collapsed = false

src/store/getters.js

@@ -3,6 +3,7 @@ const getters = {
   theme: state => state.app.theme,
   color: state => state.app.color,
   layoutSetting: state => state.app.layoutSetting,
+  sidebar: state => state.app.sidebar,
   loginModal: state => state.app.loginModal,
   token: state => state.user.token,
   user: state => state.user.user,

src/store/modules/app.js

@@ -27,12 +27,8 @@ const app = {
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
-      state.sidebar = type
       Vue.ls.set(SIDEBAR_TYPE, type)
-    },
+      state.sidebar = type
-    CLOSE_SIDEBAR: state => {
-      Vue.ls.set(SIDEBAR_TYPE, true)
-      state.sidebar = false
     },
     TOGGLE_DEVICE: (state, device) => {
       state.device = device