vue3.2 汉堡按钮伸缩项（左侧菜单的伸缩）

1、创建组件来使用，@/layout/components/hanburger.vue

2、引用到整体页面

3、vuex 中@/store/modules/app 设置参数，点击进行相关变化

 state: () => ({
    siderType: true,
  }),
 mutations: {
    changeSiderType(state) {
      state.siderType = !state.siderType
    },
  },

4.@/layout/components/hamburger.点击后图标的变化

<div class="hamburger-container" @click="toggleClick">
    <svg-icon :icon="icon"></svg-icon>
 </div>

//js中
// 使用vuex
import { useStore } from 'vuex'
import { computed } from 'vue'
const store = useStore()
const toggleClick = () => {
  store.commit('app/changeSiderType')
}
// 图标转换
const icon = computed(() => {
  return store.getters.siderType ? 'hamburger-opened' : 'hamburger-closed'
})

5、 menu是否折叠 @/layout/menu/index.vue

 :collapse="!$store.getters.siderType"

     菜单的宽度变化 @/layout/index.vue

//template
 <el-aside :width="asideWidth" class="sidebar-container">
      <Menu />
 </el-aside>

//js
// 使用到vuex
import { useStore } from 'vuex'
import variables from '@/styles/variables.scss'
const store = useStore()
const asideWidth = computed(() => {
  return store.getters.siderType
    ? variables.sideBarWidth
    : variables.hideSideBarWidth
})

    右侧的宽度也是动态变化的

//template
    <el-container
      class="container"
      :class="{ hidderContainer: !$store.getters.siderType }"
    >
      <el-header>
        <Headers />
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>


//css
 &.hidderContainer {
    width: calc(100% - $hideSideBarWidth);
  }


扩展：calc()动态计算   &.上一级的目录（lang='scss'使用）