382 lines
6.9 KiB
Vue
382 lines
6.9 KiB
Vue
<template>
|
|
<section :class="{ 'is-open': isOpen }"
|
|
class="menu-drawer menu-layout"
|
|
>
|
|
<div class="menu-header__item menu-toggle"
|
|
@click="$emit('toggleMenu')"
|
|
>
|
|
<div class="menu-bars"></div>
|
|
</div>
|
|
<div class="menu-content">
|
|
<div class="menu-close">close</div>
|
|
<nav class="menu-content__body">
|
|
<ul class="site-nav">
|
|
<li class="site-nav__item"
|
|
v-for="item in siteNav"
|
|
:key="item.to"
|
|
>
|
|
<nuxt-link class="site-nav__link"
|
|
:to="item.to"
|
|
>
|
|
{{ item.text }}
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
<ul class="site-nav__footer social-nav">
|
|
<li class="social-nav__item"
|
|
v-for="item in socialNav"
|
|
:key="item.to"
|
|
>
|
|
<a class="social-nav__link"
|
|
:href="item.to"
|
|
target="_blank"
|
|
>
|
|
<b-icon class="social-nav__icon"
|
|
:icon="item.icon"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<footer class="menu-content__footer">
|
|
<p class="footer-attr">Copyright © {{ new Date().getFullYear() }} Marc Leopold Photography</p>
|
|
</footer>
|
|
</div>
|
|
<div class="menu-header"
|
|
@click="$emit('toggleMenu')"
|
|
>
|
|
<div class="menu-header__inner">
|
|
<span class="menu-header__item site-title">Marc Leopold Photography</span>
|
|
</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' },
|
|
],
|
|
socialNav: [
|
|
{ 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: 'instagram' },
|
|
{ 'to': 'https://www.facebook.com', 'text': 'Facebook', icon: 'facebook' },
|
|
{ 'to': 'https://twitter.com', 'text': 'Twitter', icon: 'twitter' },
|
|
{ 'to': 'https://uk.linkedin.com', 'text': 'LinkedIn', icon: 'linkedin' },
|
|
]
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$transition-timing: .5s;
|
|
|
|
.menu-drawer {
|
|
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
right: 0;
|
|
top: -100%;
|
|
|
|
font-size: 1rem;
|
|
|
|
transition: transform $transition-timing;
|
|
transform: translate3d(0, $site-menu__header-width, 0);
|
|
|
|
&.is-open {
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
|
|
@media (min-width: $bp__layout) {
|
|
width: $site-menu__width;
|
|
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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
padding: .5rem;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
padding: .5rem 1rem;
|
|
}
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: $color__primary-100;
|
|
}
|
|
|
|
.menu-content__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex: 1 0 auto;
|
|
text-align: center;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
align-items: normal;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.menu-content__footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 0 0 auto;
|
|
text-align: center;
|
|
padding: 1em 0 0;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.menu-header {
|
|
$color-bg: $color__primary-300;
|
|
$color-shade: darken($color__primary-300, 5);
|
|
|
|
position: relative;
|
|
flex: 0 0 $site-menu__header-height;
|
|
|
|
color: $color__primary-100;
|
|
background-color: $color-bg;
|
|
background: linear-gradient(
|
|
to right,
|
|
$color-shade,
|
|
$color-bg,
|
|
$color-bg,
|
|
$color-shade
|
|
);
|
|
cursor: pointer;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
max-width: $site-menu__header-width;
|
|
background: linear-gradient(
|
|
to top,
|
|
$color-shade,
|
|
$color-bg,
|
|
$color-bg,
|
|
$color-shade
|
|
);
|
|
opacity: .97;
|
|
|
|
}
|
|
}
|
|
|
|
.menu-header__inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
padding: 0 $site-menu__header-width 0 1rem;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
justify-content: center;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
@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);
|
|
}
|
|
|
|
}
|
|
|
|
.menu-header__item {
|
|
}
|
|
|
|
|
|
.site-title {
|
|
font-size: 1.2rem;
|
|
text-transform: uppercase;
|
|
line-height: 1.1;
|
|
|
|
@include font-title($weight: 400);
|
|
|
|
@media (min-width: $bp__layout) {
|
|
font-size: 1.4rem;
|
|
letter-spacing: 1.3px;
|
|
}
|
|
}
|
|
|
|
.menu-close {
|
|
display: none;
|
|
|
|
@media (max-width: $bp__layout) {
|
|
display: initial;
|
|
position: absolute;
|
|
top: .5rem;
|
|
right: 1rem;
|
|
}
|
|
}
|
|
|
|
.site-nav {
|
|
font-size: 1.4em;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
font-size: .8em;
|
|
}
|
|
}
|
|
|
|
.site-nav__item {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.site-nav__link {
|
|
display: inline-block;
|
|
padding: .2em 0;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
padding: .5em 0;
|
|
}
|
|
}
|
|
|
|
.site-nav__footer {
|
|
margin-top: 1.8em;
|
|
}
|
|
|
|
.social-nav {
|
|
list-style: none;
|
|
display: flex;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
}
|
|
}
|
|
|
|
.social-nav__item {
|
|
}
|
|
|
|
.social-nav__link {
|
|
display: block;
|
|
height: 2em;
|
|
width: 5ch;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
width: 3ch;
|
|
}
|
|
}
|
|
|
|
.social-nav__icon.icon {
|
|
justify-content: normal;
|
|
}
|
|
|
|
.footer-attr {
|
|
color: $color__neutral-500;
|
|
font-size: .7em;
|
|
}
|
|
|
|
.menu-toggle {
|
|
$width: 2rem;
|
|
$margin: ($site-menu__header-width - $width) / 2;
|
|
|
|
z-index: 10;
|
|
position: absolute;
|
|
width: $width;
|
|
height: $width;
|
|
right: $margin;
|
|
bottom: $margin;
|
|
|
|
cursor: pointer;
|
|
|
|
transition: opacity .2s;
|
|
opacity: .6;
|
|
|
|
&:hover {
|
|
opacity: .8;
|
|
}
|
|
|
|
@media (min-width: $bp__layout) {
|
|
bottom: auto;
|
|
top: $margin;
|
|
}
|
|
}
|
|
|
|
.menu-bars {
|
|
$color: $color__primary-800;
|
|
$width: 4px;
|
|
$padding: 4px; // padding on top/bottom
|
|
|
|
position: absolute;
|
|
width: 100%;
|
|
top: $padding;
|
|
bottom: $padding;
|
|
left: 0;
|
|
|
|
border-top: $width solid $color;
|
|
border-bottom: $width solid $color;
|
|
|
|
transition: transform .3s .2s ease-out;
|
|
transform: scale(1, .7);
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: $width;
|
|
left: 0;
|
|
top: calc(50% - #{$width / 2});
|
|
|
|
background-color: $color;
|
|
}
|
|
|
|
@at-root .menu.is-open & {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
@media (min-width: $bp__layout) {
|
|
.menu-content .social-nav__icon i::before {
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
</style>
|