start working on one tap notifications

src/App.js

@@ -26,6 +26,7 @@ export default {
   },
   data: () => ({
     mobileActivePanel: 'timeline',
+    notificationsOpen: false,
     finderHidden: true,
     supportsMask: window.CSS && window.CSS.supports && (
       window.CSS.supports('mask-size', 'contain') ||
@@ -101,6 +102,9 @@ export default {
     },
     toggleMobileSidebar () {
       this.$refs.sideDrawer.toggleDrawer()
+    },
+    toggleMobileNotifications () {
+      this.notificationsOpen = !this.notificationsOpen
     }
   }
 }

src/App.scss

@@ -661,6 +661,28 @@ nav {
   border-radius: var(--inputRadius, $fallback--inputRadius);
 }
 
+.mobile-notifications {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 50px;
+  left: 0;
+  z-index: 1001;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  transition-property: transform;
+  transition-duration: 0.35s;
+  transform: translate(0);
+
+  .notifications {
+    padding: 0;
+  }
+
+  &.closed {
+    transform: translate(100%);
+  }
+}
+
 @keyframes shakeError {
   0% {
     transform: translateX(0);
@@ -723,7 +745,7 @@ nav {
 
 .login-hint {
   text-align: center;
-  
+
   @media all and (min-width: 801px) {
     display: none;
   }

src/App.vue

@@ -10,7 +10,6 @@
         <div class='item'>
           <a href="#" class="menu-button" @click.stop.prevent="toggleMobileSidebar()">
             <i class="button-icon icon-menu"></i>
-            <div class="alert-dot" v-if="unseenNotificationsCount"></div>
           </a>
           <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
         </div>
@@ -18,11 +17,18 @@
           <user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder>
           <router-link class="mobile-hidden" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
           <a href="#" class="mobile-hidden" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
+          <a href="#" class="menu-button" @click.stop.prevent="toggleMobileNotifications()">
+            <i class="button-icon icon-bell-alt"></i>
+            <div class="alert-dot" v-if="unseenNotificationsCount"></div>
+          </a>
         </div>
       </div>
     </nav>
     <div v-if="" class="container" id="content">
       <side-drawer ref="sideDrawer" :logout="logout"></side-drawer>
+      <div class="mobile-notifications" :class="{ 'closed': !notificationsOpen }">
+        <notifications/>
+      </div>
       <div class="sidebar-flexer mobile-hidden">
         <div class="sidebar-bounds">
           <div class="sidebar-scroller">