Add timeline menu toggle to nav panel

4 files changed, 101 insertions, 73 deletions

diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 8d6a58b1..bab51e75 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -1,29 +1,17 @@
 import Popover from '../popover/popover.vue'
-import { mapState } from 'vuex'
+import TimelineMenuContent from './timeline_menu_content.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome,
   faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome,
-  faChevronDown
-)
+library.add(faChevronDown)
 
 // Route -> i18n key mapping, exported and not in the computed
 // because nav panel benefits from the same information.
 export const timelineNames = () => {
   return {
-    'friends': 'nav.timeline',
+    'friends': 'nav.home_timeline',
     'bookmarks': 'nav.bookmarks',
     'dms': 'nav.dms',
     'public-timeline': 'nav.public_tl',
@@ -33,7 +21,8 @@ export const timelineNames = () => {
 
 const TimelineMenu = {
   components: {
-    Popover
+    Popover,
+    TimelineMenuContent
   },
   data () {
     return {
@@ -41,9 +30,6 @@ const TimelineMenu = {
     }
   },
   created () {
-    if (this.currentUser && this.currentUser.locked) {
-      this.$store.dispatch('startFetchingFollowRequests')
-    }
     if (timelineNames()[this.$route.name]) {
       this.$store.dispatch('setLastTimeline', this.$route.name)
     }
@@ -75,13 +61,6 @@ const TimelineMenu = {
       const i18nkey = timelineNames()[this.$route.name]
       return i18nkey ? this.$t(i18nkey) : route
     }
-  },
-  computed: {
-    ...mapState({
-      currentUser: state => state.users.currentUser,
-      privateMode: state => state.instance.private,
-      federating: state => state.instance.federating
-    })
   }
 }
 
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 3c86842b..22dc3432 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -13,53 +13,7 @@
       slot="content"
       class="timeline-menu-popover panel panel-default"
     >
-      <ul>
-        <li v-if="currentUser">
-          <router-link :to="{ name: 'friends' }">
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              icon="home"
-            />{{ $t("nav.timeline") }}
-          </router-link>
-        </li>
-        <li v-if="currentUser">
-          <router-link :to="{ name: 'bookmarks'}">
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              icon="bookmark"
-            />{{ $t("nav.bookmarks") }}
-          </router-link>
-        </li>
-        <li v-if="currentUser">
-          <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              icon="envelope"
-            />{{ $t("nav.dms") }}
-          </router-link>
-        </li>
-        <li v-if="currentUser || !privateMode">
-          <router-link :to="{ name: 'public-timeline' }">
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              icon="users"
-            />{{ $t("nav.public_tl") }}
-          </router-link>
-        </li>
-        <li v-if="federating && (currentUser || !privateMode)">
-          <router-link :to="{ name: 'public-external-timeline' }">
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              icon="globe"
-            />{{ $t("nav.twkn") }}
-          </router-link>
-        </li>
-      </ul>
+      <TimelineMenuContent />
     </div>
     <div
       slot="trigger"
diff --git a/src/components/timeline_menu/timeline_menu_content.js b/src/components/timeline_menu/timeline_menu_content.js
new file mode 100644
index 00000000..671570dd
--- /dev/null
+++ b/src/components/timeline_menu/timeline_menu_content.js
@@ -0,0 +1,29 @@
+import { mapState } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUsers,
+  faGlobe,
+  faBookmark,
+  faEnvelope,
+  faHome
+)
+
+const TimelineMenuContent = {
+  computed: {
+    ...mapState({
+      currentUser: state => state.users.currentUser,
+      privateMode: state => state.instance.private,
+      federating: state => state.instance.federating
+    })
+  }
+}
+
+export default TimelineMenuContent
diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
new file mode 100644
index 00000000..bed1b679
--- /dev/null
+++ b/src/components/timeline_menu/timeline_menu_content.vue
@@ -0,0 +1,66 @@
+<template>
+  <ul>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'friends' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="home"
+        />{{ $t("nav.home_timeline") }}
+      </router-link>
+    </li>
+    <li v-if="currentUser || !privateMode">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'public-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="users"
+        />{{ $t("nav.public_tl") }}
+      </router-link>
+    </li>
+    <li v-if="federating && (currentUser || !privateMode)">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'public-external-timeline' }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="globe"
+        />{{ $t("nav.twkn") }}
+      </router-link>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'bookmarks'}"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="bookmark"
+        />{{ $t("nav.bookmarks") }}
+      </router-link>
+    </li>
+    <li v-if="currentUser">
+      <router-link
+        class="menu-item"
+        :to="{ name: 'dms', params: { username: currentUser.screen_name } }"
+      >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding "
+          icon="envelope"
+        />{{ $t("nav.dms") }}
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script src="./timeline_menu_content.js" ></script>