2 files changed, 64 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..a79aa636
--- /dev/null
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -0,0 +1,35 @@
+import SideDrawer from '../side_drawer/side_drawer.vue'
+import Notifications from '../notifications/notifications.vue'
+import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
+
+const MobileNav = {
+  components: {
+    SideDrawer,
+    Notifications
+  },
+  data: () => ({
+    notificationsOpen: false
+  }),
+  computed: {
+    unseenNotifications () {
+      return unseenNotificationsFromStore(this.$store)
+    },
+    unseenNotificationsCount () {
+      return this.unseenNotifications.length
+    },
+    sitename () { return this.$store.state.instance.name }
+  },
+  methods: {
+    toggleMobileSidebar () {
+      this.$refs.sideDrawer.toggleDrawer()
+    },
+    toggleMobileNotifications () {
+      this.notificationsOpen = !this.notificationsOpen
+    },
+    scrollToTop () {
+      window.scrollTo(0, 0)
+    }
+  }
+}
+
+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..8f682c39
--- /dev/null
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -0,0 +1,29 @@
+<template>
+  <nav class='nav-bar container' @click="scrollToTop()" id="nav">
+    <div class='inner-nav'>
+      <div class='item'>
+        <a href="#" class="menu-button" @click.stop.prevent="toggleMobileSidebar()">
+          <i class="button-icon icon-menu"></i>
+        </a>
+        <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
+      </div>
+      <div class='item right'>
+        <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>
+    <SideDrawer ref="sideDrawer" :logout="logout"/>
+    <div class="mobile-notifications" :class="{ 'closed': !notificationsOpen }">
+      <Notifications/>
+    </div>
+  </nav>
+</template>
+
+<script src="./mobile_nav.js"></script>
+
+<style lang="scss">
+
+
+</style>