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>