Added styling and gympage.

gymboard-app/src/css/quasar.variables.scss

@@ -12,14 +12,14 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary   : #1976D2;
+$primary   : #171717;
-$secondary : #26A69A;
+$secondary : #575757;
-$accent    : #9C27B0;
+$accent    : #b60600;
 
 $dark      : #1D1D1D;
 $dark-page : #121212;
 
-$positive  : #21BA45;
+$positive  : #41b65c;
-$negative  : #C10015;
+$negative  : #c0293b;
-$info      : #31CCEC;
+$info      : #8bcfdd;
-$warning   : #F2C037;
+$warning   : #eccb70;

gymboard-app/src/layouts/MainLayout.vue

@@ -12,10 +12,8 @@
         />
 
         <q-toolbar-title>
-          Quasar App
+          <router-link to="/" style="text-decoration: none; color: inherit;">Gymboard</router-link>
         </q-toolbar-title>
-
-        <div>Quasar v{{ $q.version }}</div>
       </q-toolbar>
     </q-header>
 
@@ -28,14 +26,10 @@
         <q-item-label
           header
         >
-          Essential Links
+          Pages
         </q-item-label>
-
+        <q-item clickable>First Page</q-item>
-        <EssentialLink
+        <q-item clickable>Second Page</q-item>
-          v-for="link in essentialLinks"
-          :key="link.title"
-          v-bind="link"
-        />
       </q-list>
     </q-drawer>
 
@@ -47,65 +41,14 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import EssentialLink from 'components/EssentialLink.vue';
-
-const linksList = [
-  {
-    title: 'Docs',
-    caption: 'quasar.dev',
-    icon: 'school',
-    link: 'https://quasar.dev'
-  },
-  {
-    title: 'Github',
-    caption: 'github.com/quasarframework',
-    icon: 'code',
-    link: 'https://github.com/quasarframework'
-  },
-  {
-    title: 'Discord Chat Channel',
-    caption: 'chat.quasar.dev',
-    icon: 'chat',
-    link: 'https://chat.quasar.dev'
-  },
-  {
-    title: 'Forum',
-    caption: 'forum.quasar.dev',
-    icon: 'record_voice_over',
-    link: 'https://forum.quasar.dev'
-  },
-  {
-    title: 'Twitter',
-    caption: '@quasarframework',
-    icon: 'rss_feed',
-    link: 'https://twitter.quasar.dev'
-  },
-  {
-    title: 'Facebook',
-    caption: '@QuasarFramework',
-    icon: 'public',
-    link: 'https://facebook.quasar.dev'
-  },
-  {
-    title: 'Quasar Awesome',
-    caption: 'Community Quasar projects',
-    icon: 'favorite',
-    link: 'https://awesome.quasar.dev'
-  }
-];
 
 export default defineComponent({
   name: 'MainLayout',
 
-  components: {
-    EssentialLink
-  },
-
   setup () {
     const leftDrawerOpen = ref(false)
 
     return {
-      essentialLinks: linksList,
       leftDrawerOpen,
       toggleLeftDrawer () {
         leftDrawerOpen.value = !leftDrawerOpen.value

gymboard-app/src/pages/GymPage.vue

@@ -0,0 +1,16 @@
+<template>
+  <q-page>
+    Hello Gym Page
+  </q-page>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'GymPage',
+    setup() {
+        return {};
+    }
+});
+</script>

gymboard-app/src/pages/IndexPage.vue

@@ -1,49 +1,17 @@
 <template>
-  <q-page class="row items-center justify-evenly">
+  <q-page>
-    <example-component
+    Index
-      title="Example component"
+    <router-link to="/gyms/a">Test</router-link>
-      active
-      :todos="todos"
-      :meta="meta"
-    ></example-component>
   </q-page>
 </template>
 
 <script lang="ts">
-import { Todo, Meta } from 'components/models';
+import { defineComponent } from 'vue';
-import ExampleComponent from 'components/ExampleComponent.vue';
-import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   name: 'IndexPage',
-  components: { ExampleComponent },
   setup () {
-    const todos = ref<Todo[]>([
+    return {};
-      {
-        id: 1,
-        content: 'ct1'
-      },
-      {
-        id: 2,
-        content: 'ct2'
-      },
-      {
-        id: 3,
-        content: 'ct3'
-      },
-      {
-        id: 4,
-        content: 'ct4'
-      },
-      {
-        id: 5,
-        content: 'ct5'
-      }
-    ]);
-    const meta = ref<Meta>({
-      totalCount: 1200
-    });
-    return { todos, meta };
   }
 });
 </script>

gymboard-app/src/router/routes.ts

@@ -1,10 +1,22 @@
 import { RouteRecordRaw } from 'vue-router';
+import MainLayout from 'layouts/MainLayout.vue';
+import IndexPage from 'pages/IndexPage.vue';
+import GymPage from 'pages/GymPage.vue';
 
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    component: () => import('layouts/MainLayout.vue'),
+    component: MainLayout,
-    children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
+    children: [
+      {
+        path: '',
+        component: IndexPage
+      },
+      {
+        path: 'gyms/:id',
+        component: GymPage
+      }
+    ],
   },
 
   // Always leave this as last one,