Refactored Navbar into seperate files

src/components/Header.vue

@@ -0,0 +1,33 @@
+<template>
+    <header>
+      <PageTitle />
+      <Nav class="nav"/>
+    </header>
+</template>
+
+<script>
+import PageTitle from '@/components/PageTitle.vue'
+import Nav from '@/components/Nav.vue'
+export default {
+  name: 'Header',
+  components: {
+    PageTitle,
+    Nav
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  header {
+    margin: 0;
+    padding: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    background: #282a32;
+    align-items: center;
+    align-content: flex-start;
+    @media screen and (max-width: 600px) {
+      flex-direction: column-reverse;
+    }
+  }
+</style>

src/components/PageTitle.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="page-titles">
+    <h1>Pannel</h1>
+    <span class="subtitle">Awesome subtitle</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageTitle'
+}
+</script>
+
+<style scoped lang="scss">
+.page-titles {
+  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);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 3rem;
+    margin: 0;
+  }
+  span.subtitle {
+    color: #9F86FF;
+    font-style: italic;
+    text-shadow: 1px 1px 2px #130f23;
+  }
+  @media screen and (max-width: 600px) {
+    text-align: center;
+    padding: 0.25rem 0;
+  }
+}
+</style>

src/views/Home.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="home">
-    <section class="top-section">
+    <Header />
-      <div class="heading">
-        <h1>{{title}}</h1>
-        <span class="subtitle">{{subtitle}}</span>
-      </div>
-      <Nav class="nav" />
-    </section>
     <FilterTile @user-is-searchin="searching" class="filter-container" />
 
     <div class="item-group-container">
@@ -23,7 +17,7 @@
 
 <script>
 
-import Nav from '@/components/Nav.vue'
+import Header from '@/components/Header.vue'
 import FilterTile from '@/components/FilterTile.vue'
 import ItemGroup from '@/components/ItemGroup.vue'
 import * as linkData from './../data/item-data.json'
@@ -31,7 +25,7 @@ import * as linkData from './../data/item-data.json'
 export default {
   name: 'home',
   components: {
-    Nav,
+    Header,
     FilterTile,
     ItemGroup
   },
@@ -65,41 +59,6 @@ export default {
   padding-bottom: 1px;
 }
 
-section.top-section {
-    margin: 0;
-    padding: 0.5rem;
-    display: flex;
-    justify-content: space-between;
-    background: #282a32;
-    align-items: center;
-    align-content: flex-start;
-    @media screen and (max-width: 600px) {
-      flex-direction: column-reverse;
-    }
-}
-
-.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);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-size: 3rem;
-    margin: 0;
-  }
-  span.subtitle {
-    color: #9F86FF;
-    font-style: italic;
-    text-shadow: 1px 1px 2px #130f23;
-  }
-  @media screen and (max-width: 600px) {
-    text-align: center;
-    padding: 0.25rem 0;
-  }
-}
-
 .item-group-container {
   display: flex;
   margin: 2rem;