diff --git a/template/admin/src/components/main/components/header-bar/header-bar.vue b/template/admin/src/components/main/components/header-bar/header-bar.vue
index 64c9c3466..9c3d95959 100644
--- a/template/admin/src/components/main/components/header-bar/header-bar.vue
+++ b/template/admin/src/components/main/components/header-bar/header-bar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="header-bar">
-    <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger>
+    <!-- <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger> -->
     <!-- <span class="i-layout-header-trigger" @click="handleReload">
       <Icon type="ios-refresh" color='#fff' />
     </span> -->
diff --git a/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.less b/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.less
index 039954fb8..ac3ca9194 100644
--- a/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.less
+++ b/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.less
@@ -8,8 +8,10 @@
   height: @size;
   display: inline-block;
   text-align: center;
-  color: #fff;
+  // color: #fff;
   margin-top: 5px;
+  cursor: pointer;
+  z-index: 9999;
   .iconcaidanshouqi {
     .trans;
     vertical-align: top;
diff --git a/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.vue b/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.vue
index ed7d87156..98db00fcd 100644
--- a/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.vue
+++ b/template/admin/src/components/main/components/header-bar/sider-trigger/sider-trigger.vue
@@ -1,7 +1,9 @@
 <template>
-  <a @click="handleChange" type="text" :class="['sider-trigger-a', collapsed ? 'collapsed' : '']"
-    ><i class="iconfont" color='#fff' :class="collapsed ? 'iconcaidanzhankai' : 'iconcaidanshouqi'"></i
-  ></a>
+  <div class="sider-menu" @click="handleChange">
+    <a type="text" :class="['sider-trigger-a', collapsed ? 'collapsed' : '']"
+      ><i class="iconfont" color="#fff" :class="collapsed ? 'iconcaidanzhankai' : 'iconcaidanshouqi'"></i
+    ></a>
+  </div>
 </template>
 <script>
 export default {
@@ -25,6 +27,19 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+.sider-menu {
+  position: absolute;
+  width: 100%;
+  max-width: 90px;
+  left: 0;
+  bottom: 0;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid #d9dadd;
+  color: #515a6e;
+}
 @import './sider-trigger.less';
 .sider-trigger-a {
   padding: 14px 6px;
diff --git a/template/admin/src/components/main/components/side-menu/side-menu.vue b/template/admin/src/components/main/components/side-menu/side-menu.vue
index a29dddde8..6ef47f2b9 100644
--- a/template/admin/src/components/main/components/side-menu/side-menu.vue
+++ b/template/admin/src/components/main/components/side-menu/side-menu.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="side-menu-wrapper">
     <slot></slot>
+    <sider-trigger :collapsed="collapsed" @on-change="handleCollpasedChange"></sider-trigger>
     <div class="side-menu-box" v-show="!collapsed">
       <div class="parent-menu">
         <Menu
@@ -99,6 +100,8 @@ import { getUnion } from '@/libs/tools';
 import { mapState } from 'vuex';
 import mixin from './mixin';
 import itemMixin from './item-mixin';
+import { setCookies } from '@/libs/util';
+import siderTrigger from '../header-bar/sider-trigger';
 
 export default {
   name: 'SideMenu',
@@ -106,6 +109,7 @@ export default {
   components: {
     SideMenuItem,
     CollapsedMenu,
+    siderTrigger,
   },
   props: {
     menuList: {
@@ -196,7 +200,12 @@ export default {
         }
       });
     },
-
+    handleCollpasedChange(state) {
+      console.log(state);
+      this.collapsed = state;
+      this.$emit('on-coll-change', state);
+      setCookies('collapsed', state);
+    },
     handleSelect(name, type) {
       this.childOptions = [];
       this.menuList.map((e) => {
@@ -290,6 +299,9 @@ export default {
 <style lang="less">
 @import './side-menu.less';
 .ivu-menu {
+  .side-menu-wrapper {
+    position: relative;
+  }
   .side-menu-wrapper a.drop-menu-a {
     padding: 1px !important;
   }
diff --git a/template/admin/src/components/main/main.vue b/template/admin/src/components/main/main.vue
index 1a0333a0b..ca549ff19 100644
--- a/template/admin/src/components/main/main.vue
+++ b/template/admin/src/components/main/main.vue
@@ -10,8 +10,7 @@
         <language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px" :lang="local" />
         <header-notice></header-notice>
         <fullscreen v-model="isFullscreen" style="margin-right: 10px" />
-        <Reload  @on-reload="handleReload"></Reload>
-
+        <Reload @on-reload="handleReload"></Reload>
         <error-store
           v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader"
           :has-read="hasReadErrorPage"
@@ -34,6 +33,7 @@
         <side-menu
           accordion
           ref="sideMenu"
+          @on-coll-change="handleCollapsedChange"
           :active-name="$route.path"
           :collapsed="collapsed"
           @on-select="turnToPage"
@@ -104,7 +104,7 @@ export default {
     iCopyright,
     HeaderSearch,
     HeaderNotice,
-    Reload
+    Reload,
   },
   data() {
     return {