Lists implementation

src/components/nav_panel/nav_panel.js

@@ -1,4 +1,5 @@
 import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
+import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -12,7 +13,8 @@ import {
   faComments,
   faBell,
   faInfoCircle,
-  faStream
+  faStream,
+  faList
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -25,7 +27,8 @@ library.add(
   faComments,
   faBell,
   faInfoCircle,
-  faStream
+  faStream,
+  faList
 )
 
 const NavPanel = {
@@ -35,19 +38,27 @@ const NavPanel = {
     }
   },
   components: {
-    TimelineMenuContent
+    TimelineMenuContent,
+    ListsMenuContent
   },
   data () {
     return {
-      showTimelines: false
+      showTimelines: false,
+      showLists: false
     }
   },
   methods: {
     toggleTimelines () {
       this.showTimelines = !this.showTimelines
+    },
+    toggleLists () {
+      this.showLists = !this.showLists
     }
   },
   computed: {
+    listsNavigation () {
+      return this.$store.getters.mergedConfig.listsNavigation
+    },
     ...mapState({
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,

src/components/nav_panel/nav_panel.vue

@@ -25,6 +25,51 @@
             <TimelineMenuContent class="timelines" />
           </div>
         </li>
+        <li v-if="currentUser && listsNavigation">
+          <button
+            class="button-unstyled menu-item"
+            @click="toggleLists"
+          >
+            <router-link
+              :to="{ name: 'lists' }"
+              @click.stop
+            >
+              <FAIcon
+                fixed-width
+                class="fa-scale-110"
+                icon="list"
+              />{{ $t("nav.lists") }}
+            </router-link>
+            <FAIcon
+              class="timelines-chevron"
+              fixed-width
+              :icon="showLists ? 'chevron-up' : 'chevron-down'"
+            />
+          </button>
+          <div
+            v-show="showLists"
+            class="timelines-background"
+          >
+            <ListsMenuContent class="timelines" />
+          </div>
+        </li>
+        <li v-if="currentUser && !listsNavigation">
+          <router-link
+            :to="{ name: 'lists' }"
+            @click.stop
+          >
+            <button
+              class="button-unstyled menu-item"
+              @click="toggleLists"
+            >
+              <FAIcon
+                fixed-width
+                class="fa-scale-110"
+                icon="list"
+              />{{ $t("nav.lists") }}
+            </button>
+          </router-link>
+        </li>
         <li v-if="currentUser">
           <router-link
             class="menu-item"