<template>
  <div class="container skillbox" :class="specialContainerClass">
    <profile-sidebar></profile-sidebar>
    <header-bar class="header skillbox__header">
    </header-bar>

    <mobile-header class="header skillbox__header skillbox__header--mobile"></mobile-header>

    <router-view class="skillbox__content"></router-view>
    <footer class="skillbox__footer">Footer</footer>
  </div>
</template>

<script>
  import HeaderBar from '@/components/HeaderBar';
  import MobileHeader from '@/components/MobileHeader';
  import ProfileSidebar from '@/components/profile/ProfileSidebar';

  export default {
    components: {
      HeaderBar,
      MobileHeader,
      ProfileSidebar
    },

    computed: {
      showFilter() {
        return this.$route.meta.filter;
      },
      specialContainerClass() {
        let cls = this.$store.state.specialContainerClass;
        return [cls ? `skillbox--${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>
