From 8bd232d66557511bdac4b7c7185ecc78b5181e52 Mon Sep 17 00:00:00 2001
From: Erin <erin@atomicbear.com>
Date: Thu, 25 Jul 2019 22:00:24 -0500
Subject: [PATCH 1/3] Making better toggle

---
 components/Sidebar.vue | 4 +++-
 pages/_category.vue    | 1 -
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 2526a72..4428e5b 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -3,7 +3,9 @@
     .sidebar
       template(v-for='category in categories')
         nuxt-link(:to='category.slug') {{ category.title }}
-      input(type='checkbox' :checked='cardsShown' @change="toggleCardsShown()")
+      div(@click="toggleCardsShown")
+        div(class="viewToggle" :class="{active: cardsShown}") Cards
+        div(class="viewToggle" :class="{active: !cardsShown}") Table
 </template>
 
 <script>
diff --git a/pages/_category.vue b/pages/_category.vue
index 2f06ca9..22e2948 100644
--- a/pages/_category.vue
+++ b/pages/_category.vue
@@ -21,7 +21,6 @@ export default {
     return {
       categoryRouteTitle: this.$route.params.category,
       categories: store
-      // cardsShown: store.cardsShown,
     };
   },
   computed: {

From 3c5279a53ca41d67781d157d5ee806e19e404815 Mon Sep 17 00:00:00 2001
From: Erin <erin@atomicbear.com>
Date: Thu, 25 Jul 2019 22:06:45 -0500
Subject: [PATCH 2/3] Adding super-basic styling

---
 components/Sidebar.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 4428e5b..50cafbd 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -44,6 +44,15 @@ export default {
     padding: 0.5rem 1rem 0.5rem 1rem;
     font-weight: 600;
   }
+	.viewToggle {
+		background-color: yellow;
+		border: 3px;
+		border-style: solid;
+
+	}
+	.active {
+		background-color: green;
+	}
 }
 
 @media (max-width: 400px) {

From 394fdeb6aa0caa6ea0fac7dfc0d507fd9fa8d51a Mon Sep 17 00:00:00 2001
From: Erin <erin@atomicbear.com>
Date: Fri, 26 Jul 2019 06:06:55 -0500
Subject: [PATCH 3/3] toggle styling done

---
 components/Sidebar.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 50cafbd..68983aa 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -3,7 +3,7 @@
     .sidebar
       template(v-for='category in categories')
         nuxt-link(:to='category.slug') {{ category.title }}
-      div(@click="toggleCardsShown")
+      div(class="toggleWrapper" @click="toggleCardsShown")
         div(class="viewToggle" :class="{active: cardsShown}") Cards
         div(class="viewToggle" :class="{active: !cardsShown}") Table
 </template>
@@ -44,14 +44,23 @@ export default {
     padding: 0.5rem 1rem 0.5rem 1rem;
     font-weight: 600;
   }
-	.viewToggle {
-		background-color: yellow;
+	.toggleWrapper {
+		display: grid;
+  	grid-template-columns: 1fr 1fr;
+		width: min-content;
 		border: 3px;
+		border-color: #08e5ff;
 		border-style: solid;
-
+		border-radius: .5rem;
+		overflow:hidden;
+	}
+	.viewToggle {
+		padding: 0 .2rem;
+		color: #008190;
 	}
 	.active {
-		background-color: green;
+		background-color: #08e5ff;
+		color: #232331;
 	}
 }