improve mobile sidebar

src/app/App.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
     <div class="min-vh-100 d-flex align-items-stretch justify-spcace-between">
-      <div class="sidebar elevated d-none d-md-block" :class="{'d-block':showMenu}">
+      <Sidebar/>
-        <SideNav></SideNav>
-      </div>
       <div class="main flex-fill">
         <div class="container-fluid pt-3 pb-3">
           <TopNav/>
@@ -16,29 +14,10 @@
     </footer>
   </div>
 </template>
-<style lang="scss" >
+<style lang="scss">
-  .sidebar {
-    // position: sticky;
-    // top: 0;
-    // height: calc(100vh - 80px);
-    // width: 200px;
-    // min-width: 200px;
-    // max-width: 200px;
-    // text-overflow: ellipsis;
-
-    .nav-link {
-      width: 220px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
   .main {
     margin-bottom: 80px;
   }
-  .sidebar {
-    padding-bottom: 180px;
-  }
   .footer {
     position: fixed;
     bottom: 0;
@@ -48,19 +27,15 @@
   }
 </style>
 <script lang="ts">
-  import SideNav from "./SideNav.vue";
   import TopNav from "./TopNav.vue";
+  import Sidebar from "./Sidebar.vue";
   import Player from "@/player/Player.vue";
-  import { mapState, mapMutations } from 'vuex';
 
   export default {
     components: {
-      SideNav,
       TopNav,
+      Sidebar,
       Player,
     },
-    computed: {
-      ...mapState(['showMenu'])
-    },
   };
 </script>

src/app/Nav.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="text-truncate">
     <nav class="nav flex-column">
-      <router-link class="nav-link" :to="{name: 'home'}">
+      <router-link class="nav-link logo" :to="{name: 'home'}">
         <img src="@/app/logo.png" class="img-fluid">
       </router-link>
 
@@ -9,7 +9,6 @@
         <Icon>mdi-home</Icon> Home
       </router-link>
 
-
       <router-link class="nav-link" :to="{name: 'queue'}">
         <Icon>mdi-view-list</Icon> Playing
       </router-link>
@@ -24,7 +23,6 @@
         </small>
       </a>
 
-
       <router-link class="nav-link" :to="{name: 'albums'}">
         <Icon>mdi-album</Icon> Albums
       </router-link>
@@ -38,22 +36,20 @@
       </router-link>
 
       <PlaylistNav/>
-
-      
-<!-- 
-      <router-link class="nav-item nav-link" :to="{name: 'radio'}">
-        <Icon>mdi-radio</Icon> Radio
-      </router-link>
-
-      <router-link class="nav-item nav-link" :to="{name: 'settings'}">
-        <Icon>mdi-settings</Icon>Settings
-      </router-link> -->
-      <!-- <a href="#" class="nav-item nav-link" @click.prevent="logout">
-        <Icon>mdi-</Icon> Logout
-      </a> -->
     </nav>
   </div>
 </template>
+<style lang="scss" scoped>
+  .logo {
+    max-width: 200px;
+  }
+  .nav-link {
+    width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
 <script lang="ts">
 import Vue from "vue";
 import PlaylistNav from "@/playlist/PlaylistNav.vue";
@@ -63,9 +59,6 @@ export default Vue.extend({
   components: {
     PlaylistNav,
   },
-  props: {
-    show: Boolean
-  },
   methods: {
     logout() {
       this.$auth.logout();

src/app/Sidebar.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="sidebar elevated">
+    <div class="d-none d-md-block">
+      <Nav/>
+    </div>
+    <b-sidebar
+        :visible="showMenu"
+        @hidden="toggleMenu"
+        class="d-md-none"
+        sidebar-class="elevated"
+        bg-variant=""
+        shadow="lg"
+        no-header
+        backdrop
+        backdrop-variant=""
+      >
+      <Nav/>
+    </b-sidebar>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .sidebar {
+    padding-bottom: 180px;
+  }
+</style>
+<script lang="ts">
+  import Vue from "vue";
+  import Nav from "./Nav.vue";
+  import { mapState, mapMutations } from 'vuex';
+
+  export default Vue.extend({
+    components: {
+      Nav,
+    },
+    computed: {
+      ...mapState(['showMenu'])
+    },
+    methods: {
+      ...mapMutations(['toggleMenu']),
+    },
+  });
+</script>