Start progress on subscriptions

src/renderer/components/side-nav/side-nav.vue

@@ -87,7 +87,7 @@
       </div>
       <div
         class="navOption mobileHidden"
-        @click="navigate('about')"
+        @click="navigate('settings/profile')"
       >
         <font-awesome-icon
           icon="info-circle"

src/renderer/router/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Subscriptions from '../views/Subscriptions/Subscriptions.vue'
+import ProfileSettings from '../views/ProfileSettings/ProfileSettings.vue'
+import ProfileEdit from '../views/ProfileEdit/ProfileEdit.vue'
 import Trending from '../views/Trending/Trending.vue'
 import Popular from '../views/Popular/Popular.vue'
 import UserPlaylists from '../views/UserPlaylists/UserPlaylists.vue'
@@ -32,6 +34,30 @@ const router = new Router({
       },
       component: Subscriptions
     },
+    {
+      path: '/settings/profile',
+      meta: {
+        title: 'Profile Settings',
+        icon: 'fa-home'
+      },
+      component: ProfileSettings
+    },
+    {
+      path: '/settings/profile/new',
+      meta: {
+        title: 'New Profile',
+        icon: 'fa-home'
+      },
+      component: ProfileEdit
+    },
+    {
+      path: '/settings/profile/edit/:id',
+      meta: {
+        title: 'Edit Profile',
+        icon: 'fa-home'
+      },
+      component: ProfileEdit
+    },
     {
       path: '/trending',
       meta: {

src/renderer/views/ProfileEdit/ProfileEdit.css

@@ -0,0 +1,15 @@
+.card {
+  width: 85%;
+  margin: 0 auto;
+  margin-bottom: 60px;
+}
+
+.message {
+  color: var(--tertiary-text-color);
+}
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}

src/renderer/views/ProfileEdit/ProfileEdit.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import FtCard from '../../components/ft-card/ft-card.vue'
+import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
+import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
+
+export default Vue.extend({
+  name: 'ProfileEdit',
+  components: {
+    'ft-card': FtCard,
+    'ft-flex-box': FtFlexBox,
+    'ft-element-list': FtElementList
+  },
+  mounted: function () {
+  }
+})

src/renderer/views/ProfileEdit/ProfileEdit.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <ft-card class="card">
+      <h3>{{ $t("Subscriptions.Subscriptions") }}</h3>
+      <ft-flex-box>
+        <p class="message">
+          {{ $t("This part of the app is not ready yet. Come back later when progress has been made.") }}
+        </p>
+      </ft-flex-box>
+    </ft-card>
+  </div>
+</template>
+
+<script src="./ProfileEdit.js" />
+<style scoped src="./ProfileEdit.css" />

src/renderer/views/ProfileSettings/ProfileSettings.css

@@ -0,0 +1,15 @@
+.card {
+  width: 85%;
+  margin: 0 auto;
+  margin-bottom: 60px;
+}
+
+.message {
+  color: var(--tertiary-text-color);
+}
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}

src/renderer/views/ProfileSettings/ProfileSettings.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import FtCard from '../../components/ft-card/ft-card.vue'
+import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
+import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
+
+export default Vue.extend({
+  name: 'ProfileSettings',
+  components: {
+    'ft-card': FtCard,
+    'ft-flex-box': FtFlexBox,
+    'ft-element-list': FtElementList
+  },
+  mounted: function () {
+  }
+})

src/renderer/views/ProfileSettings/ProfileSettings.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <ft-card class="card">
+      <h3>{{ $t("Subscriptions.Subscriptions") }}</h3>
+      <ft-flex-box>
+        <p class="message">
+          {{ $t("This part of the app is not ready yet. Come back later when progress has been made.") }}
+        </p>
+      </ft-flex-box>
+    </ft-card>
+  </div>
+</template>
+
+<script src="./ProfileSettings.js" />
+<style scoped src="./ProfileSettings.css" />