<template> <section :class="{ 'is-open': isOpen, 'is-mounted': isMounted }" 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" :exact="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 { isMounted: false, //component has loaded loadMenuImages: true, } }, computed: { siteNav () { return this.$store.getters['navigation/siteNav'] }, socialNav () { return this.$store.getters['navigation/socialNav'] }, }, mounted () { const mq = window.matchMedia("(min-width: 40em)") this.loadMenuImages = mq.matches this.$nextTick(() => { this.isMounted = true }) }, } </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%; overflow-y: auto; 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; transition: opacity 2s 1s; opacity: 0; @at-root .is-mounted & { 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-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-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; @include font-body(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 { filter: blur(3px); 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; filter: blur(20xp); } } .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>