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

update: refactor, better class names

This commit is contained in:
ManjaroOne666 2019-01-02 22:14:56 +00:00
parent 98bd706338
commit 750799248b
2 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/SiteMenu.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<section :class="{ 'is-open': isMenuOpen }" <section :class="{ 'is-open': isOpen }"
class="site-menu panel-container" class="menu-drawer menu-layout"
@click="toggleMenu"> @click="$emit('toggleMenu')">
<div class="panel-content"> <div class="menu-content">
<nav class="nav-main"></nav> <nav class="menu-content__body"></nav>
<footer class="nav-social"></footer> <footer class="menu-content__footer"></footer>
</div> </div>
<div class="panel-header"> <div class="menu-header">
<div class="panel-header__inner">This is the Menu Header</div> <div class="menu-header__inner">This is the Menu Header</div>
</div> </div>
</section> </section>
</template> </template>
@ -15,18 +15,18 @@
<script> <script>
export default { export default {
props: { props: {
isOpen: {
type: Boolean,
required: true
}
}, },
data () { data () {
return { return {
isMenuOpen: true
} }
}, },
methods: { methods: {
toggleMenu () {
this.isMenuOpen = !this.isMenuOpen
}
} }
} }
</script> </script>
@ -34,7 +34,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$bp-layout: $bp__m; $bp-layout: $bp__m;
.site-menu { .menu-drawer {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -63,7 +63,7 @@ $bp-layout: $bp__m;
} }
} }
.panel-container { .menu-layout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -72,13 +72,13 @@ $bp-layout: $bp__m;
} }
} }
.panel-content { .menu-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: blue; // TEMP background-color: blue; // TEMP
} }
.panel-header { .menu-header {
position: relative; position: relative;
flex: 0 0 $site-menu__header-height; flex: 0 0 $site-menu__header-height;
@ -89,7 +89,7 @@ $bp-layout: $bp__m;
background-color: cyan; // TEMP background-color: cyan; // TEMP
} }
.panel-header__inner { .menu-header__inner {
width: 100%; width: 100%;
height: 100%; height: 100%;

17
layouts/default.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<SiteMenu /> <SiteMenu
:is-open="isMenuOpen"
@toggleMenu="toggleMenu"
/>
<div class="page-content"> <div class="page-content">
<nuxt /> <nuxt />
</div> </div>
@ -14,12 +17,16 @@ export default {
components: { components: {
SiteMenu SiteMenu
}, },
data() { data() {
return { return {
items: [ isMenuOpen: true,
{ title: 'Home', icon: 'home', to: { name: 'index' } }, }
{ title: 'Inspire', icon: 'lightbulb', to: { name: 'inspire' } } },
]
methods: {
toggleMenu () {
this.isMenuOpen = !this.isMenuOpen
} }
} }
} }