refs #341 Collapse side menu

src/renderer/components/TimelineSpace.vue

@@ -6,7 +6,7 @@
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.8)">
   <side-menu></side-menu>
-  <div class="page">
+  <div :class="collapse ? 'page-narrow':'page'">
     <header class="header" style="-webkit-app-region: drag;">
       <header-menu></header-menu>
     </header>
@@ -29,7 +29,8 @@ export default {
   components: { SideMenu, HeaderMenu, Modals, Contents },
   computed: {
     ...mapState({
-      loading: state => state.TimelineSpace.loading
+      loading: state => state.TimelineSpace.loading,
+      collapse: state => state.TimelineSpace.SideMenu.collapse
     })
   },
   created () {
@@ -126,4 +127,19 @@ export default {
   }
 }
 
+.page-narrow {
+  margin-left: 76px;
+  height: 100%;
+  box-sizing: border-box;
+
+  .header {
+    width: calc(100% - 141px);
+    position: fixed;
+    top: 0;
+    left: 141px;
+    height: 48px;
+    border-bottom: solid 1px var(--theme-border-color);
+  }
+}
+
 </style>

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="side_menu">
-    <div class="profile-wrapper" style="-webkit-app-region: drag;">
-      <div class="profile">
+    <div :class="collapse ? 'profile-wrapper narrow-menu':'profile-wrapper'" style="-webkit-app-region: drag;">
+      <div class="profile-narrow" v-if="collapse">
+        <img :src="account.avatar" class="avatar" />
+      </div>
+      <div class="profile-wide" v-else>
         <div>@{{ account.username }}
           <el-dropdown trigger="click" @command="handleProfile">
             <span class="el-dropdown-link">
@@ -14,14 +17,24 @@
         </div>
         <span>{{ account.domain }}</span>
       </div>
+      <div class="collapse">
+        <el-button type="text" class="release-collapse" @click="collapse = false" v-if="collapse">
+          <i class="el-icon-arrow-right"></i>
+        </el-button>
+        <el-button type="text" class="do-collapse" @click="collapse = true" v-else>
+          <i class="el-icon-arrow-left"></i>
+        </el-button>
+      </div>
+      <div class="clearfix"></div>
     </div>
     <el-menu
       :default-active="activeRoute()"
       :background-color="themeColor"
       text-color="#909399"
+      :collapse="collapse"
       active-text-color="#ffffff"
       :router="true"
-      class="el-menu-vertical timeline-menu">
+      :class="collapse ? 'el-menu-vertical timeline-menu narrow-menu':'el-menu-vertical timeline-menu'">
       <el-menu-item :index="`/${id()}/home`">
         <icon name="home"></icon>
         <span>Home</span>
@@ -84,7 +97,15 @@ export default {
       lists: state => state.TimelineSpace.SideMenu.lists,
       themeColor: state => state.App.theme.side_menu_color,
       overrideActivePath: state => state.TimelineSpace.SideMenu.overrideActivePath
-    })
+    }),
+    collapse: {
+      get () {
+        return this.$store.state.TimelineSpace.SideMenu.collapse
+      },
+      set (value) {
+        this.$store.commit('TimelineSpace/SideMenu/changeCollapse', value)
+      }
+    }
   },
   methods: {
     activeRoute () {
@@ -119,7 +140,8 @@ export default {
     height: 70px;
     font-size: 16px;
 
-    .profile {
+    .profile-wide {
+      float: left;
       color: #ffffff;
       font-weight: bold;
       padding: 20px 8px 10px 20px;
@@ -131,6 +153,32 @@ export default {
         cursor: pointer;
       }
     }
+
+    .profile-narrow {
+      float: left;
+
+      .avatar {
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        margin: 18px 12px;
+      }
+    }
+
+    .collapse {
+      float: right;
+      margin-top: 24px;
+
+      .do-collapse {
+        color: #606266;
+        padding: 0;
+      }
+
+      .release-collapse {
+        color: #606266;
+        padding: 0;
+      }
+    }
   }
 
   .timeline-menu /deep/ {
@@ -164,5 +212,9 @@ export default {
       font-size: 14px;
     }
   }
+
+  .narrow-menu {
+    width: 76px;
+  }
 }
 </style>

src/renderer/store/TimelineSpace/SideMenu.js

@@ -7,7 +7,8 @@ const SideMenu = {
     unreadNotifications: false,
     unreadLocalTimeline: false,
     lists: [],
-    overrideActivePath: null
+    overrideActivePath: null,
+    collapse: false
   },
   mutations: {
     changeUnreadHomeTimeline (state, value) {
@@ -24,6 +25,9 @@ const SideMenu = {
     },
     updateOverrideActivePath (state, path) {
       state.overrideActivePath = path
+    },
+    changeCollapse (state, collapse) {
+      state.collapse = collapse
     }
   },
   actions: {