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

menu header inner panel layout

This commit is contained in:
ManjaroOne666 2019-01-02 21:41:34 +00:00
parent 8fdf845980
commit 98bd706338
1 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/SiteMenu.vue
View File

@ -1,12 +1,13 @@
<template> <template>
<section :class="{ 'is-open': isMenuOpen }" <section :class="{ 'is-open': isMenuOpen }"
class="site-menu panel-container"> class="site-menu panel-container"
@click="toggleMenu">
<div class="panel-content"> <div class="panel-content">
<nav class="nav-main"></nav> <nav class="nav-main"></nav>
<footer class="nav-social"></footer> <footer class="nav-social"></footer>
</div> </div>
<div class="panel-header" <div class="panel-header">
@click="toggleMenu"> <div class="panel-header__inner">This is the Menu Header</div>
</div> </div>
</section> </section>
</template> </template>
@ -78,8 +79,32 @@ $bp-layout: $bp__m;
} }
.panel-header { .panel-header {
position: relative;
flex: 0 0 $site-menu__header-height; flex: 0 0 $site-menu__header-height;
@media (min-width: $bp-layout) {
max-width: $site-menu__header-width;
}
background-color: cyan; // TEMP background-color: cyan; // TEMP
} }
.panel-header__inner {
width: 100%;
height: 100%;
background-color: rgba(green, .5);
@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);
}
}
</style> </style>