Update notifications modal with new component

app/assets/stylesheets/navigation/notifications.scss

@@ -4,14 +4,6 @@
 .sci--navigation--notificaitons-flyout-container {
   position: relative;
 
-  .sci--navigation--notificaitons-flyout-backdrop {
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-  }
-
   .has-unseen {
     &::after {
       align-items: center;
@@ -31,18 +23,13 @@
       white-space: nowrap;
     }
   }
+}
 
   .sci--navigation--notificaitons-flyout {
-    background-color: $color-white;
-    border-radius: 0 0  $border-radius-default $border-radius-default;
-    box-shadow: $flyout-shadow;
     display: flex;
     flex-direction: column;
-    height: calc(100vh - var(--top-navigation-height) - 2em);
+    height: calc(100vh - 8rem);
     padding: 1.5rem;
-    position: absolute;
-    right: 0;
-    top: calc(var(--top-navigation-height) - 1.5rem);
     width: 400px;
 
   .sci--navigation--notificaitons-flyout-title {
@@ -70,6 +57,7 @@
 
   .sci--navigation--notificaitons-flyout-notifications {
     margin-left: -1.5rem;
+    overscroll-behavior: contain;
     padding: 0 1.5rem;
     position: relative;
     width: calc(100% + 3rem);
@@ -126,5 +114,4 @@
       }
     }
   }
-  }
 }

app/javascript/vue/navigation/notifications/notifications_flyout.vue

@@ -5,7 +5,7 @@
       <i class="sn-icon sn-icon-close" @click="$emit('close')"></i>
     </div>
     <hr>
-    <perfect-scrollbar ref="scrollContainer" class="sci--navigation--notificaitons-flyout-notifications">
+    <perfect-scrollbar @wheel="preventPropagation" ref="scrollContainer" class="sci--navigation--notificaitons-flyout-notifications">
       <div class="sci-navigation--notificaitons-flyout-subtitle" v-if="todayNotifications.length">
         {{ i18n.t('nav.notifications.today') }}
       </div>
@@ -73,6 +73,10 @@ export default {
     }
   },
   methods: {
+    preventPropagation(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
     loadNotifications() {
       if (this.nextPageUrl == null || this.loadingPage) return;
 

app/javascript/vue/navigation/top_menu.vue

@@ -20,23 +20,28 @@
       :position="'right'"
       :btnIcon="'sn-icon sn-icon-settings'"
     ></MenuDropdown>
-    <div v-if="user" class="sci--navigation--notificaitons-flyout-container" >
+    <GeneralDropdown
+      v-if="user"
+      ref="notificationDropdown"
+      position="right"
+      class="sci--navigation--notificaitons-flyout-container">
+      <template v-slot:field>
         <button class="btn btn-light icon-btn btn-black"
               :title="i18n.t('nav.notifications.title')"
               :class="{ 'has-unseen': unseenNotificationsCount > 0 }"
               :data-unseen="unseenNotificationsCount"
-              data-toggle="dropdown"
+              data-toggle="dropdown">
-              @click="notificationsOpened = !notificationsOpened">
           <i class="sn-icon sn-icon-notifications"></i>
         </button>
-      <div v-if="notificationsOpened" class="sci--navigation--notificaitons-flyout-backdrop" @click="notificationsOpened = false"></div>
+      </template>
+      <template v-slot:flyout >
         <NotificationsFlyout
-        v-if="notificationsOpened"
           :notificationsUrl="notificationsUrl"
           :unseenNotificationsCount="unseenNotificationsCount"
           @update:unseenNotificationsCount="checkUnseenNotifications()"
-        @close="notificationsOpened = false" />
+          @close="$refs.notificationDropdown.$refs.field.click();"/>
-    </div>
+      </template>
+    </GeneralDropdown>
     <div v-if="user" class="dropdown" :title="i18n.t('nav.user_profile')">
       <div class="sci--navigation--top-menu-user btn btn-light icon-btn btn-black" data-toggle="dropdown">
         <img class="avatar w-6 h-6" :src="user.avatar_url">
@@ -63,6 +68,7 @@ import NotificationsFlyout from './notifications/notifications_flyout.vue';
 import DropdownSelector from '../shared/legacy/dropdown_selector.vue';
 import SelectDropdown from '../shared/select_dropdown.vue';
 import MenuDropdown from '../shared/menu_dropdown.vue';
+import GeneralDropdown from '../shared/general_dropdown.vue';
 
 export default {
   name: 'TopMenuContainer',
@@ -70,7 +76,8 @@ export default {
     DropdownSelector,
     NotificationsFlyout,
     SelectDropdown,
-    MenuDropdown
+    MenuDropdown,
+    GeneralDropdown
   },
   props: {
     url: String,
@@ -88,7 +95,6 @@ export default {
       helpMenu: null,
       settingsMenu: null,
       userMenu: null,
-      notificationsOpened: false,
       unseenNotificationsCount: 0
     };
   },
@@ -119,15 +125,6 @@ export default {
       );
     }
   },
-  watch: {
-    notificationsOpened(newVal) {
-      if (newVal === true) {
-        document.body.style.overflow = 'hidden';
-      } else if (newVal === false) {
-        document.body.style.overflow = 'scroll';
-      }
-    }
-  },
   methods: {
     fetchData() {
       $.get(this.url, (result) => {

app/javascript/vue/shared/general_dropdown.vue

@@ -33,7 +33,8 @@ export default {
     btnText: { type: String, required: false },
     btnIcon: { type: String, required: false },
     caret: { type: Boolean, default: false },
-    alwaysShow: { type: Boolean, default: false }
+    alwaysShow: { type: Boolean, default: false },
+    closeDropdown: { type: Boolean, default: false }
   },
   data() {
     return {