refs #116 Create basic side bar

src/renderer/components/GlobalHeader.vue

@@ -91,6 +91,7 @@ p {
 
   .space {
     margin-left: 65px;
+    height: 100%;
   }
 }
 </style>

src/renderer/components/TimelineSpace.vue

@@ -6,7 +6,10 @@
       <header-menu></header-menu>
     </header>
     <div class="content">
-      <router-view></router-view>
+      <div :class="openSideBar? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'">
+        <router-view></router-view>
+      </div>
+      <side-bar></side-bar>
     </div>
   </div>
   <new-toot></new-toot>
@@ -16,15 +19,22 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import SideMenu from './TimelineSpace/SideMenu'
 import HeaderMenu from './TimelineSpace/HeaderMenu'
 import NewToot from './TimelineSpace/Modals/NewToot'
 import JumpModal from './TimelineSpace/JumpModal'
 import ImageViewer from './TimelineSpace/Modals/ImageViewer'
+import SideBar from './TimelineSpace/SideBar'
 
 export default {
   name: 'timeline-space',
-  components: { SideMenu, HeaderMenu, NewToot, JumpModal, ImageViewer },
+  components: { SideMenu, HeaderMenu, NewToot, JumpModal, ImageViewer, SideBar },
+  computed: {
+    ...mapState({
+      openSideBar: state => state.TimelineSpace.SideBar.openSideBar
+    })
+  },
   created () {
     const loading = this.$loading({
       lock: true,
@@ -95,8 +105,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+#timeline_space {
+  height: 100%;
+}
 .page {
   margin-left: 180px;
+  height: 100%;
+  box-sizing: border-box;
 
   .header {
     width: 100%;
@@ -109,7 +124,21 @@ export default {
   }
 
   .content {
-    margin-top: 48px;
+    padding-top: 48px;
+    height: 100%;
+    box-sizing: border-box;
+
+    .timeline-wrapper {
+      height: 100%;
+      width: 100%;
+      overflow: auto;
+    }
+
+    .timeline-wrapper-with-side-bar {
+      height: 100%;
+      width: -webkit-calc(100% - 180px);
+      overflow: auto;
+    }
   }
 }
 

src/renderer/components/TimelineSpace/Cards/Toot.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="toot" tabIndex="0">
     <div class="icon">
-      <img :src="originalMessage(message).account.avatar" />
+      <img :src="originalMessage(message).account.avatar" @click="openUser(originalMessage(message).account)"/>
     </div>
     <div class="detail">
       <div class="toot-header">
-        <div class="user">
+        <div class="user" @click="openUser(originalMessage(message).account)">
           {{ username(originalMessage(message).account) }}
         </div>
         <div class="timestamp">
@@ -130,6 +130,9 @@ export default {
     },
     openImage (url) {
       this.$store.dispatch('TimelineSpace/Modals/ImageViewer/openModal', url)
+    },
+    openUser (account) {
+      console.log(account)
     }
   }
 }

src/renderer/components/TimelineSpace/SideBar.vue

@@ -0,0 +1,35 @@
+<template>
+<div id="side_bar" v-if="openSideBar">
+  <div class="header">
+    <i class="el-icon-close" @click="close"></i>
+  </div>
+  side
+</div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'side-bar',
+  computed: {
+    ...mapState({
+      openSideBar: state => state.TimelineSpace.SideBar.openSideBar
+    })
+  },
+  methods: {
+    close () {
+      this.$store.dispatch('TimelineSpace/SideBar/close')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#side_bar {
+  position: fixed;
+  top: 48px;
+  right: 0;
+  width: 180px;
+}
+</style>

src/renderer/store/TimelineSpace.js

@@ -1,6 +1,7 @@
 import { ipcRenderer } from 'electron'
 import Mastodon from 'mastodon-api'
 import SideMenu from './TimelineSpace/SideMenu'
+import SideBar from './TimelineSpace/SideBar'
 import Home from './TimelineSpace/Home'
 import Notifications from './TimelineSpace/Notifications'
 import Favourites from './TimelineSpace/Favourites'
@@ -15,6 +16,7 @@ const TimelineSpace = {
   namespaced: true,
   modules: {
     SideMenu,
+    SideBar,
     Home,
     Notifications,
     Favourites,

src/renderer/store/TimelineSpace/SideBar.js

@@ -0,0 +1,18 @@
+const SideBar = {
+  namespaced: true,
+  state: {
+    openSideBar: true
+  },
+  mutations: {
+    changeOpenSideBar (state, value) {
+      state.openSideBar = value
+    }
+  },
+  actions: {
+    close ({ commit }) {
+      commit('changeOpenSideBar', false)
+    }
+  }
+}
+
+export default SideBar