<template>
  <div class="container skillbox">
    <header class="header skillbox__header">
      <top-navigation></top-navigation>
      <router-link to="/" class="skillbox__header-logo">skillbox</router-link>
      <profile></profile>
      <filter-bar></filter-bar>
    </header>
    <router-view></router-view>
    <footer class="skillbox__footer">Footer</footer>
  </div>
</template>

<script>
  import TopNavigation from '@/components/TopNavigation.vue';
  import Profile from '@/components/Profile.vue';
  import FilterBar from '@/components/FilterBar.vue';

  export default {
    name: 'App',

    components: {
      TopNavigation,
      Profile,
      FilterBar
    },

    data() {
      return {}
    },

    mounted() {
    }
  }
</script>

<style lang="scss">
  @import "styles/main.scss";

  .skillbox {
    margin: 0 auto;
    width: 100%;
    //max-width: 1440px;
    display: grid;
    grid-template-rows: auto 1fr 50px;
    grid-row-gap: 32px;
    min-height: 100vh;
    grid-template-areas: "h" "c" "f";

    &__header {
      grid-area: h;
      box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
      display: grid;
      align-items: center;
      justify-content: space-around;

      grid-template-columns: auto 1fr auto;
    }

    &__header-logo {
      color: #17A887;
      font-size: 36px;
      font-weight: 800;
      font-family: $sans-serif-font-family;
      display: flex;
      justify-self: center;
    }

    &__footer {
      grid-area: f;
      display: none;
    }
  }
</style>
