Lists implementation

2 files changed, 50 insertions, 0 deletions

diff --git a/src/components/lists_menu/lists_menu_content.js b/src/components/lists_menu/lists_menu_content.js
new file mode 100644
index 00000000..37e7868c
--- /dev/null
+++ b/src/components/lists_menu/lists_menu_content.js
@@ -0,0 +1,33 @@
+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 ListsMenuContent = {
+  created () {
+    this.$store.dispatch('startFetchingLists')
+  },
+  computed: {
+    ...mapState({
+      lists: state => state.lists.allLists,
+      currentUser: state => state.users.currentUser,
+      privateMode: state => state.instance.private,
+      federating: state => state.instance.federating
+    })
+  }
+}
+
+export default ListsMenuContent
diff --git a/src/components/lists_menu/lists_menu_content.vue b/src/components/lists_menu/lists_menu_content.vue
new file mode 100644
index 00000000..5606b74f
--- /dev/null
+++ b/src/components/lists_menu/lists_menu_content.vue
@@ -0,0 +1,17 @@
+<template>
+  <ul>
+    <li
+      v-for="list in lists.slice().reverse()"
+      :key="list.id"
+    >
+      <router-link
+        class="menu-item"
+        :to="{ name: 'list-timeline', params: { id: list.id } }"
+      >
+        {{ list.title }}
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script src="./lists_menu_content.js"></script>