613 lines
12 KiB
Vue
613 lines
12 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"
|
|
@click="$emit('closeMenu')"
|
|
>
|
|
<span class="menu-close__content">close</span>
|
|
</div>
|
|
<nav class="menu-content__body">
|
|
<ul class="site-nav">
|
|
<li class="site-nav__item"
|
|
v-for="item in siteNav"
|
|
:key="item.to"
|
|
@click="$emit('closeMenu')"
|
|
>
|
|
<div v-if="item.bgImgUrl"
|
|
class="menu-background menu-link-background"
|
|
:style="{ 'background-image': loadMenuImages ? `url(${item.bgImgUrl})` : 'none' }"
|
|
>
|
|
</div>
|
|
<nuxt-link class="site-nav__link"
|
|
:to="item.to"
|
|
>
|
|
{{ item.text }}
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
<ul class="site-nav__footer social-nav">
|
|
<li v-for="item in socialNav"
|
|
class="social-nav-item"
|
|
:key="item.to"
|
|
>
|
|
<div class="menu-background social-background">
|
|
<b-icon class="social-background__icon"
|
|
:icon="item.icon"
|
|
/>
|
|
</div>
|
|
<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 {
|
|
loadMenuImages: true,
|
|
siteNav: [
|
|
{ 'to': '/', 'text': 'Home', bgImgUrl: '/img/devices--bw.jpg'},
|
|
{ 'to': '/galleries', 'text': 'Galleries', bgImgUrl: '/img/photo-box--bw.jpg' },
|
|
{ 'to': '/services', 'text': 'Services', bgImgUrl: '/img/camera--bw.jpg' },
|
|
{ 'to': '/about', 'text': 'About Me', bgImgUrl: '/img/silhouette--dark.jpg' },
|
|
{ 'to': '/contact', 'text': 'Contact Me', bgImgUrl: '/img/mail--bw.jpg' },
|
|
],
|
|
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' },
|
|
]
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
const mq = window.matchMedia("(min-width: 40em)")
|
|
this.loadMenuImages = mq.matches
|
|
},
|
|
}
|
|
</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 {
|
|
$color-bg: $site-menu__color-bg;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
padding: .5rem;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: $site-menu__color-bg;
|
|
background: linear-gradient(
|
|
to right,
|
|
darken($color-bg, 2%),
|
|
$color-bg,
|
|
darken($color-bg, 2%)
|
|
);
|
|
|
|
@media (min-width: $bp__layout) {
|
|
padding: .5rem 1rem;
|
|
background: linear-gradient(
|
|
to top,
|
|
darken($color-bg, 2%),
|
|
$color-bg,
|
|
darken($color-bg, 2%)
|
|
);
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
position: relative;
|
|
z-index: 10;
|
|
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__neutral-300;
|
|
$color-shade: darken($color__neutral-300, 5);
|
|
// $color-shade: $color__neutral-200;
|
|
|
|
z-index: 20;
|
|
position: relative;
|
|
flex: 0 0 $site-menu__header-height;
|
|
|
|
color: $color__neutral-900;
|
|
background-color: $color-bg;
|
|
background: linear-gradient(
|
|
to right,
|
|
$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);
|
|
}
|
|
|
|
}
|
|
|
|
.site-title {
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
line-height: 1.1;
|
|
opacity: .8;
|
|
|
|
@include font-title($weight: 400);
|
|
|
|
@media (min-width: $bp__layout) {
|
|
font-size: 1.0rem;
|
|
letter-spacing: 1.3px;
|
|
}
|
|
}
|
|
|
|
.menu-close {
|
|
z-index: 30;
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
@include font-title();
|
|
text-transform: lowercase;
|
|
cursor: pointer;
|
|
color: $color__neutral-800;
|
|
|
|
transition: opacity 0 $transition-timing;
|
|
opacity: 0;
|
|
|
|
@at-root .menu.is-open & {
|
|
transition: opacity 1s $transition-timing + .2s;
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (max-width: $bp__layout) {
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
.menu-close__content {
|
|
display: block;
|
|
padding: .5rem .75rem 1rem 1rem;
|
|
|
|
transition: opacity .2s;
|
|
opacity: .6;
|
|
|
|
&:hover {
|
|
opacity: .8;
|
|
}
|
|
}
|
|
|
|
.site-nav {
|
|
font-size: 1.4em;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
font-size: .8em;
|
|
}
|
|
}
|
|
|
|
.site-nav__item {
|
|
z-index: 1;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.site-nav__link {
|
|
z-index: 5;
|
|
position: relative;
|
|
display: block;
|
|
padding: .2em 0;
|
|
|
|
color: $color__neutral-800;
|
|
transition: opacity .5s;
|
|
opacity: .9;
|
|
|
|
&:link, &:visited {
|
|
opacity: .9;
|
|
}
|
|
|
|
&:hover, &:active {
|
|
opacity: .5;
|
|
}
|
|
|
|
&.nuxt-link-exact-active {
|
|
pointer-events: none;
|
|
color: $color__neutral-900;
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (min-width: $bp__layout) {
|
|
padding: .5em 0;
|
|
|
|
&::before {
|
|
$size: .2rem;
|
|
|
|
content: '';
|
|
position: absolute;
|
|
height: $size;
|
|
width: $size;
|
|
right: 100%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin-top: .02rem;
|
|
margin-right: .3rem;
|
|
|
|
border-radius: 50%;
|
|
|
|
background-color: $color__neutral-600;
|
|
|
|
transition: opacity .5s;
|
|
opacity: 0;
|
|
}
|
|
|
|
&.nuxt-link-exact-active::before {
|
|
transition: opacity 1s .5s;
|
|
opacity: .8;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.site-nav__footer {
|
|
margin-top: 1.8em;
|
|
}
|
|
|
|
.social-nav {
|
|
z-index: 10;
|
|
list-style: none;
|
|
display: flex;
|
|
}
|
|
|
|
.social-nav__link {
|
|
display: block;
|
|
height: 2em;
|
|
width: 5ch;
|
|
|
|
transition: opacity .5s;
|
|
color: $color__neutral-900;
|
|
|
|
&:link, &:visited {
|
|
opacity: .8;
|
|
color: $color__neutral-900;
|
|
}
|
|
|
|
&:hover, &:active {
|
|
opacity: .5;
|
|
}
|
|
|
|
@media (min-width: $bp__layout) {
|
|
width: 3ch;
|
|
}
|
|
}
|
|
|
|
.social-nav__icon.icon {
|
|
justify-content: normal;
|
|
}
|
|
|
|
.footer-attr {
|
|
color: $color__neutral-600;
|
|
font-size: .7em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.menu-toggle {
|
|
$width: 2rem;
|
|
$margin: ($site-menu__header-width - $width) / 2;
|
|
|
|
z-index: 30;
|
|
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__neutral-900;
|
|
$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;
|
|
}
|
|
}
|
|
|
|
.menu-background {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: $bp__layout) {
|
|
.menu-background {
|
|
z-index: 1;
|
|
display: initial;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
pointer-events: none;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
right: $site-menu__header-width;
|
|
}
|
|
}
|
|
|
|
.menu-link-background {
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
transition: opacity .5s;
|
|
opacity: 0;
|
|
|
|
&::after {
|
|
$color: $site-menu__color-bg; //color of gradient overlay
|
|
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba($color, 0),
|
|
rgba($color, .7),
|
|
rgba($color, .7),
|
|
rgba($color, 0)
|
|
),
|
|
linear-gradient(
|
|
to right,
|
|
rgba($color, 1),
|
|
rgba($color, .2) 50%,
|
|
rgba($color, 0) 90%,
|
|
rgba($color, 1)
|
|
),
|
|
linear-gradient(
|
|
to bottom,
|
|
rgba($color, 1),
|
|
rgba($color, 0) 20%,
|
|
rgba($color, 0) 80%,
|
|
rgba($color, 1) 90%,
|
|
rgba($color, 1)
|
|
);
|
|
}
|
|
}
|
|
|
|
.site-nav__item:hover .menu-link-background {
|
|
transition: opacity 1s;
|
|
opacity: .3;
|
|
}
|
|
|
|
.social-background {
|
|
transition: opacity .5s;
|
|
opacity: 0;
|
|
}
|
|
|
|
.social-background__icon {
|
|
position: absolute;
|
|
align-items: flex-end;
|
|
width: 100%;
|
|
height: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.social-nav-item:hover .social-background {
|
|
transition: opacity 1s;
|
|
opacity: .15;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
@media (min-width: $bp__layout) {
|
|
.menu-content .social-nav__icon i::before {
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
|
|
.social-background__icon i.mdi {
|
|
position: relative;
|
|
|
|
&::before {
|
|
font-size: 19em;
|
|
margin-bottom: -.05em;
|
|
|
|
@media (min-width: $bp__layout) {
|
|
margin-bottom: -.19em;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba($site-menu__color-bg, .8),
|
|
rgba($site-menu__color-bg, 0)
|
|
);
|
|
}
|
|
}
|
|
|
|
</style>
|