2 files changed, 51 insertions, 0 deletions
diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
new file mode 100644
index 00000000..0bf904ba
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -0,0 +1,9 @@
+import { mapGetters } from 'vuex'
+
+const ExtraNotifications = {
+  computed: {
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
+  }
+}
+
+export default ExtraNotifications
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
new file mode 100644
index 00000000..11eeb937
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="ExtraNotifications">
+    <router-link
+      v-if="unreadChatCount"
+      class="button-unstyled -link extra-notification"
+      to="chats"
+    >
+      {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
+    </router-link>
+    <router-link
+      v-if="unreadAnnouncementCount"
+      class="button-unstyled -link extra-notification"
+      to="announcements"
+    >
+      {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
+    </router-link>
+  </div>
+</template>
+
+<script src="./extra_notifications.js" />
+
+<style lang="scss">
+@import "../../variables";
+
+.ExtraNotifications {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  .extra-notification {
+    width: 100%;
+    padding: 1em;
+  }
+
+  .extra-notification {
+    border-bottom: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+}
+</style>