2 files changed, 260 insertions, 0 deletions
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
new file mode 100644
index 00000000..c2bb76ee
--- /dev/null
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -0,0 +1,80 @@
+import SideDrawer from '../side_drawer/side_drawer.vue'
+import Notifications from '../notifications/notifications.vue'
+import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
+import GestureService from '../../services/gesture_service/gesture_service'
+
+const MobileNav = {
+  components: {
+    SideDrawer,
+    Notifications
+  },
+  data: () => ({
+    notificationsCloseGesture: undefined,
+    notificationsOpen: false
+  }),
+  created () {
+    this.notificationsCloseGesture = GestureService.swipeGesture(
+      GestureService.DIRECTION_RIGHT,
+      this.closeMobileNotifications,
+      50
+    )
+  },
+  computed: {
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    unseenNotifications () {
+      return unseenNotificationsFromStore(this.$store)
+    },
+    unseenNotificationsCount () {
+      return this.unseenNotifications.length
+    },
+    sitename () { return this.$store.state.instance.name }
+  },
+  methods: {
+    toggleMobileSidebar () {
+      this.$refs.sideDrawer.toggleDrawer()
+    },
+    openMobileNotifications () {
+      this.notificationsOpen = true
+    },
+    closeMobileNotifications () {
+      if (this.notificationsOpen) {
+        // make sure to mark notifs seen only when the notifs were open and not
+        // from close-calls.
+        this.notificationsOpen = false
+        this.markNotificationsAsSeen()
+      }
+    },
+    notificationsTouchStart (e) {
+      GestureService.beginSwipe(e, this.notificationsCloseGesture)
+    },
+    notificationsTouchMove (e) {
+      GestureService.updateSwipe(e, this.notificationsCloseGesture)
+    },
+    scrollToTop () {
+      window.scrollTo(0, 0)
+    },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('logout')
+    },
+    markNotificationsAsSeen () {
+      this.$refs.notifications.markAsSeen()
+    },
+    onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
+      if (this.$store.state.config.autoLoad && scrollTop + clientHeight >= scrollHeight) {
+        this.$refs.notifications.fetchOlderNotifications()
+      }
+    }
+  },
+  watch: {
+    $route () {
+      // handles closing notificaitons when you press any router-link on the
+      // notifications.
+      this.closeMobileNotifications()
+    }
+  }
+}
+
+export default MobileNav
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
new file mode 100644
index 00000000..d1c24e56
--- /dev/null
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <nav
+      id="nav"
+      class="nav-bar container"
+    >
+      <div
+        class="mobile-inner-nav"
+        @click="scrollToTop()"
+      >
+        <div class="item">
+          <a
+            href="#"
+            class="mobile-nav-button"
+            @click.stop.prevent="toggleMobileSidebar()"
+          >
+            <i class="button-icon icon-menu" />
+          </a>
+          <router-link
+            class="site-name"
+            :to="{ name: 'root' }"
+            active-class="home"
+          >
+            {{ sitename }}
+          </router-link>
+        </div>
+        <div class="item right">
+          <a
+            v-if="currentUser"
+            class="mobile-nav-button"
+            href="#"
+            @click.stop.prevent="openMobileNotifications()"
+          >
+            <i class="button-icon icon-bell-alt" />
+            <div
+              v-if="unseenNotificationsCount"
+              class="alert-dot"
+            />
+          </a>
+        </div>
+      </div>
+    </nav>
+    <div
+      v-if="currentUser"
+      class="mobile-notifications-drawer"
+      :class="{ 'closed': !notificationsOpen }"
+      @touchstart.stop="notificationsTouchStart"
+      @touchmove.stop="notificationsTouchMove"
+    >
+      <div class="mobile-notifications-header">
+        <span class="title">{{ $t('notifications.notifications') }}</span>
+        <a
+          class="mobile-nav-button"
+          @click.stop.prevent="closeMobileNotifications()"
+        >
+          <i class="button-icon icon-cancel" />
+        </a>
+      </div>
+      <div
+        class="mobile-notifications"
+        @scroll="onScroll"
+      >
+        <Notifications
+          ref="notifications"
+          :no-heading="true"
+        />
+      </div>
+    </div>
+    <SideDrawer
+      ref="sideDrawer"
+      :logout="logout"
+    />
+  </div>
+</template>
+
+<script src="./mobile_nav.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.mobile-inner-nav {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.mobile-nav-button {
+  display: flex;
+  justify-content: center;
+  width: 50px;
+  position: relative;
+  cursor: pointer;
+}
+
+.alert-dot {
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  position: absolute;
+  left: calc(50% - 4px);
+  top: calc(50% - 4px);
+  margin-left: 6px;
+  margin-top: -6px;
+  background-color: $fallback--cRed;
+  background-color: var(--badgeNotification, $fallback--cRed);
+}
+
+.mobile-notifications-drawer {
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  box-shadow: var(--panelShadow);
+  transition-property: transform;
+  transition-duration: 0.25s;
+  transform: translateX(0);
+  z-index: 1001;
+  -webkit-overflow-scrolling: touch;
+
+  &.closed {
+    transform: translateX(100%);
+  }
+}
+
+.mobile-notifications-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  position: absolute;
+  color: var(--topBarText);
+  background-color: $fallback--fg;
+  background-color: var(--topBar, $fallback--fg);
+  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+  box-shadow: var(--topBarShadow);
+
+  .title {
+    font-size: 1.3em;
+    margin-left: 0.6em;
+  }
+}
+
+.mobile-notifications {
+  margin-top: 50px;
+  width: 100vw;
+  height: calc(100vh - 50px);
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+
+  .notifications {
+    padding: 0;
+    border-radius: 0;
+    box-shadow: none;
+    .panel {
+      border-radius: 0;
+      margin: 0;
+      box-shadow: none;
+    }
+    .panel:after {
+      border-radius: 0;
+    }
+    .panel .panel-heading {
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+</style>