ability to pin items in navigation menu, initial draft version

src/components/timeline_menu/timeline_menu.vue

@@ -10,7 +10,7 @@
     @close="() => isOpen = false"
   >
     <template #content>
-      <TimelineMenuContent />
+      <TimelineMenuContent :content="timelinesList" />
     </template>
     <template #trigger>
       <span class="button-unstyled title timeline-menu-title">

src/components/timeline_menu/timeline_menu_content.js

@@ -17,12 +17,35 @@ library.add(
 )
 
 const TimelineMenuContent = {
+  props: ['content'],
+  methods: {
+    isPinned (item) {
+      return this.pinnedItems.has(item)
+    },
+    togglePin (item) {
+      if (this.isPinned(item)) {
+        this.$store.commit('removeCollectionPreference', { path: 'collections.pinnedNavItems', value: item })
+      } else {
+        this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value: item })
+      }
+    }
+  },
   computed: {
     ...mapState({
       currentUser: state => state.users.currentUser,
       privateMode: state => state.instance.private,
-      federating: state => state.instance.federating
-    })
+      federating: state => state.instance.federating,
+      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
+    }),
+    list () {
+      return (this.content || []).filter(({ criteria, anon, anonRoute }) => {
+        const set = new Set(criteria || [])
+        if (!this.federating && set.has('federating')) return false
+        if (this.private && set.has('!private')) return false
+        if (!this.currentUser && !(anon || anonRoute)) return false
+        return true
+      })
+    }
   }
 }
 

src/components/timeline_menu/timeline_menu_content.vue

@@ -1,63 +1,28 @@
 <template>
   <ul>
-    <li v-if="currentUser">
+    <li v-for="item in list" :key="item.name">
       <router-link
         class="menu-item"
-        :to="{ name: 'friends' }"
+        :to="{ name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
       >
         <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") }}
+          :icon="item.icon"
+        />{{ $t(item.label) }}
+        <button
+          type="button"
+          class="button-unstyled"
+          @click.stop.prevent="togglePin(item.name)"
+          >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding "
+            :class="{ 'veryfaint': !isPinned(item.name) }"
+            :transform="!isPinned(item.name) ? 'rotate-45' : ''"
+            icon="thumbtack"
+          />
+        </button>
       </router-link>
     </li>
   </ul>