feat: add fixed sidemenu

Author: sendya

src/components/menu/SideMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout-sider
-    :class="['sider', device === 'desktop' ? null : 'shadow', theme ]"
+    :class="['sider', device === 'desktop' ? null : 'shadow', theme, fixedSideMenu ? 'ant-fixed-sidemenu' : null ]"
     width="256px" 
     :collapsible="collapsible"
     v-model="collapsed" 
@@ -58,6 +58,7 @@
     computed: {
       ...mapState({
         device: state => state.app.device,
+        fixedSideMenu: state => state.app.fixedSideMenu,
       })
     },
     methods: {

src/components/page/GlobalHeader.vue

@@ -1,5 +1,6 @@
 <template>
-  <a-layout-header v-if="!headerBarFixed" :class="[fixedHeader && 'ant-header-fixedHeader']" :style="{ padding: '0', width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' }">
+  <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
+  <a-layout-header v-if="!headerBarFixed" :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'"

src/components/page/GlobalLayout.vue

@@ -47,7 +47,7 @@
       </a-drawer>
     </template>
 
-    <a-layout :class="[layoutMode]">
+    <a-layout :class="[layoutMode]" :style="{ paddingLeft: fixedSideMenu ? `${sidebarOpened ? 256 : 80}px` : '0' }">
       <!-- layout header -->
       <global-header :mode="layoutMode" :theme="theme" :collapsed="collapsed" :device="device" @toggle="toggle"/>
 
@@ -97,6 +97,7 @@
         layoutMode: state => state.app.layout,
         sidebarOpened: state => state.app.sidebar.opened,
         fixedHeader: state => state.app.fixedHeader,
+        fixedSideMenu: state => state.app.fixedSideMenu,
         theme: state => state.app.theme,
         device: state => state.app.device,
       })
@@ -167,15 +168,47 @@
         background: rgba(0, 0, 0, 0.025);
       }
     }
-    .ant-header-fixedHeader {
-      position: fixed;
-      top: 0;
-      right: 0;
-      z-index: 9;
-      width: 100%;
-      transition: width .2s;
+
+    .topmenu {
+      .ant-header-fixedHeader {
+        position: fixed;
+        top: 0;
+        right: 0;
+        z-index: 9;
+        width: 100%;
+        transition: width .2s;
+
+        &.ant-header-side-opened {
+          width: 100%;
+        }
+
+        &.ant-header-side-closed {
+          width: 100%;
+        }
+      }
+    }
+
+    .sidemenu {
+      .ant-header-fixedHeader {
+        position: fixed;
+        top: 0;
+        right: 0;
+        z-index: 9;
+        width: 100%;
+        transition: width .2s;
+
+        &.ant-header-side-opened {
+          width: calc(100% - 256px)
+        }
+
+        &.ant-header-side-closed {
+          width: calc(100% - 80px)
+        }
+      }
     }
 
+
+
     .header {
       height: 64px;
       padding: 0 12px 0 0;
@@ -400,6 +433,11 @@
     position: relative;
     z-index: 10;
 
+    &.ant-fixed-sidemenu {
+      position: fixed;
+      height: 100%;
+    }
+
     .logo {
       height: 64px;
       position: relative;

src/components/setting/SettingDrawer.vue

@@ -89,7 +89,7 @@
             <a-list :split="false">
               <a-list-item>
                 <a-select slot="actions" defaultValue="auto" size="small">
-                  <a-select-option value="fixed">固定</a-select-option>
+                  <a-select-option value="fixed" v-if="layoutMode !== 'sidemenu'" disabled>固定</a-select-option>
                   <a-select-option value="auto">流式</a-select-option>
                 </a-select>
                 <a-list-item-meta>
@@ -108,6 +108,12 @@
                   <div slot="title">下滑时隐藏 Header</div>
                 </a-list-item-meta>
               </a-list-item>
+              <a-list-item>
+                <a-switch slot="actions" size="small" :defaultChecked="fixedSideMenu" @change="handleFixedSideMenu" />
+                <a-list-item-meta>
+                  <div slot="title">固定侧边菜单</div>
+                </a-list-item-meta>
+              </a-list-item>
             </a-list>
           </div>
         </div>
@@ -169,6 +175,7 @@
         primaryColor: state => state.app.color,
         colorWeak: state => state.app.weak,
         fixedHeader: state => state.app.fixedHeader,
+        fixedSideMenu: state => state.app.fixedSideMenu,
         swipeDownHiddenHeader: state => state.app.swipeDownHiddenHeader,
       })
     },
@@ -219,6 +226,9 @@
       },
       handleFixedHeaderHidden (autoHidden) {
         this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
+      },
+      handleFixedSideMenu (fixed) {
+        this.$store.dispatch('ToggleFixedSidemenu', fixed)
       }
     },
   }

src/defaultConfig.js

@@ -15,6 +15,7 @@ export default {
   navTheme: 'dark', // theme for nav menu
   layout: 'sidemenu',
   fixedHeader: false, // fixed header
+  fixedSideMenu: false,
   swipeDownHiddenHeader: false,
   colorWeak: false,
   // vue-ls options

src/main.js

@@ -13,7 +13,17 @@ import 'ant-design-vue/dist/antd.less';  // or 'ant-design-vue/dist/antd.less'
 import '@/permission' // permission control
 import '@/utils/filter' // base filter
 
-import { ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, DEFAULT_LAYOUT_MODE, DEFAULT_COLOR_WEAK, SIDEBAR_TYPE, DEFAULT_FIXED_HEADER, DEFAULT_FIXED_HEADER_HIDDEN } from "@/store/mutation-types"
+import {
+  ACCESS_TOKEN,
+  DEFAULT_COLOR,
+  DEFAULT_THEME,
+  DEFAULT_LAYOUT_MODE,
+  DEFAULT_COLOR_WEAK,
+  SIDEBAR_TYPE,
+  DEFAULT_FIXED_HEADER,
+  DEFAULT_FIXED_HEADER_HIDDEN,
+  DEFAULT_FIXED_SIDEMENU
+} from "@/store/mutation-types"
 import config from '@/defaultConfig'
 
 Vue.config.productionTip = false
@@ -27,10 +37,11 @@ new Vue({
   router,
   store,
   mounted () {
-    store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, false))
+    store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
     store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
     store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
     store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
+    store.commit('TOGGLE_FIXED_SIDEMENU', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixedSideMenu))
     store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.swipeDownHiddenHeader))
     store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
     store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))

src/store/modules/app.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { SIDEBAR_TYPE, DEFAULT_THEME, DEFAULT_LAYOUT_MODE, DEFAULT_COLOR, DEFAULT_COLOR_WEAK, DEFAULT_FIXED_HEADER, DEFAULT_FIXED_HEADER_HIDDEN } from "@/store/mutation-types"
+import { SIDEBAR_TYPE, DEFAULT_THEME, DEFAULT_LAYOUT_MODE, DEFAULT_COLOR, DEFAULT_COLOR_WEAK, DEFAULT_FIXED_HEADER, DEFAULT_FIXED_SIDEMENU, DEFAULT_FIXED_HEADER_HIDDEN } from "@/store/mutation-types"
 
 const app = {
   state: {
@@ -11,6 +11,7 @@ const app = {
     theme: '',
     layout: '',
     fixedHeader: false,
+    fixedSideMenu: false,
     swipeDownHiddenHeader: false,
     color: null,
     weak: false
@@ -41,6 +42,10 @@ const app = {
       Vue.ls.set(DEFAULT_FIXED_HEADER, fixed)
       state.fixedHeader = fixed
     },
+    TOGGLE_FIXED_SIDEMENU: (state, fixed) => {
+      Vue.ls.set(DEFAULT_FIXED_SIDEMENU, fixed)
+      state.fixedSideMenu = fixed
+    },
     TOGGLE_FIXED_HEADER_HIDDEN: (state, show) => {
       Vue.ls.set(DEFAULT_FIXED_HEADER_HIDDEN, show)
       state.swipeDownHiddenHeader = show
@@ -74,6 +79,9 @@ const app = {
     ToggleFixedHeader({ commit }, fixedHeader) {
       commit('TOGGLE_FIXED_HEADER', fixedHeader)
     },
+    ToggleFixedSidemenu({ commit }, fixedSideMenu) {
+      commit( 'TOGGLE_FIXED_SIDEMENU', fixedSideMenu)
+    },
     ToggleFixedHeaderHidden({ commit }, show) {
       commit('TOGGLE_FIXED_HEADER_HIDDEN', show)
     },

src/store/mutation-types.js

@@ -5,4 +5,5 @@ export const DEFAULT_LAYOUT_MODE = 'DEFAULT_LAYOUT_MODE'
 export const DEFAULT_COLOR = 'DEFAULT_COLOR'
 export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK'
 export const DEFAULT_FIXED_HEADER = 'DEFAULT_FIXED_HEADER'
+export const DEFAULT_FIXED_SIDEMENU= 'DEFAULT_FIXED_SIDEMENU'
 export const DEFAULT_FIXED_HEADER_HIDDEN = 'DEFAULT_FIXED_HEADER_HIDDEN'