15.09 Add a More Section and a Help Page

src/pages/PageHelp.vue

@@ -0,0 +1,27 @@
+<template>
+  <q-page padding>
+    <q-btn
+      v-go-back="'/settings'"
+      color="primary"
+      icon="chevron_left"
+      label="back"
+      flat
+    />
+    <h5>How to use Awesome Todo</h5>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+      Hic autem cupiditate quisquam fugiat? Voluptas ea modi
+      aspernatur in, non ipsum ratione incidunt quaerat
+      provident veritatis, tempora rerum maiores? Nemo,
+      suscipit?</p>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'Help'
+}
+</script>
+
+<style>
+
+</style>

src/pages/PageSettings.vue

@@ -1,6 +1,10 @@
 <template>
   <q-page padding>
-    <q-list bordered padding>
+    <q-list
+      class="q-mb-md"
+      bordered
+      padding
+    >
       <q-item-label header>Settings</q-item-label>
 
       <q-item tag="label" v-ripple>
@@ -26,7 +30,23 @@
           />
         </q-item-section>
       </q-item>
+    </q-list>
 
+    <q-list bordered padding>
+      <q-item-label header>More</q-item-label>
+
+      <q-item
+        to="/settings/help"
+        tag="label"
+        v-ripple
+      >
+        <q-item-section>
+          <q-item-label>Help</q-item-label>
+        </q-item-section>
+        <q-item-section side >
+          <q-icon name="chevron_right" />
+        </q-item-section>
+      </q-item>
     </q-list>
   </q-page>
 </template>
@@ -51,7 +71,7 @@ export default {
         return this.settings.showTasksInOnelist
       },
       set (value) {
-        this.setShowTasksInOnelist(value)
+        this.setshowTasksInOnelist(value)
       }
     }
   },

src/router/routes.js

@@ -11,6 +11,10 @@ const routes = [
       {
         path: '/settings',
         component: () => import('pages/PageSettings.vue')
+      },
+      {
+        path: '/settings/help',
+        component: () => import('pages/PageHelp.vue')
       }
     ]
   },