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">
+    <section class="top-section">
+      <div class="heading">
         <h1>{{title}}</h1>
         <span class="subtitle">{{subtitle}}</span>
-    <FilterTile @user-is-searchin="searching" />
+      </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,6 +58,29 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+section.top-section {
+    margin: 0;
+    padding: 0.5em;
+    display: flex;
+    justify-content: space-between;
+    background: #1f222a7a;
+    align-items: center;
+    align-content: flex-start;
+    @media screen and (max-width: 600px) {
+      flex-direction: column;
+      .nav {
+        order: -1;
+      }
+      .filter-container {
+        order: 1;
+      }
+    }
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
   h1 {
     background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
     background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
@@ -58,17 +88,17 @@ h1 {
     -webkit-text-fill-color: transparent;
     font-size: 3em;
     margin: 0;
-  display: inline;
   }
   span.subtitle {
     color: #9F86FF;
-  margin: 10px;
     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 {