Added Filter and Nav components into main page

src/App.vue

@@ -1,9 +1,6 @@
 <template>
   <div id="app">
-    <div id="nav">
+
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view/>
     <Footer />
   </div>
@@ -24,7 +21,6 @@ export default {
 @import url('../src/global-styles.scss');
 
 #app {
-  margin: 1em;
   .footer {
     text-align: center;
   }

src/views/Home.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="home">
-    <h1>{{title}}</h1>
+    <section class="top-section">
-    <span class="subtitle">{{subtitle}}</span>
+      <div class="heading">
-    <FilterTile @user-is-searchin="searching" />
+        <h1>{{title}}</h1>
+        <span class="subtitle">{{subtitle}}</span>
+      </div>
+      <FilterTile @user-is-searchin="searching" class="filter-container" />
+      <Nav class="nav" />
+    </section>
     <div class="item-group-container">
       <ItemGroup
         v-for="item in items"
@@ -17,6 +22,7 @@
 
 <script>
 
+import Nav from '@/components/Nav.vue'
 import FilterTile from '@/components/FilterTile.vue'
 import ItemGroup from '@/components/ItemGroup.vue'
 import * as linkData from './../data/item-data.json'
@@ -24,6 +30,7 @@ import * as linkData from './../data/item-data.json'
 export default {
   name: 'home',
   components: {
+    Nav,
     FilterTile,
     ItemGroup
   },
@@ -51,24 +58,47 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-h1 {
+
-  background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+section.top-section {
-  background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    margin: 0;
-  -webkit-background-clip: text;
+    padding: 0.5em;
-  -webkit-text-fill-color: transparent;
+    display: flex;
-  font-size: 3em;
+    justify-content: space-between;
-  margin: 0;
+    background: #1f222a7a;
-  display: inline;
+    align-items: center;
+    align-content: flex-start;
+    @media screen and (max-width: 600px) {
+      flex-direction: column;
+      .nav {
+        order: -1;
+      }
+      .filter-container {
+        order: 1;
+      }
+    }
 }
-span.subtitle {
+
-  color: #9F86FF;
+.heading {
-  margin: 10px;
+  display: flex;
-  font-style: italic;
+  flex-direction: column;
-  text-shadow: 1px 1px 2px #130f23;
+  h1 {
+    background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 3em;
+    margin: 0;
+  }
+  span.subtitle {
+    color: #9F86FF;
+    font-style: italic;
+    text-shadow: 1px 1px 2px #130f23;
+  }
 }
+
 .item-group-container {
   display: flex;
-  margin: 2em 0;
+  margin: 2em;
   align-items:flex-start;
   align-content:flex-start;
   .item-group-outer {