Add styling

- to link in NotificationMenu
- make table more mobile responsive
- remove unneccessary props

Co-authored-by: Alina Beck <alina.beck@mail.com>

webapp/components/AvatarMenu/AvatarMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <dropdown class="avatar-menu" offset="8">
+  <dropdown class="avatar-menu" offset="8" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
       <a
         class="avatar-menu-trigger"
@@ -58,7 +58,6 @@ export default {
   },
   props: {
     placement: { type: String, default: 'top-end' },
-    user: { type: Object, default: null },
   },
   computed: {
     ...mapGetters({
@@ -73,7 +72,7 @@ export default {
       let routes = [
         {
           name: this.$t('profile.name'),
-          path: `/profile/${this.user.slug}`,
+          path: `/profile/${this.user.id}/${this.user.slug}`,
           icon: 'user',
         },
         {

webapp/components/NotificationMenu/NotificationMenu.vue

@@ -2,21 +2,21 @@
   <ds-button v-if="!notificationsCount" class="notifications-menu" disabled icon="bell">
     {{ unreadNotificationsCount }}
   </ds-button>
-  <dropdown v-else class="notifications-menu" :placement="placement">
+  <dropdown v-else class="notifications-menu" offset="8" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
       <ds-button :primary="!!unreadNotificationsCount" icon="bell" @click.prevent="toggleMenu">
         {{ unreadNotificationsCount }}
       </ds-button>
     </template>
     <template slot="popover">
-      <ds-space centered>
-        <ds-button primary fullwidth :path="{ name: 'notifications' }">
-          {{ $t('notifications.pageLink') }}
-        </ds-button>
-      </ds-space>
       <div class="notifications-menu-popover">
         <notification-list :notifications="displayedNotifications" @markAsRead="markAsRead" />
       </div>
+      <div class="notifications-link-container">
+        <nuxt-link :to="{ name: 'notifications' }">
+          {{ $t('notifications.pageLink') }}
+        </nuxt-link>
+      </div>
     </template>
   </dropdown>
 </template>
@@ -121,14 +121,16 @@ export default {
 
 .notifications-menu-popover {
   max-width: 500px;
+  margin-bottom: $size-height-base;
 }
-.link-bg {
-  position: sticky;
-  width: 100%;
-  background-color: $background-color-primary-active;
+.notifications-link-container {
+  background-color: $background-color-softer-active;
   text-align: center;
-}
-.notifications-link {
-  color: $text-color-softer;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: $size-height-base;
+  padding: $space-x-small;
 }
 </style>

webapp/layouts/default.vue

@@ -71,7 +71,7 @@
                     <notification-menu placement="top" />
                   </client-only>
                   <client-only>
-                    <avatar-menu placement="top" :user="user" />
+                    <avatar-menu placement="top" />
                   </client-only>
                 </template>
               </div>

webapp/pages/notifications/index.vue

@@ -135,7 +135,7 @@ export default {
         },
         user: {
           label: this.$t('notifications.user'),
-          width: '350px',
+          width: '33.333%',
         },
         post: this.$t('notifications.post'),
         content: this.$t('notifications.content'),