Fix: android auto requirements, Change: New UI #33

components/app/Appbar.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="w-full h-16 bg-primary relative">
-    <div id="appbar" class="absolute top-0 left-0 w-full h-full z-30 flex items-center px-2">
+    <div id="appbar" class="absolute top-0 left-0 w-full h-full z-10 flex items-center px-2">
       <nuxt-link v-show="!showBack" to="/" class="mr-3">
         <img src="/Logo.png" class="h-10 w-10" />
       </nuxt-link>
       <a v-if="showBack" @click="back" class="rounded-full h-10 w-10 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-2 cursor-pointer">
         <span class="material-icons text-3xl text-white">arrow_back</span>
       </a>
-      <div>
+      <div v-if="socketConnected">
         <div class="px-4 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
@@ -20,18 +20,13 @@
 
       <!-- <ui-menu :label="username" :items="menuItems" @action="menuAction" class="ml-5" /> -->
 
-      <span class="material-icons cursor-pointer mx-4" :class="hasDownloadsFolder ? '' : 'text-warning'" @click="$store.commit('downloads/setShowModal', true)">source</span>
+      <!-- <span class="material-icons cursor-pointer mx-4" :class="hasDownloadsFolder ? '' : 'text-warning'" @click="$store.commit('downloads/setShowModal', true)">source</span> -->
 
-      <widgets-connection-icon />
+      <!-- <widgets-connection-icon /> -->
 
-      <!-- <nuxt-link to="/account" class="relative w-28 bg-fg border border-gray-500 rounded shadow-sm ml-5 pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer hover:bg-bg hover:bg-opacity-40" aria-haspopup="listbox" aria-expanded="true">
-        <span class="flex items-center">
-          <span class="block truncate">{{ username }}</span>
-        </span>
-        <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-          <span class="material-icons text-gray-100">person</span>
-        </span>
-      </nuxt-link> -->
+      <div class="h-7 mx-2">
+        <span class="material-icons" style="font-size: 1.75rem" @click="clickShowSideDrawer">menu</span>
+      </div>
     </div>
   </div>
 </template>
@@ -54,6 +49,9 @@ export default {
     }
   },
   computed: {
+    socketConnected() {
+      return this.$store.state.socketConnected
+    },
     currentLibrary() {
       return this.$store.getters['libraries/getCurrentLibrary']
     },
@@ -61,7 +59,7 @@ export default {
       return this.currentLibrary ? this.currentLibrary.name : 'Main'
     },
     showBack() {
-      return this.$route.name !== 'index'
+      return this.$route.name !== 'index' && !this.$route.name.startsWith('bookshelf')
     },
     user() {
       return this.$store.state.user.user
@@ -81,6 +79,9 @@ export default {
     }
   },
   methods: {
+    clickShowSideDrawer() {
+      this.$store.commit('setShowSideDrawer', true)
+    },
     clickShowLibraryModal() {
       this.$store.commit('libraries/setShowModal', true)
     },
@@ -88,7 +89,7 @@ export default {
       if (this.$route.name === 'audiobook-id-edit') {
         this.$router.push(`/audiobook/${this.$route.params.id}`)
       } else {
-        this.$router.push('/')
+        this.$router.push('/bookshelf')
       }
     },
     logout() {

components/app/SideDrawer.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="fixed top-0 left-0 right-0 bottom-0 w-full h-full z-50 overflow-hidden pointer-events-none">
+    <div class="absolute top-0 left-0 w-full h-full bg-black transition-opacity duration-200" :class="show ? 'bg-opacity-60 pointer-events-auto' : 'bg-opacity-0'" @click="clickBackground" />
+    <div class="absolute top-0 right-0 w-64 h-full bg-primary transform transition-transform py-6 pointer-events-auto" :class="show ? '' : 'translate-x-64'" @click.stop>
+      <div class="px-6 mb-4">
+        <p v-if="socketConnected" class="text-base">
+          Welcome, <strong>{{ username }}</strong>
+        </p>
+      </div>
+      <div class="w-full overflow-y-auto">
+        <template v-for="item in navItems">
+          <nuxt-link :to="item.to" :key="item.text" class="w-full hover:bg-bg hover:bg-opacity-60 flex items-center py-3 px-6 text-gray-300">
+            <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
+            <p class="pl-4">{{ item.text }}</p>
+          </nuxt-link>
+        </template>
+      </div>
+      <div class="absolute bottom-0 left-0 w-full flex items-center py-6 px-6 text-gray-300">
+        <p class="text-xs">{{ $config.version }}</p>
+        <div class="flex-grow" />
+        <div v-if="socketConnected" class="flex items-center" @click="logout">
+          <p class="text-xs pr-2">Logout</p>
+          <span class="material-icons text-sm">logout</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  watch: {
+    $route: {
+      handler() {
+        this.show = false
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.showSideDrawer
+      },
+      set(val) {
+        this.$store.commit('setShowSideDrawer', val)
+      }
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    username() {
+      return this.user ? this.user.username : ''
+    },
+    socketConnected() {
+      return this.$store.state.socketConnected
+    },
+    navItems() {
+      var items = [
+        {
+          icon: 'home',
+          text: 'Home',
+          to: '/bookshelf'
+        },
+        {
+          icon: 'person',
+          text: 'Account',
+          to: '/account'
+        },
+        {
+          icon: 'folder',
+          iconOutlined: true,
+          text: 'Downloads',
+          to: '/downloads'
+        },
+        {
+          icon: 'settings',
+          text: 'Settings',
+          to: '/config'
+        }
+      ]
+      if (!this.socketConnected) {
+        items = [
+          {
+            icon: 'cloud_off',
+            text: 'Connect to Server',
+            to: '/connect'
+          }
+        ].concat(items)
+      }
+      return items
+    }
+  },
+  methods: {
+    clickBackground() {
+      this.show = false
+    },
+    async logout() {
+      await this.$axios.$post('/logout').catch((error) => {
+        console.error(error)
+      })
+      this.$server.logout()
+      this.$router.push('/connect')
+
+      this.$store.commit('audiobooks/reset')
+      this.$store.dispatch('audiobooks/useDownloaded')
+    }
+  },
+  mounted() {},
+  beforeDestroy() {
+    this.show = false
+  }
+}
+</script>