Add timeline menu toggle to nav panel

2 files changed, 79 insertions, 27 deletions

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 81d49cc2..37bcb409 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,4 +1,4 @@
-import { timelineNames } from '../timeline_menu/timeline_menu.js'
+import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -7,10 +7,12 @@ import {
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome,
+  faChevronDown,
+  faChevronUp,
   faComments,
   faBell,
-  faInfoCircle
+  faInfoCircle,
+  faStream
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -18,10 +20,12 @@ library.add(
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome,
+  faChevronDown,
+  faChevronUp,
   faComments,
   faBell,
-  faInfoCircle
+  faInfoCircle,
+  faStream
 )
 
 const NavPanel = {
@@ -30,16 +34,20 @@ const NavPanel = {
       this.$store.dispatch('startFetchingFollowRequests')
     }
   },
+  components: {
+    TimelineMenuContent
+  },
+  data () {
+    return {
+      showTimelines: false
+    }
+  },
+  methods: {
+    toggleTimelines () {
+      this.showTimelines = !this.showTimelines
+    }
+  },
   computed: {
-    onTimelineRoute () {
-      return !!timelineNames()[this.$route.name]
-    },
-    timelinesRoute () {
-      if (this.$store.state.interface.lastTimeline) {
-        return this.$store.state.interface.lastTimeline
-      }
-      return this.currentUser ? 'friends' : 'public-timeline'
-    },
     ...mapState({
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 0c83d0fe..7ae7b1d6 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -3,19 +3,33 @@
     <div class="panel panel-default">
       <ul>
         <li v-if="currentUser || !privateMode">
-          <router-link
-            :to="{ name: timelinesRoute }"
-            :class="onTimelineRoute && 'router-link-active'"
+          <button
+            class="button-unstyled menu-item"
+            @click="toggleTimelines"
           >
             <FAIcon
               fixed-width
               class="fa-scale-110"
-              icon="home"
+              icon="stream"
             />{{ $t("nav.timelines") }}
-          </router-link>
+            <FAIcon
+              class="timelines-chevron"
+              fixed-width
+              :icon="showTimelines ? 'chevron-up' : 'chevron-down'"
+            />
+          </button>
+          <div
+            v-show="showTimelines"
+            class="timelines-background"
+          >
+            <TimelineMenuContent class="timelines" />
+          </div>
         </li>
         <li v-if="currentUser">
-          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110"
@@ -24,7 +38,10 @@
           </router-link>
         </li>
         <li v-if="currentUser && pleromaChatMessagesAvailable">
-          <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
+          >
             <div
               v-if="unreadChatCount"
               class="badge badge-notification"
@@ -39,7 +56,10 @@
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
-          <router-link :to="{ name: 'friend-requests' }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'friend-requests' }"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110"
@@ -54,7 +74,10 @@
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'about' }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'about' }"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110"
@@ -91,14 +114,14 @@
     border-color: var(--border, $fallback--border);
     padding: 0;
 
-    &:first-child a {
+    &:first-child .menu-item {
       border-top-right-radius: $fallback--panelRadius;
       border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
       border-top-left-radius: $fallback--panelRadius;
       border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
     }
 
-    &:last-child a {
+    &:last-child .menu-item {
       border-bottom-right-radius: $fallback--panelRadius;
       border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
       border-bottom-left-radius: $fallback--panelRadius;
@@ -110,13 +133,15 @@
     border: none;
   }
 
-  a {
+  .menu-item {
     display: block;
     box-sizing: border-box;
-    align-items: stretch;
     height: 3.5em;
     line-height: 3.5em;
     padding: 0 1em;
+    width: 100%;
+    color: $fallback--link;
+    color: var(--link, $fallback--link);
 
     &:hover {
       background-color: $fallback--lightBg;
@@ -146,6 +171,25 @@
     }
   }
 
+  .timelines-chevron {
+    margin-left: 0.8em;
+    font-size: 1.1em;
+  }
+
+  .timelines-background {
+    padding: 0 0 0 0.6em;
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    border-top: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+
+  .timelines {
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+  }
+
   .fa-scale-110 {
     margin-right: 0.8em;
   }