Correctly integrate notifications with new SPA

aleksis/core/assets/App.vue

@@ -27,9 +27,9 @@
               v-model="openMenuItems[menuItem.name]"
             >
               <template #activator>
-                <v-list-item-title>{{
-                  $t(menuItem.titleKey)
-                }}</v-list-item-title>
+                <v-list-item-title
+                  >{{ $t(menuItem.titleKey) }}
+                </v-list-item-title>
               </template>
               <v-list-item
                 v-for="subMenuItem in menuItem.subMenu"
@@ -38,13 +38,13 @@
                 :key="subMenuItem.name"
               >
                 <v-list-item-icon>
-                  <v-icon v-if="subMenuItem.icon">{{
-                    subMenuItem.icon
-                  }}</v-icon>
+                  <v-icon v-if="subMenuItem.icon"
+                    >{{ subMenuItem.icon }}
+                  </v-icon>
                 </v-list-item-icon>
-                <v-list-item-title>{{
-                  $t(subMenuItem.titleKey)
-                }}</v-list-item-title>
+                <v-list-item-title
+                  >{{ $t(subMenuItem.titleKey) }}
+                </v-list-item-title>
               </v-list-item>
             </v-list-group>
             <v-list-item
@@ -76,21 +76,8 @@
 
         <v-spacer></v-spacer>
         <language-form></language-form>
-        <div v-if="currentUser.isAuthenticated">
-          <v-menu offset-y>
-            <template #activator="{ on, attrs }">
-              <v-btn depressed color="primary" v-bind="attrs" v-on="on">
-                <v-icon color="white">
-                  {{
-                    whoAmI.unreadNotificationsCount > 0
-                      ? "mdi-bell-badge-outline"
-                      : "mdi-bell-outline"
-                  }}
-                </v-icon>
-              </v-btn>
-            </template>
-            <notification-list />
-          </v-menu>
+        <div v-if="currentUser.isAuthenticated" class="d-flex">
+          <notification-list></notification-list>
           <v-menu offset-y>
             <template #activator="{ on, attrs }">
               <v-avatar v-bind="attrs" v-on="on">
@@ -125,9 +112,9 @@
                   <v-list-item-icon>
                     <v-icon v-if="menuItem.icon">{{ menuItem.icon }}</v-icon>
                   </v-list-item-icon>
-                  <v-list-item-title>{{
-                    $t(menuItem.titleKey)
-                  }}</v-list-item-title>
+                  <v-list-item-title
+                    >{{ $t(menuItem.titleKey) }}
+                  </v-list-item-title>
                 </v-list-item>
               </div>
             </v-list>

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

@@ -18,6 +18,7 @@
             v-bind="attrs"
             v-on="on"
             :loading="loading"
+            class="mx-2"
           >
             <v-icon
               color="white"