Organised components into directories

src/components/PageStrcture/Footer.vue

@@ -0,0 +1,43 @@
+<template>
+  <footer>
+      Developed by <a :href="authorUrl">{{authorName}}</a>.
+      Licensed under <a :href="licenseUrl">{{license}}</a>
+      {{ showCopyright? '©': '' }} {{date}}.
+      Get the <a :href="repoUrl">Source Code</a>.
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  props: {
+    authorName: { type: String, default: 'Alicia Sykes' },
+    authorUrl: { type: String, default: 'https://aliciasykes.com' },
+    license: { type: String, default: 'MIT' },
+    licenseUrl: { type: String, default: 'https://gist.github.com/Lissy93/143d2ee01ccc5c052a17' },
+    date: { type: String, default: `${new Date().getFullYear()}` },
+    showCopyright: { type: Boolean, default: true },
+    repoUrl: { type: String, default: 'https://github.com/lissy93/panel' },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+footer {
+  padding: 0.5rem;
+  text-align: center;
+  color: #5e6474;
+  opacity: 0.5;
+  background: #05070e;
+  margin-top: 1rem;
+}
+
+footer a{
+  color: #5e6474;
+  &:hover {
+    color: #9F86FF;
+  }
+}
+
+</style>

src/components/PageStrcture/Header.vue

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

src/components/PageStrcture/Nav.vue

@@ -0,0 +1,41 @@
+<template>
+    <nav id="nav">
+        <router-link to="/" class="nav-item">Home</router-link>
+        <router-link to="/about" class="nav-item">About</router-link>
+    </nav>
+
+</template>
+
+<script>
+export default {
+  name: 'Nav',
+};
+</script>
+
+<style scoped lang="scss">
+
+nav {
+    display: flex;
+    align-items: center;
+    .nav-item {
+        display: inline-block;
+        padding: 0.75rem 0.5rem;
+        margin: 0.5rem;
+        outline: none;
+        border: none;
+        border-radius: 5px;
+        background: #607d8b33;
+        -webkit-box-shadow: 1px 1px 2px #232323;
+        box-shadow: 1px 1px 2px #232323;
+        color: var(--primary);
+        text-decoration: none;
+        &:hover {
+            background: #607d8b1c;
+            box-shadow: 1px 4px 3px #232323;
+        }
+    }
+    .router-link-active {
+        border: 1px solid var(--primary);
+    }
+}
+</style>

src/components/PageStrcture/PageTitle.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="page-titles">
+    <h1>{{ title }}</h1>
+    <span class="subtitle">{{ description }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageTitle',
+  props: {
+    title: String,
+    description: String,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.page-titles {
+  display: flex;
+  flex-direction: column;
+  h1 {
+    color: var(--primary);
+    // 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: var(--primary-transparent);
+    font-style: italic;
+    text-shadow: 1px 1px 2px #130f23;
+  }
+  @media screen and (max-width: 600px) {
+    text-align: center;
+    padding: 0.25rem 0;
+  }
+}
+</style>