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 @@ -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 + } } } }