124 lines
2.3 KiB
Vue
124 lines
2.3 KiB
Vue
<template>
|
|
<section :class="{ 'is-open': isOpen }"
|
|
class="menu-drawer menu-layout"
|
|
@click="$emit('toggleMenu')">
|
|
<div class="menu-content">
|
|
<nav class="menu-content__body">
|
|
<ul class="site-nav">
|
|
<li v-for="item in siteNav"
|
|
:key="item.to">
|
|
<nuxt-link :to="item.to">{{ item.text }}</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<footer class="menu-content__footer"></footer>
|
|
</div>
|
|
<div class="menu-header">
|
|
<div class="menu-header__inner">This is the Menu Header</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
isOpen: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
siteNav: [
|
|
{ 'to': '/', 'text': 'Home'},
|
|
{ 'to': '/galleries', 'text': 'Galleries' },
|
|
{ 'to': '/services', 'text': 'Services' },
|
|
{ 'to': '/about', 'text': 'About Me' },
|
|
{ 'to': '/contact', 'text': 'Contact Me' },
|
|
]
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.menu-drawer {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
right: 0;
|
|
top: -100%;
|
|
|
|
transition: transform .5s;
|
|
transform: translate3d(0, $site-menu__header-width, 0);
|
|
|
|
background-color: $color__bg-menu;
|
|
opacity: .7;
|
|
|
|
&.is-open {
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
|
|
@media (min-width: $bp__layout) {
|
|
width: 50%;
|
|
max-width: 30em;
|
|
top: 0;
|
|
right: 100%;
|
|
transform: translate3d($site-menu__header-width, 0, 0);
|
|
|
|
&.is-open {
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.menu-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: blue; // TEMP
|
|
}
|
|
|
|
.menu-header {
|
|
position: relative;
|
|
flex: 0 0 $site-menu__header-height;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
max-width: $site-menu__header-width;
|
|
}
|
|
|
|
background-color: cyan; // TEMP
|
|
}
|
|
|
|
.menu-header__inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
background-color: rgba(green, .5);
|
|
|
|
@media (min-width: $bp__layout) {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 100%;
|
|
width: 100vh;
|
|
height: $site-menu__header-width;
|
|
|
|
transform-origin: 100% 0;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
}
|
|
</style>
|