fix: sidebar overlay bug on smaller screens

This commit is contained in:
NGPixel 2020-03-14 18:58:49 -04:00
parent d4db18444d
commit dd3699b501

View File

@ -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 () {
Prism.highlightAllUnder(this.$refs.container)
this.navShown = this.$vuetify.breakpoint.smAndUp
// -> Check side navigation visibility
this.handleSideNavVisibility()
window.addEventListener('resize', _.debounce(() => {
this.handleSideNavVisibility()
}, 500))
// -> Highlight Code Blocks
Prism.highlightAllUnder(this.$refs.container)
// -> 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
}
}
}
}