fix notifications div scrolling issue on mobile

src/components/mobile_nav/mobile_nav.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <nav class='nav-bar container' id="nav">
       <div class='mobile-inner-nav' @click="scrollToTop()">
         <div class='item'>
@@ -14,12 +15,12 @@
           </a>
         </div>
       </div>
-    <SideDrawer ref="sideDrawer" :logout="logout"/>
+    </nav>
     <div v-if="currentUser"
       class="mobile-notifications-drawer"
       :class="{ 'closed': !notificationsOpen }"
-      @touchstart="notificationsTouchStart"
-      @touchmove="notificationsTouchMove"
+      @touchstart.stop="notificationsTouchStart"
+      @touchmove.stop="notificationsTouchMove"
     >
       <div class="mobile-notifications-header">
         <span class="title">{{$t('notifications.notifications')}}</span>
@@ -31,8 +32,9 @@
         <Notifications ref="notifications" noHeading="true"/>
       </div>
     </div>
+    <SideDrawer ref="sideDrawer" :logout="logout"/>
     <MobilePostStatusModal />
-  </nav>
+  </div>
 </template>
 
 <script src="./mobile_nav.js"></script>
@@ -79,6 +81,8 @@
   transition-property: transform;
   transition-duration: 0.25s;
   transform: translateX(0);
+  z-index: 1001;
+  -webkit-overflow-scrolling: touch;
 
   &.closed {
     transform: translateX(100%);