111 lines
1.9 KiB
Vue
111 lines
1.9 KiB
Vue
<template>
|
|
<section :class="{ 'is-open': isMenuOpen }"
|
|
class="site-menu panel-container"
|
|
@click="toggleMenu">
|
|
<div class="panel-content">
|
|
<nav class="nav-main"></nav>
|
|
<footer class="nav-social"></footer>
|
|
</div>
|
|
<div class="panel-header">
|
|
<div class="panel-header__inner">This is the Menu Header</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
isMenuOpen: true
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
toggleMenu () {
|
|
this.isMenuOpen = !this.isMenuOpen
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$bp-layout: $bp__m;
|
|
|
|
.site-menu {
|
|
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) {
|
|
max-width: 30em;
|
|
top: 0;
|
|
right: 100%;
|
|
transform: translate3d($site-menu__header-width, 0, 0);
|
|
|
|
&.is-open {
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
@media (min-width: $bp-layout) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.panel-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: blue; // TEMP
|
|
}
|
|
|
|
.panel-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
|
|
}
|
|
|
|
.panel-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>
|