-
Notifications
You must be signed in to change notification settings - Fork 6
/
default.vue
124 lines (115 loc) · 2.25 KB
/
default.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<template>
<div class="wrapper">
<div ref="content" class="content min-vh-100 flex flex-column" :style="{width: pageWidth}">
<navbar @toggle="toggleMenu" />
<div class="page-container flex-auto">
<nuxt />
</div>
<Footer />
</div>
<div ref="mobilemenu" class="dn bg-mid-gray">
<summit-menu
class="pa2"
:dark="true"
@link-click="closeMenu"
/>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { STATES } from '~/store'
import Navbar from '~/components/Navbar'
import Footer from '~/components/Footer'
import SummitMenu from '~/components/SummitMenu'
export default {
components: {
Navbar,
Footer,
SummitMenu
},
data () {
return {
slideout: null
}
},
computed: {
...mapState({
pageWidth: STATES.PAGE_WIDTH
})
},
mounted () {
const Slideout = require('slideout')
this.slideout = new Slideout({
panel: this.$refs.content,
menu: this.$refs.mobilemenu,
tolerance: 70,
padding: 256
})
},
beforeDestroy () {
if (this.slideout) {
this.slideout.destroy()
}
},
methods: {
toggleMenu () {
if (!this.slideout) {
return
}
this.slideout.toggle()
},
closeMenu () {
if (!this.slideout) {
return
}
this.slideout.close()
}
}
}
</script>
<style lang="scss" scoped>
.content {
min-width: 100%;
max-width: 100vw;
@include not-small-screen {
max-width: none;
}
}
</style>
<style lang="scss">
// copy from https://slideout.js.org/
.slideout-menu {
position: fixed;
top: 0;
bottom: 0;
width: 256px;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
z-index: 0;
display: none;
}
.slideout-menu-left {
left: 0;
}
.slideout-menu-right {
right: 0;
}
.slideout-panel {
position: relative;
z-index: 1;
// this corrupt position fixed XD
// https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container
// will-change: transform;
background-color: #FFF; /* A background-color is required */
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
</style>