Create global header design

src/renderer/components/GlobalHeader.vue

@@ -0,0 +1,64 @@
+<template>
+  <div id="global_header">
+    <el-menu
+      :default-active="defaultActive"
+      class="el-menu-vertical"
+      @open="instanceSelected"
+      @close="instanceClosed"
+      :collapse="isCollapse"
+      background-color="#545c64"
+      text-color="#909399"
+      active-text-color="#ffffff">
+      <el-menu-item index="1">
+        <i class="el-icon-menu"></i>
+        <span slot="title">First server</span>
+      </el-menu-item>
+    </el-menu>
+    <div class="content">
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'global-header',
+  data () {
+    return {
+      isCollapse: true,
+      defaultActive: '1'
+    }
+  },
+  created () {
+  },
+  methods: {
+    instanceSelected (key, keyPath) {
+      console.log(key, keyPath)
+    },
+    instanceClosed (key, keyPath) {
+      console.log(key, keyPath)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+html, body, #app, #global_header {
+  height: 100%;
+  margin: 0;
+}
+
+#global_header {
+  .el-menu {
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 65px;
+  }
+
+  .content {
+    margin-left: 65px;
+  }
+}
+</style>

src/renderer/components/Login.vue

@@ -16,9 +16,8 @@ export default {
         })
       })
       .then(() => {
-        // TODO: redirect to home timeline
-        console.log('ok')
-        this.$router.push({ path: '/timelinespace' })
+        // redirect to home timeline
+        this.$router.push({ path: '/' })
       })
   },
   methods: {

src/renderer/router/index.js

@@ -7,23 +7,25 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'landing-page',
-      component: require('@/components/LandingPage').default
-    },
-    {
-      path: '/login',
-      name: 'login',
-      component: require('@/components/Login').default
-    },
-    {
-      path: '/authorize',
-      name: 'authorize',
-      component: require('@/components/Authorize').default
-    },
-    {
-      path: '/timelinespace',
-      name: 'timeline-space',
-      component: require('@/components/TimelineSpace').default
+      name: 'global-header',
+      component: require('@/components/GlobalHeader').default,
+      children: [
+        {
+          path: '',
+          name: 'timeline-space',
+          component: require('@/components/TimelineSpace').default
+        },
+        {
+          path: 'login',
+          name: 'login',
+          component: require('@/components/Login').default
+        },
+        {
+          path: 'authorize',
+          name: 'authorize',
+          component: require('@/components/Authorize').default
+        }
+      ]
     },
     {
       path: '*',

src/renderer/store/GlobalHeader.js

@@ -0,0 +1,10 @@
+const GlobalHeader = {
+  namespaced: true,
+  state: {
+    instances: []
+  },
+  mutations: {},
+  actions: {}
+}
+
+export default GlobalHeader

src/renderer/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import createLogger from 'vuex/dist/logger'
 
+import GlobalHeader from './GlobalHeader'
 import Login from './Login'
 import Authorize from './Authorize'
 import TimelineSpace from './TimelineSpace'
@@ -14,6 +15,7 @@ export default new Vuex.Store({
     ? [createLogger()]
     : [],
   modules: {
+    GlobalHeader,
     Login,
     Authorize,
     TimelineSpace