119 lines
2.4 KiB
Vue
119 lines
2.4 KiB
Vue
<template>
|
|
<div class="mobile-navigation">
|
|
<top-navigation class="mobile-navigation__main" :mobile="true"></top-navigation>
|
|
<div class="mobile-navigation__close-button" @click="hideMobileNavigation">
|
|
<cross class="mobile-navigation__close-icon"></cross>
|
|
</div>
|
|
<div class="mobile-navigation__subnavigation"></div>
|
|
<div class="mobile-navigation__secondary">
|
|
<user-widget class="mobile-navigation__user-widget" v-bind="me"></user-widget>
|
|
<logout-widget class="mobile-navigation__logout-widget"></logout-widget>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Cross from '@/components/icons/Cross';
|
|
import UserWidget from '@/components/UserWidget';
|
|
import LogoutWidget from '@/components/LogoutWidget';
|
|
import TopNavigation from '@/components/TopNavigation';
|
|
|
|
import {meQuery} from '@/graphql/queries';
|
|
|
|
export default {
|
|
components: {
|
|
TopNavigation,
|
|
Cross,
|
|
UserWidget,
|
|
LogoutWidget
|
|
},
|
|
|
|
methods: {
|
|
hideMobileNavigation() {
|
|
this.$store.dispatch('showMobileNavigation', false);
|
|
}
|
|
},
|
|
|
|
apollo: {
|
|
me: meQuery
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
me: {}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.mobile-navigation {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 0;
|
|
background-color: white;
|
|
z-index: 20;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 1fr 50px;
|
|
grid-template-rows: 50px 100px auto 100px;
|
|
|
|
grid-template-areas: "m m" "m m" "s s";
|
|
|
|
&--with-subnavigation {
|
|
grid-template-areas: "m m" "m m" "sub sub" "s s";
|
|
}
|
|
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
|
|
@include desktop {
|
|
display: none;
|
|
}
|
|
|
|
&__main {
|
|
background-color: $color-brand;
|
|
padding: $medium-spacing;
|
|
grid-area: m;
|
|
}
|
|
|
|
&__main-link {
|
|
}
|
|
|
|
&__close-button {
|
|
grid-row: 1;
|
|
grid-column: 2;
|
|
align-self: center;
|
|
justify-self: center;
|
|
}
|
|
|
|
&__close-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
opacity: 0.5;
|
|
fill: $color-white;
|
|
}
|
|
|
|
&__secondary {
|
|
grid-area: s;
|
|
padding: $medium-spacing;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
&__user-widget {
|
|
margin-bottom: $small-spacing;
|
|
}
|
|
|
|
&__logout-widget {
|
|
margin-left: -20px;
|
|
}
|
|
}
|
|
</style>
|