Completly hide sidebar for mobile.

attawit · Jun 11, 2021 · 87dbe1b · 87dbe1b
1 parent bf00de0
commit 87dbe1b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <va-sidebar :minimized="minimized">
+  <va-sidebar :minimized="minimized" :minimizedWidth="minimizedWidth">
     <menu-minimized v-if="minimized" :items="items" />
     <menu-accordion v-else :items="items" />
   </va-sidebar>    
@@ -23,6 +23,11 @@ export default {
       type: Boolean,
       required: true
     },
+    minimizedWidth: {
+      type: Boolean,
+      required: false,
+      default: undefined
+    },
     color: {
       type: String,
       default: "secondary"
@@ -80,7 +85,7 @@ export default {
   flex-shrink: 0;
 }
 
-.va-sidebar--minimized {
-  width: auto !important;
-}
+// .va-sidebar--minimized {
+//   width: auto !important;
+// }
 </style>
diff --git a/src/layout/app-layout.vue b/src/layout/app-layout.vue
@@ -2,7 +2,7 @@
   <div class="app-layout">
     <navbar />
     <div class="app-layout__content">
-      <sidebar :minimized="isSidebarMinimized"/>
+      <sidebar :minimized="isSidebarMinimized" :minimizedWidth="sidebarMinimizedWidth"/>
       <div class="app-layout__page">
         <div class="layout fluid gutter--xl">
           <router-view/>
@@ -14,7 +14,7 @@
 
 <script>
 import { useStore } from 'vuex';
-import { computed, onBeforeUnmount, onMounted } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import { onBeforeRouteUpdate } from 'vue-router';
 import Sidebar from '@/components/sidebar/Sidebar';
 import Navbar from '@/components/navbar/Navbar.vue';
@@ -29,34 +29,39 @@ export default {
 
   setup() {   
     const store = useStore()
-    const mobileBreakPointPX = 575
+    const mobileBreakPointPX = 480
+    const collapsedBreakPointPX = 680
 
+    const sidebarMinimizedWidth = ref(undefined)
     const isSidebarMinimized = computed(() => store.state.isSidebarMinimized)
+    const isCollapsed = () => window.innerWidth <= collapsedBreakPointPX
     const isMobile = () => window.innerWidth <= mobileBreakPointPX
 
-    const updateSidebarCollapsedState = () => {
-      store.commit('updateSidebarCollapsedState', isMobile())
+    const onResize = () => {
+      store.commit('updateSidebarCollapsedState', isCollapsed())
+
+      sidebarMinimizedWidth.value = isMobile() ? 0 : '4rem'
     }
 
     onMounted(() => {
-      window.addEventListener('resize', updateSidebarCollapsedState)     
+      window.addEventListener('resize', onResize)     
     })
 
     onBeforeUnmount(() => {
-      window.removeEventListener('resize', updateSidebarCollapsedState)
+      window.removeEventListener('resize', onResize)
     })
 
     onBeforeRouteUpdate(() => {
-      if (isMobile()) {
+      if (isCollapsed()) {
         // Collapse sidebar after route change for Mobile
         store.commit('updateSidebarCollapsedState', true)
       }
     })
 
-    updateSidebarCollapsedState()
+    onResize()
 
     return {
-      isSidebarMinimized
+      isSidebarMinimized, sidebarMinimizedWidth
     }
   }
 }