skillbox/client/src/layouts/DefaultLayout.vue

47 lines
1.2 KiB
Vue

<template>
<div class="container skillbox layout" :class="specialContainerClass">
<profile-sidebar></profile-sidebar>
<header-bar class="header layout__header">
</header-bar>
<mobile-header
class="header layout__header layout__header--mobile"
></mobile-header>
<router-view class="layout__content"></router-view>
<default-footer class="layout__footer"></default-footer>
</div>
</template>
<script>
import HeaderBar from '@/components/HeaderBar';
import MobileHeader from '@/components/MobileHeader';
import ProfileSidebar from '@/components/profile/ProfileSidebar';
import DefaultFooter from '@/layouts/DefaultFooter';
export default {
components: {
HeaderBar,
MobileHeader,
ProfileSidebar,
DefaultFooter
},
computed: {
showFilter() {
return this.$route.meta.filter;
},
specialContainerClass() {
let cls = this.$store.state.specialContainerClass;
return [cls ? `layout--${cls}` : '', {'skillbox--show-filter': this.showFilter}]
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
@import "@/styles/_default-layout.scss";
</style>