Move chat to sidebar.

src/components/chat_panel/chat_panel.js

@@ -1,4 +1,4 @@
-const chat = {
+const chatPanel = {
   data () {
     return {
       currentMessage: '',
@@ -18,4 +18,4 @@ const chat = {
   }
 }
 
-export default chat
+export default chatPanel

src/components/chat_panel/chat_panel.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="chat-panel panel panel-default">
-    <div class="panel-heading timeline-heading base02-background base04">
-      <div class="title">
-        {{$t('chat.title')}}
+  <div class="chat-panel">
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background base04">
+        <div class="title">
+          {{$t('chat.title')}}
+        </div>
       </div>
-    </div>
-    <div class="panel-body base01-background">
-      <div class="chat-window">
+      <div class="chat-window" v-chat-scroll>
         <div class="chat-message" v-for="message in messages" :key="message.id">
           <span class="chat-avatar">
             <img :src="message.author.avatar" />
@@ -26,12 +26,11 @@
   </div>
 </template>
 
-<script src="./chat.js"></script>
-
+<script src="./chat_panel.js"></script>
 
 <style lang="scss">
  .chat-window {
-   max-height: 80vh;
+   max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
  }

src/components/nav_panel/nav_panel.vue

@@ -7,11 +7,6 @@
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
-        <li v-if='chat && currentUser'>
-          <router-link class="base00-background" to='/chat'>
-            {{ $t("nav.chat") }}
-          </router-link>
-        </li>
         <li v-if='currentUser'>
           <router-link class="base00-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}