1 首先注释掉
sidebar.scss中的(如下两部分)

.sidebar-container {
   transition: width 0.28s;
   // width: $sideBarWidth;
   height: 100%;
   
   .......
   
  .hideSidebar {
   .sidebar-container {
     // width: 54px !important;
   }

2.在layout中的index。vue的style中添加如下样式（注意自己的名字）

.openSlidebar .sidebar-container {
 width: $sideBarWidth;
}

.hideSlidebar .sidebar-container {
 width: $hideSideBarWidth;
}

我的样式如下仅作参考

<style lang="scss" scoped>
/*在 css 中我们需要使用 ~@ 并表示 src 目录 */
@import '~@/styles/mixin.scss';
@import '~@/styles/variables.scss';

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
}

.openSlidebar .sidebar-container {
  width: $sideBarWidth;
}

.hideSlidebar .sidebar-container {
  width: $hideSideBarWidth;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSlidebar .fixed-header {
  width: calc(100% - #{$hideSideBarWidth});
}
</style>