add close button to sidebar

src/app/Nav.vue

@@ -1,9 +1,12 @@
 <template>
   <div>
     <nav class="nav flex-column">
-      <router-link class="nav-link logo" :to="{name: 'home'}">
+      <div class="nav-link logo d-flex justify-content-between">
         <Logo />
-      </router-link>
+        <button class="btn btn-link btn-lg p-0 d-md-none" @click="hideMenu">
+          <Icon icon="x" />
+        </button>
+      </div>
 
       <router-link class="nav-link" :to="{name: 'home'}">
         <Icon icon="card-text" class="" /> Home
@@ -43,6 +46,7 @@
   import Vue from 'vue'
   import Logo from './Logo.vue'
   import PlaylistNav from '@/playlist/PlaylistNav.vue'
+  import { mapActions } from 'vuex'
 
   export default Vue.extend({
     components: {
@@ -50,10 +54,7 @@
       PlaylistNav,
     },
     methods: {
-      logout() {
-        this.$auth.logout()
-        this.$router.go(0)
+      ...mapActions(['hideMenu']),
     },
-    }
   })
 </script>

src/app/Sidebar.vue

@@ -12,13 +12,16 @@
       no-header
       backdrop
       backdrop-variant=""
-      @hidden="toggleMenu"
+      @hidden="hideMenu"
     >
       <Nav />
     </b-sidebar>
   </div>
 </template>
 <style>
+  .sidebar-container nav {
+    padding-top: 0.5rem;
+  }
   .sidebar-container .sidebar-fixed {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -48,7 +51,7 @@
 <script lang="ts">
   import Vue from 'vue'
   import Nav from './Nav.vue'
-  import { mapState, mapMutations } from 'vuex'
+  import { mapState, mapActions } from 'vuex'
 
   export default Vue.extend({
     components: {
@@ -58,7 +61,7 @@
       ...mapState(['showMenu'])
     },
     methods: {
-      ...mapMutations(['toggleMenu']),
+      ...mapActions(['hideMenu']),
     },
   })
 </script>

src/app/TopNav.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex align-items-center mb-2">
-    <button class="navbar-toggler text-white d-md-none" @click="toggleMenu">
+    <button class="navbar-toggler text-white d-md-none" @click="showMenu">
       <Icon icon="list" />
     </button>
 
@@ -31,7 +31,7 @@
 </template>
 <script lang="ts">
   import Vue from 'vue'
-  import { mapMutations, mapState } from 'vuex'
+  import { mapActions, mapState } from 'vuex'
   import SearchForm from '@/search/SearchForm.vue'
 
   export default Vue.extend({
@@ -45,8 +45,8 @@
       ]),
     },
     methods: {
-      ...mapMutations([
-        'toggleMenu',
+      ...mapActions([
+        'showMenu',
       ]),
       logout() {
         this.$auth.logout()

src/shared/components/Icon.vue

@@ -21,6 +21,7 @@
     BIconBoxArrowRight,
     BIconPersonFill,
     BIconPersonCircle,
+    BIconX,
   } from 'bootstrap-vue'
 
   export default Vue.extend({
@@ -42,6 +43,7 @@
       BIconBoxArrowRight,
       BIconPersonFill,
       BIconPersonCircle,
+      BIconX,
     },
     props: {
       icon: { type: String, required: true }

src/shared/store.ts

@@ -34,8 +34,8 @@ const setupRootModule = (authService: AuthService, api: API): Module<State, any>
       state.username = username
       state.server = server
     },
-    toggleMenu(state) {
-      state.showMenu = !state.showMenu
+    setMenuVisible(state, visible) {
+      state.showMenu = visible
     },
     setPlaylists(state, playlists: any[]) {
       state.playlists = playlists
@@ -46,6 +46,12 @@ const setupRootModule = (authService: AuthService, api: API): Module<State, any>
     },
   },
   actions: {
+    showMenu({ commit }) {
+      commit('setMenuVisible', true)
+    },
+    hideMenu({ commit }) {
+      commit('setMenuVisible', false)
+    },
     loadPlaylists({ commit }) {
       api.getPlaylists().then(result => {
         commit('setPlaylists', result)