refs #90 Create channel header

src/renderer/components/TimelineSpace.vue

@@ -1,8 +1,13 @@
 <template>
 <div id="timeline_space">
   <side-menu></side-menu>
-  <div class="content">
-    <router-view></router-view>
+  <div class="page">
+    <div class="header">
+      <header-menu></header-menu>
+    </div>
+    <div class="content">
+      <router-view></router-view>
+    </div>
   </div>
   <new-toot-modal></new-toot-modal>
   <jump-modal></jump-modal>
@@ -11,12 +16,13 @@
 
 <script>
 import SideMenu from './TimelineSpace/SideMenu'
+import HeaderMenu from './TimelineSpace/HeaderMenu'
 import NewTootModal from './TimelineSpace/NewTootModal'
 import JumpModal from './TimelineSpace/JumpModal'
 
 export default {
   name: 'timeline-space',
-  components: { SideMenu, NewTootModal, JumpModal },
+  components: { SideMenu, HeaderMenu, NewTootModal, JumpModal },
   created () {
     const loading = this.$loading({
       lock: true,
@@ -87,8 +93,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.content {
+.page {
   margin-left: 180px;
+
+  .header {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 245px;
+    height: 48px;
+    background-color: #ffffff;
+    border-bottom: solid 1px #dcdfe6;
+  }
+
+  .content {
+    margin-top: 60px;
+  }
 }
 
 </style>

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

@@ -139,6 +139,7 @@ function findLink (target) {
 
 .toot {
   padding: 4px 0 0 16px;
+  background-color: #ffffff;
 
   .icon {
     float: left;

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -0,0 +1,21 @@
+<template>
+<div id="header_menu">
+  <div class="channel">#Home</div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'header-menu'
+}
+</script>
+
+<style lang="scss" scoped>
+#header_menu {
+  .channel {
+    padding: 12px 24px;
+    font-weight: bold;
+    font-size: 18px;
+  }
+}
+</style>

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -64,18 +64,18 @@ export default {
     top: 0;
     left: 65px;
     width: 180px;
-    height: 60px;
+    height: 70px;
 
     .profile {
       color: #ffffff;
       font-weight: bold;
-      padding: 10px 20px;
+      padding: 20px 20px 10px;
     }
   }
 
   .timeline-menu {
     position: fixed;
-    top: 60px;
+    top: 70px;
     left: 65px;
     height: 100%;
     width: 180px;