nx: add mobile nav

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/App.vue

@@ -38,6 +38,8 @@
       >
         <router-view />
       </div>
+
+      <MobileNav />
     </NcAppContent>
 
     <Settings :open.sync="settingsOpen" />
@@ -71,6 +73,7 @@ import Sidebar from './components/Sidebar.vue';
 import EditMetadataModal from './components/modal/EditMetadataModal.vue';
 import NodeShareModal from './components/modal/NodeShareModal.vue';
 import ShareModal from './components/modal/ShareModal.vue';
+import MobileNav from './components/MobileNav.vue';
 
 import ImageMultiple from 'vue-material-design-icons/ImageMultiple.vue';
 import FolderIcon from 'vue-material-design-icons/Folder.vue';
@@ -107,6 +110,7 @@ export default defineComponent({
     EditMetadataModal,
     NodeShareModal,
     ShareModal,
+    MobileNav,
 
     ImageMultiple,
     FolderIcon,

src/components/MobileNav.vue

@@ -0,0 +1,75 @@
+<template>
+  <div id="mobile-nav">
+    <router-link to="/">
+      <ImageMultipleIcon />
+      {{ t('memories', 'Photos') }}
+    </router-link>
+
+    <router-link to="/explore">
+      <SearchIcon />
+      {{ t('memories', 'Explore') }}
+    </router-link>
+
+    <router-link to="/albums">
+      <AlbumIcon />
+      {{ t('memories', 'Albums') }}
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import ImageMultipleIcon from 'vue-material-design-icons/ImageMultiple.vue';
+import SearchIcon from 'vue-material-design-icons/Magnify.vue';
+import AlbumIcon from 'vue-material-design-icons/ImageAlbum.vue';
+
+export default defineComponent({
+  name: 'MobileNav',
+
+  components: {
+    ImageMultipleIcon,
+    SearchIcon,
+    AlbumIcon,
+  },
+});
+</script>
+
+<style lang="scss">
+// Show correct nav depending on screen size
+#mobile-nav {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  #app-navigation-vue {
+    display: none;
+  }
+
+  #mobile-nav {
+    display: flex;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+#mobile-nav {
+  background-color: var(--color-main-background);
+  position: fixed;
+  z-index: 1000;
+  bottom: 0;
+  width: 100%;
+  height: 64px;
+  text-align: center;
+  padding: 8px;
+
+  :deep a {
+    flex: 1 1 0px;
+    opacity: 0.75;
+
+    &.router-link-exact-active {
+      opacity: 1;
+    }
+  }
+}
+</style>

src/components/Timeline.vue

@@ -25,7 +25,7 @@
       <template #before>
         <!-- Show dynamic top matter, name of the view -->
         <div class="recycler-before" ref="recyclerBefore">
-          <div class="text" v-show="!$refs.topmatter.type && list.length && viewName">
+          <div class="text" v-show="!$refs.topmatter.type && list.length && viewName && !isMobile()">
             {{ viewName }}
           </div>
 

src/components/top-matter/TopMatter.vue

@@ -82,7 +82,7 @@ export default defineComponent({
 .top-matter-container {
   padding-top: 4px;
   @media (max-width: 768px) {
-    padding-left: 40px;
+    padding-left: 10px;
   }
 
   > div {