.cardsActive -> &Active in sass, rename variable names

components/Card.vue

@@ -16,10 +16,6 @@ export default {
 
 
 <style lang="scss" scoped>
-.cardActive {
-    box-shadow:inset 0px 0px 0px 3px #08e5ff;
-  }
-
 .card {
   background: #2D3748;
   border-radius: .3rem;
@@ -29,6 +25,10 @@ export default {
   flex-direction: column;
   position: relative;
 
+  &Active {
+    box-shadow:inset 0px 0px 0px 3px #08e5ff;
+  }
+
   &--reference {
     cursor: pointer;
   }

components/Sidebar.vue

@@ -4,9 +4,9 @@
       template(v-for='category in categories')
         //- nuxt-link(:to='$i18n.path(category.slug)') {{ category.title }}
         nuxt-link(:to='category.slug') {{ category.title }}
-      div(class="toggleWrapper" @click="toggleCardsShown")
+      div(class="toggleWrapper" @click="toggleCardsVisible")
-        div(class="viewToggle" :class="{active: cardsShown}") Cards
+        div(class="viewToggle" :class="{active: areCardsVisible}") Cards
-        div(class="viewToggle" :class="{active: !cardsShown}") Table
+        div(class="viewToggle" :class="{active: !areCardsVisible}") Table
 </template>
 
 <script>
@@ -19,8 +19,8 @@ export default {
     };
   },
   computed: {
-    cardsShown() {
+    areCardsVisible() {
-      return this.$store.getters['Sidebar/isCardsShown']
+      return this.$store.getters['Sidebar/areCardsVisible']
     }
   },
   created() {
@@ -28,7 +28,7 @@ export default {
   },
   methods: {
     ...mapMutations({
-      toggleCardsShown: "Sidebar/toggleCardsShown"
+      toggleCardsVisible: "Sidebar/toggleCardsVisible"
     })
   }
 };

pages/_category.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
   div
     h1 {{ category.title }}
-    .cards(v-if="cardsShown")
+    .cards(v-if="areCardsVisible")
       template(v-for='resource in category.resources' )
         Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.title')
-    table(v-if="!cardsShown")
+    table(v-if="!areCardsVisible")
       TableHead(:title="'Welcome'" :desc="'Description'" :url="'URL'")
       template(v-for='resource in category.resources' )
         TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.title')
@@ -24,8 +24,8 @@ export default {
     };
   },
   computed: {
-    cardsShown() {
+    areCardsVisible() {
-      return this.$store.getters['Sidebar/isCardsShown']
+      return this.$store.getters['Sidebar/areCardsVisible']
     },
     category() {
       const category = this.$store.getters['data/sortByTitle'](this.categoryRouteTitle)

store/Sidebar.js

@@ -1,14 +1,14 @@
 export const state = () => ({
-  cardsShown: true
+  areCardsVisible: true
 })
 
 export const getters = {
-  isCardsShown: state => state.cardsShown
+  areCardsVisible: state => state.areCardsVisible
 }
 
 export const mutations = {
-  toggleCardsShown(state) {
+  toggleCardsVisible(state) {
-    if (process.browser) localStorage.setItem('cardsShown', !state.cardsShown)
+    if (process.browser) localStorage.setItem('areCardsVisible', !state.areCardsVisible)
-    state.cardsShown = !state.cardsShown
+    state.areCardsVisible = !state.areCardsVisible
   }
 }