Add state variables, actions and mutations

client/src/App.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="container skillbox">
+  <div class="container skillbox" :class="specialContainerClass">
     <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>
+      <user-widget></user-widget>
+      <filter-bar v-if="showFilter"></filter-bar>
     </header>
     <router-view></router-view>
     <footer class="skillbox__footer">Footer</footer>
@@ -13,7 +13,7 @@
 
 <script>
   import TopNavigation from '@/components/TopNavigation.vue';
-  import Profile from '@/components/Profile.vue';
+  import UserWidget from '@/components/UserWidget.vue';
   import FilterBar from '@/components/FilterBar.vue';
 
   export default {
@@ -21,12 +21,24 @@
 
     components: {
       TopNavigation,
-      Profile,
+      UserWidget,
       FilterBar
     },
 
+    computed: {
+      showFilter() {
+        return this.$store.state.showFilter
+      },
+      specialContainerClass() {
+        let cls = this.$store.state.specialContainerClass;
+        return cls ? `skillbox--${cls}` : ''
+      }
+    },
+
     data() {
-      return {}
+      return {
+
+      }
     },
 
     mounted() {
@@ -40,19 +52,23 @@
   .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";
 
+    &--red { // todo: define a better name when usage is clear
+      background-color: $red;
+    }
+
     &__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;
+      background-color: $color-white;
+      grid-auto-rows: 60px;
 
       grid-template-columns: auto 1fr auto;
     }

client/src/store/index.js

@@ -7,13 +7,30 @@ export default new Vuex.Store({
   modules: {},
 
   state: {
-    userid: null,
-    username: null
+    specialContainerClass: '',
+    showFilter: true
   },
 
   getters: {},
 
-  actions: {},
+  actions: {
+    hideFilter({commit}) {
+      commit('setFilter', false)
+    },
+    showFilter({commit}) {
+      commit('setFilter', true)
+    },
+    setSpecialContainerClass({commit}, payload) {
+      commit('setSpecialContainerClass', payload);
+    }
+  },
 
-  mutations: {}
+  mutations: {
+    setFilter(state, payload) {
+      state.showFilter = payload;
+    },
+    setSpecialContainerClass(state, payload) {
+      state.specialContainerClass = payload;
+    }
+  }
 })