From dd3699b5012fb5720fc28a5d24e40f41d85ed512 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sat, 14 Mar 2020 18:58:49 -0400
Subject: [PATCH] fix: sidebar overlay bug on smaller screens

---
 client/themes/default/components/page.vue | 36 +++++++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue
index 9b0b947e..0e8fedc0 100644
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@@ -7,7 +7,7 @@
       app
       clipped
       mobile-break-point='600'
-      :temporary='$vuetify.breakpoint.mdAndDown'
+      :temporary='$vuetify.breakpoint.smAndDown'
       v-model='navShown'
       :right='$vuetify.rtl'
       )
@@ -225,11 +225,11 @@
         :right='$vuetify.rtl'
         :left='!$vuetify.rtl'
         small
-        depressed
+        :depressed='this.$vuetify.breakpoint.mdAndUp'
         @click='$vuetify.goTo(0, scrollOpts)'
         color='primary'
         dark
-        :style='$vuetify.rtl ? `right: 235px;` : `left: 235px;`'
+        :style='upBtnPosition'
         )
         v-icon mdi-arrow-up
 </template>
@@ -362,7 +362,8 @@ export default {
             background: '#64B5F6'
           }
         }
-      }
+      },
+      winWidth: 0
     }
   },
   computed: {
@@ -385,7 +386,14 @@ export default {
         return result
       }, []))
     },
-    pageUrl () { return window.location.href }
+    pageUrl () { return window.location.href },
+    upBtnPosition () {
+      if (this.$vuetify.breakpoint.mdAndUp) {
+        return this.$vuetify.rtl ? `right: 235px;` : `left: 235px;`
+      } else {
+        return this.$vuetify.rtl ? `right: 65px;` : `left: 65px;`
+      }
+    }
   },
   created() {
     this.$store.commit('page/SET_AUTHOR_ID', this.authorId)
@@ -403,9 +411,16 @@ export default {
     this.$store.commit('page/SET_MODE', 'view')
   },
   mounted () {
+    // -> Check side navigation visibility
+    this.handleSideNavVisibility()
+    window.addEventListener('resize', _.debounce(() => {
+      this.handleSideNavVisibility()
+    }, 500))
+
+    // -> Highlight Code Blocks
     Prism.highlightAllUnder(this.$refs.container)
-    this.navShown = this.$vuetify.breakpoint.smAndUp
 
+    // -> Handle anchor scrolling
     this.$nextTick(() => {
       if (window.location.hash && window.location.hash.length > 1) {
         this.$vuetify.goTo(window.location.hash, this.scrollOpts)
@@ -448,6 +463,15 @@ export default {
     },
     pageDelete () {
       this.$root.$emit('pageDelete')
+    },
+    handleSideNavVisibility () {
+      if (window.innerWidth === this.winWidth) { return }
+      this.winWidth = window.innerWidth
+      if (this.$vuetify.breakpoint.mdAndUp) {
+        this.navShown = true
+      } else {
+        this.navShown = false
+      }
     }
   }
 }