rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update layout

This commit is contained in:
ManjaroOne666 2019-01-16 13:47:22 +00:00
parent 85c2583b26
commit dcf54b2886
1 changed files with 76 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/SiteMenu.vue
View File

@ -3,6 +3,7 @@
class="menu-drawer menu-layout" class="menu-drawer menu-layout"
@click="$emit('toggleMenu')"> @click="$emit('toggleMenu')">
<div class="menu-content"> <div class="menu-content">
<div class="menu-close">close</div>
<nav class="menu-content__body"> <nav class="menu-content__body">
<ul class="site-nav"> <ul class="site-nav">
<li v-for="item in siteNav" <li v-for="item in siteNav"
@ -11,10 +12,15 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="menu-content__footer">
</div>
<footer class="menu-content__footer"></footer> <footer class="menu-content__footer"></footer>
</div> </div>
<div class="menu-header"> <div class="menu-header">
<div class="menu-header__inner">This is the Menu Header</div> <div class="menu-header__inner">
<span class="menu-header__item site-title">Marc Leopold Photography</span>
<div class="menu-header__item menu-toggle">X</div>
</div>
</div> </div>
</section> </section>
</template> </template>
@ -36,6 +42,12 @@ export default {
{ 'to': '/services', 'text': 'Services' }, { 'to': '/services', 'text': 'Services' },
{ 'to': '/about', 'text': 'About Me' }, { 'to': '/about', 'text': 'About Me' },
{ 'to': '/contact', 'text': 'Contact Me' }, { '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: '' },
] ]
} }
}, },
@ -53,19 +65,17 @@ export default {
right: 0; right: 0;
top: -100%; top: -100%;
font-size: 1rem;
transition: transform .5s; transition: transform .5s;
transform: translate3d(0, $site-menu__header-width, 0); transform: translate3d(0, $site-menu__header-width, 0);
background-color: $color__bg-menu;
opacity: .7;
&.is-open { &.is-open {
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} }
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
width: 50%; width: 20em;
max-width: 30em;
top: 0; top: 0;
right: 100%; right: 100%;
transform: translate3d($site-menu__header-width, 0, 0); transform: translate3d($site-menu__header-width, 0, 0);
@ -88,25 +98,38 @@ export default {
.menu-content { .menu-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: blue; // TEMP background-color: $color__primary-100;
} }
.menu-header { .menu-header {
position: relative; position: relative;
flex: 0 0 $site-menu__header-height; flex: 0 0 $site-menu__header-height;
color: $color__neutral-700;
background-color: $color__neutral-300;
opacity: .97;
@media (min-width: $bp__layout) { @media (min-width: $bp__layout) {
max-width: $site-menu__header-width; max-width: $site-menu__header-width;
} }
background-color: cyan; // TEMP
} }
.menu-header__inner { .menu-header__inner {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(green, .5); 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) { @media (min-width: $bp__layout) {
position: absolute; position: absolute;
@ -120,4 +143,47 @@ export default {
} }
} }
.menu-header__item {
}
.site-title {
font-size: 1.2rem;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.1;
@media (min-width: $bp__layout) {
font-size: 1.4rem;
}
}
.menu-toggle {
$width: 2rem;
$margin: ($site-menu__header-width - $width) / 2;
width: $width;
height: $width;
position: absolute;
right: $margin;
top: $margin;
@media (min-width: $bp__layout) {
transform: rotate(90deg);
}
background-color: rgba(yellow, .3); // TEMP
}
.menu-close {
display: none;
@media (max-width: $bp__layout) {
display: initial;
position: absolute;
top: .5rem;
right: 1rem;
}
}
</style> </style>