layout
This commit is contained in:
ManjaroOne666
parent
f80dfb4a33
commit
ad14611129
|
|
@ -1,20 +1,43 @@
|
|||
<template>
|
||||
<section :class="{ 'is-open': isOpen }"
|
||||
class="menu-drawer menu-layout"
|
||||
@click="$emit('toggleMenu')">
|
||||
@click="$emit('toggleMenu')"
|
||||
>
|
||||
<div class="menu-content">
|
||||
<div class="menu-close">close</div>
|
||||
<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 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"
|
||||
>
|
||||
</b-icon>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="menu-content__footer">
|
||||
</div>
|
||||
<footer class="menu-content__footer"></footer>
|
||||
<footer class="menu-content__footer">
|
||||
<p class="footer-attr">Copyright © 2019 Marc Leopold Photography</p>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="menu-header">
|
||||
<div class="menu-header__inner">
|
||||
|
|
@ -44,10 +67,10 @@ export default {
|
|||
{ 'to': '/contact', 'text': 'Contact Me' },
|
||||
],
|
||||
socialNav: [
|
||||
{ 'to': 'https://www.facebook.com', 'text': 'Facebook', icon: '' },
|
||||
{ 'to': 'https://www.instagram.com', 'text': 'Instagram', icon: '' },
|
||||
{ 'to': 'https://twitter.com', 'text': 'Twitter', icon: '' },
|
||||
{ 'to': 'https://uk.linkedin.com', 'text': 'LinkedIn', icon: '' },
|
||||
{ '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' },
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
@ -75,7 +98,7 @@ export default {
|
|||
}
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
width: 20em;
|
||||
width: 25em;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
transform: translate3d($site-menu__header-width, 0, 0);
|
||||
|
|
@ -96,10 +119,44 @@ export default {
|
|||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -150,10 +207,11 @@ export default {
|
|||
|
||||
.site-title {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.1;
|
||||
|
||||
@include font-title();
|
||||
|
||||
@media (min-width: $bp__layout) {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
|
@ -186,4 +244,68 @@ export default {
|
|||
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 {
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@media (min-width: $bp__layout) {
|
||||
.menu-content .social-nav__icon i::before {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue