<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>
