Move Menu and button to NotificationList.vue component

aleksis/core/assets/components/notifications/NotificationList.vue

@@ -3,17 +3,29 @@
     :query="require('./myNotifications.graphql')"
     :poll-interval="1000"
   >
-    <template #default="{ result: { error, data }, isLoading }">
-      <v-list two-line v-if="data && data.myNotifications.notifications.length">
-        <NotificationItem
-          v-for="notification in data.myNotifications.notifications"
-          :key="notification.id"
-          :notification="notification"
-        />
-      </v-list>
-      <p v-else>
-        {{ $root.django.gettext("No notifications available yet.") }}
-      </p>
+    <template #default="{ result: { error, data, loading } }">
+      <v-menu offset-y :close-on-content-click="false" max-width="min-content">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn icon color="primary" v-bind="attrs" v-on="on" :loading="loading">
+            <v-icon color="white" v-if="data && data.myNotifications.unreadNotificationsCount > 0">mdi-bell-badge-outline</v-icon>
+            <v-icon color="white" v-else>mdi-bell-outline</v-icon>
+          </v-btn>
+        </template>
+        <v-list nav three-line dense v-if="data && data.myNotifications && data.myNotifications.notifications.length">
+          <template v-for="notification in data.myNotifications.notifications">
+            <NotificationItem
+                :key="notification.id"
+                :notification="notification"
+            />
+            <v-divider
+                v-if="notification !== data.myNotifications.notifications[data.myNotifications.notifications.length - 1]"
+            ></v-divider>
+          </template>
+        </v-list>
+        <p v-else>
+          {{ $t("notifications.no_notifications") }}
+        </p>
+      </v-menu>
     </template>
   </ApolloQuery>
 </template>

aleksis/core/assets/components/notifications/myNotifications.graphql

 {
   myNotifications: whoAmI {
+    unreadNotificationsCount
     notifications {
       id
       title