5 files changed, 30 insertions, 23 deletions
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index 7f096316..face430e 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -80,3 +80,21 @@ export const ROOT_ITEMS = {
     criteria: ['announcements']
   }
 }
+
+export function routeTo (item, currentUser) {
+  if (!item.route && !item.routeObject) return null
+
+  let route
+
+  if (item.routeObject) {
+    route = item.routeObject
+  } else {
+    route = { name: (item.anon || currentUser) ? item.route : item.anonRoute }
+  }
+
+  if (USERNAME_ROUTES.has(route.name)) {
+    route.params = { username: currentUser.screen_name, name: currentUser.screen_name }
+  }
+
+  return route
+}
diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
index 81cc936a..22ed77d9 100644
--- a/src/components/navigation/navigation_entry.js
+++ b/src/components/navigation/navigation_entry.js
@@ -1,5 +1,5 @@
 import { mapState } from 'vuex'
-import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
+import { routeTo } from 'src/components/navigation/navigation.js'
 import OptionalRouterLink from 'src/components/optional_router_link/optional_router_link.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
@@ -26,17 +26,7 @@ const NavigationEntry = {
   },
   computed: {
     routeTo () {
-      if (!this.item.route && !this.item.routeObject) return null
-      let route
-      if (this.item.routeObject) {
-        route = this.item.routeObject
-      } else {
-        route = { name: (this.item.anon || this.currentUser) ? this.item.route : this.item.anonRoute }
-      }
-      if (USERNAME_ROUTES.has(route.name)) {
-        route.params = { username: this.currentUser.screen_name, name: this.currentUser.screen_name }
-      }
-      return route
+      return routeTo(this.item, this.currentUser)
     },
     getters () {
       return this.$store.getters
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index f4d53836..411ca536 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -63,7 +63,7 @@
 <script src="./navigation_entry.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .NavigationEntry {
   display: flex;
@@ -102,6 +102,7 @@
     background-color: var(--selectedMenu, $fallback--lightBg);
     color: $fallback--link;
     color: var(--selectedMenuText, $fallback--link);
+
     --faint: var(--selectedMenuFaintText, $fallback--faint);
     --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
     --lightText: var(--selectedMenuLightText, $fallback--lightText);
@@ -117,6 +118,7 @@
     background-color: var(--selectedMenu, $fallback--lightBg);
     color: $fallback--text;
     color: var(--selectedMenuText, $fallback--text);
+
     --faint: var(--selectedMenuFaintText, $fallback--faint);
     --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
     --lightText: var(--selectedMenuLightText, $fallback--lightText);
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
index 9dd795aa..86c33d1f 100644
--- a/src/components/navigation/navigation_pins.js
+++ b/src/components/navigation/navigation_pins.js
@@ -1,5 +1,5 @@
 import { mapState } from 'vuex'
-import { TIMELINES, ROOT_ITEMS, USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
+import { TIMELINES, ROOT_ITEMS, routeTo } from 'src/components/navigation/navigation.js'
 import { getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -31,14 +31,7 @@ const NavPanel = {
   props: ['limit'],
   methods: {
     getRouteTo (item) {
-      if (item.routeObject) {
-        return item.routeObject
-      }
-      const route = { name: (item.anon || this.currentUser) ? item.route : item.anonRoute }
-      if (USERNAME_ROUTES.has(route.name)) {
-        route.params = { username: this.currentUser.screen_name }
-      }
-      return route
+      return routeTo(item, this.currentUser)
     }
   },
   computed: {
@@ -52,6 +45,7 @@ const NavPanel = {
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating,
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
+      supportsAnnouncements: state => state.announcements.supportsAnnouncements,
       pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
     }),
     pinnedList () {
@@ -63,6 +57,7 @@ const NavPanel = {
         ],
         {
           hasChats: this.pleromaChatMessagesAvailable,
+          hasAnnouncements: this.supportsAnnouncements,
           isFederating: this.federating,
           isPrivate: this.privateMode,
           currentUser: this.currentUser
@@ -82,6 +77,7 @@ const NavPanel = {
         ],
         {
           hasChats: this.pleromaChatMessagesAvailable,
+          hasAnnouncements: this.supportsAnnouncements,
           isFederating: this.federating,
           isPrivate: this.privateMode,
           currentUser: this.currentUser
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 6a9ed6f5..4fbb4f95 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -27,7 +27,8 @@
 <script src="./navigation_pins.js"></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
+
 .NavigationPins {
   display: flex;
   flex-wrap: wrap;