feat: New notification panel for unread notifications (#4061)

Fixes: #4052

app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="notifications-link">
-    <primary-nav-item
-      name="NOTIFICATIONS"
-      icon="alert"
-      :to="`/app/accounts/${accountId}/notifications`"
-      :count="unreadCount"
-    />
+    <woot-button
+      class-names="notifications-link--button"
+      variant="clear"
+      color-scheme="secondary"
+      :class="{ 'is-active': isNotificationPanelActive }"
+      @click="openNotificationPanel"
+    >
+      <fluent-icon icon="alert" />
+      <span v-if="unreadCount" class="badge warning">{{ unreadCount }}</span>
+    </woot-button>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import PrimaryNavItem from './PrimaryNavItem';
 
 export default {
-  components: { PrimaryNavItem },
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
@@ -28,8 +30,17 @@ export default {
         ? `${this.notificationMetadata.unreadCount}`
         : '99+';
     },
+    isNotificationPanelActive() {
+      return this.$route.name === 'notifications_index';
+    },
+  },
+  methods: {
+    openNotificationPanel() {
+      if (this.$route.name !== 'notifications_index') {
+        this.$emit('open-notification-panel');
+      }
+    },
   },
-  methods: {},
 };
 </script>
 
@@ -37,4 +48,32 @@ export default {
 .notifications-link {
   margin-bottom: var(--space-small);
 }
+
+.badge {
+  position: absolute;
+  right: var(--space-minus-smaller);
+  top: var(--space-minus-smaller);
+}
+.notifications-link--button {
+  display: flex;
+  position: relative;
+  border-radius: var(--border-radius-large);
+  border: 1px solid transparent;
+  color: var(--s-600);
+  margin: var(--space-small) 0;
+
+  &:hover {
+    background: var(--w-50);
+    color: var(--s-600);
+  }
+
+  &:focus {
+    border-color: var(--w-500);
+  }
+
+  &.is-active {
+    background: var(--w-50);
+    color: var(--w-500);
+  }
+}
 </style>