update feedback page

src/layouts/MainLayout.vue

@@ -80,7 +80,7 @@
           </q-item>
          
 
-          <q-item v-for="link in links3" :key="link.text" v-ripple clickable>
+          <q-item v-for="link in links3" :key="link.text" v-ripple clickable :to="link.url">
             <q-item-section avatar>
               <q-icon color="grey" :name="link.icon" />
             </q-item-section>
@@ -91,7 +91,7 @@
 
           <q-separator class="q-my-md" />
 
-          <q-item v-for="link in links4" :key="link.text" v-ripple clickable>
+          <q-item v-for="link in links4" :key="link.text" v-ripple clickable :to="link.url">
             <q-item-section avatar>
               <q-icon color="grey" :name="link.icon" />
             </q-item-section>
@@ -170,7 +170,7 @@ export default {
       links4: [
         { icon: 'settings', text: 'Settings' },
         { icon: 'help', text: 'Help' },
-        { icon: 'feedback', text: 'Send feedback' }
+        { icon: 'feedback', text: 'Send feedback', url: 'feedback' }
       ],
       buttons1: [
         { text: 'About' },

src/pages/feedbackform.vue

+<template>
+  <q-page padding>
+    <div class="q-pa-md">
+      <q-card class="my-card">
+        <img src="https://www.viewsonic.com/library/wp-content/uploads/2019/08/Feedback-1.jpg">
+
+        <q-card-section>
+          <div class="text-h6">Feedback Form</div>
+          <div class="text-subtitle2">Your Feedback matter to us. Please fill in required information.</div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <q-form
+            @submit="onSubmit"
+            @reset="onReset"
+            class="q-gutter-md"
+          >
+            <q-input dense filled v-model="email" type="email" suffix="@uitm.edu.my">
+              <template v-slot:before>
+                <q-icon name="mail" />
+              </template>
+            </q-input>
+            <q-input
+              filled
+              dense
+              v-model="name"
+              label="Your name"
+              lazy-rules
+            />
+            <q-input
+              v-model="feedbackinput"
+              filled
+              label="Your feedback"
+              type="textarea"
+            />
+            <div>
+              <q-btn label="Submit Feedback" type="submit" color="red"/>
+              <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
+            </div>
+          </q-form>
+        </q-card-section>
+      </q-card>
+    </div>
+  </q-page>
+</template>
+
+<script>
+export default {
+  // name: 'PageName',
+  data () {
+      return {
+        email: '',
+        name: '',
+        feedbackinput: ''
+      }
+  },
+  methods: {
+    onSubmit: function (event) {
+      this.$q.notify({
+        message: 'Your feedback was successfully submitted.',
+        icon: 'check',
+        color: 'green'
+      })
+    },
+    onReset: function (event) {
+      this.email = ''
+      this.name=''
+      this.feedbackinput=''
+    }
+  }
+}
+</script>

src/router/routes.js

@@ -9,7 +9,8 @@ const routes = [
       { path: 'contact-us', component: () => import('pages/contactus.vue') },
       { path: 'my-account', component: () => import('pages/myaccount.vue') },
       { path: 'fines', component: () => import('pages/fine.vue') },
-      { path: 'borrowing-history', component: () => import('pages/borrow.vue') }
+      { path: 'borrowing-history', component: () => import('pages/borrow.vue') },
+      { path: 'feedback', component: () => import('pages/feedbackform.vue') }
 
     ]
   },