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,36 +1,34 @@
 <template>
   <transition name="showHeader">
-    <div v-if="visible" class="header-animat">
-      <a-layout-header
-        v-if="visible"
-        :class="[
-          fixedHeader && 'ant-header-fixedHeader',
-          sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed'
-        ]"
-        style="padding: 0"
-      >
-        <div v-if="mode === 'sidemenu'" class="header">
-          <a-icon
-            v-if="device === 'mobile'"
-            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
-            class="trigger"
-            @click="toggle"
-          />
-          <a-icon v-else :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggle" />
-          <user-menu></user-menu>
-        </div>
-        <div v-else :class="['top-nav-header-index', theme]">
-          <div class="header-index-wide">
-            <div class="header-index-left">
-              <logo v-if="device !== 'mobile'" class="top-nav-header" />
-              <s-menu v-if="device !== 'mobile'" :menu="menus" :theme="theme" mode="horizontal" />
-              <a-icon v-else :type="collapsed ? 'menu-fold' : 'menu-unfold'" class="trigger" @click="toggle" />
-            </div>
-            <user-menu class="header-index-right"></user-menu>
+    <a-layout-header
+      v-if="visible"
+      :class="[
+        fixedHeader && 'ant-header-fixedHeader',
+        sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed'
+      ]"
+      style="padding: 0"
+    >
+      <div v-if="mode === 'sidemenu'" class="header">
+        <a-icon
+          v-if="device === 'mobile'"
+          :type="collapsed ? 'menu-fold' : 'menu-unfold'"
+          class="trigger"
+          @click="toggle"
+        />
+        <a-icon v-else :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="toggle" />
+        <user-menu></user-menu>
+      </div>
+      <div v-else :class="['top-nav-header-index', theme]">
+        <div class="header-index-wide">
+          <div class="header-index-left">
+            <logo v-if="device !== 'mobile'" class="top-nav-header" />
+            <s-menu v-if="device !== 'mobile'" :menu="menus" :theme="theme" mode="horizontal" />
+            <a-icon v-else :type="collapsed ? 'menu-fold' : 'menu-unfold'" class="trigger" @click="toggle" />
           </div>
+          <user-menu class="header-index-right"></user-menu>
         </div>
-      </a-layout-header>
-    </div>
+      </div>
+    </a-layout-header>
   </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)
-    },
-    CLOSE_SIDEBAR: state => {
-      Vue.ls.set(SIDEBAR_TYPE, true)
-      state.sidebar = false
+      state.sidebar = type
     },
     TOGGLE_DEVICE: (state, device) => {
       state.device = device