add page myaccount

src/css/app.css

 /* app global css */
+.waqfs-exact-active {
+    color: red;
+}
+
+.q-item.q-router-link--active, .q-item--active {
+    color: white;
+    background-color: purple;
+}
\ No newline at end of file

src/layouts/MainLayout.vue

@@ -57,7 +57,7 @@
     >
       <q-scroll-area class="fit">
         <q-list padding>
-          <q-item v-for="link in links1" :key="link.text" v-ripple clickable>
+          <q-item exact v-for="link in links1" :key="link.text" v-ripple clickable :to="link.url">
             <q-item-section avatar>
               <q-icon color="grey" :name="link.icon" />
             </q-item-section>
@@ -70,7 +70,7 @@
           <q-item-label header class="text-weight-bold text-uppercase">
             MORE ABOUT US
           </q-item-label>
-          <q-item v-for="link in links2" :key="link.text" v-ripple clickable>
+          <q-item exact v-for="link in links2" :key="link.text" v-ripple clickable :to="link.url">
             <q-item-section avatar>
               <q-icon color="grey" :name="link.icon" />
             </q-item-section>
@@ -145,12 +145,11 @@ export default {
       leftDrawerOpen: false,
       search: '',
       links1: [
-        { icon: 'home', text: 'Home' },
-        { icon: 'subscriptions', text: 'My Account' },
-
+        { icon: 'home', text: 'Home', url: '/' },
+        { icon: 'subscriptions', text: 'My Account', url: 'my-account' },
       ],
       links2: [
-        { icon: 'phone', text: 'Contact Us' },
+        { icon: 'phone', text: 'Contact Us', url: 'contact-us' },
       ],
       links3: [
 

src/pages/myaccount.vue

+<template>
+  <q-page padding>
+    <div class="q-pa-md">
+      <q-banner dense inline-actions class="text-white bg-blue">
+        My Account
+      </q-banner>
+      <q-list bordered separator>
+        <q-item v-for="link in ls" :key="link.txtname" clickable v-ripple :to="link.url">
+          <q-item-section avatar>
+            <q-avatar color="blue" text-color="white" :icon="link.icon" />
+          </q-item-section>
+          <q-item-section>
+            {{link.name}}
+            <q-item-label caption lines="2">{{link.txt}}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </div>
+  </q-page>
+</template>
+
+<script>
+export default {
+  name: 'PageName',
+  data () {
+    return { 
+      ls: [
+        {
+          icon: "library_books", 
+          name:"Borrowing Status", 
+          txt: "Check book that currently on your loan", 
+          url:"borrowing-status"
+        },
+        {
+          icon: "paid", 
+          name:"Fines", 
+          txt: "Check fine here. Pay...", 
+          url:"fines"
+        },
+        {
+          icon: "menu_book", 
+          name:"Borrowing History", 
+          txt: "Track your loan status. Get your book and checkout", 
+          url:"borrowing-history"
+        },
+        {
+          icon: "add", 
+          name:"Book Renewal", 
+          txt: "Track your loan status. Get your book and checkout", 
+          url:"borrowing-history"
+        },
+        {
+          icon: "info", 
+          name:"Info Literacy", 
+          txt: "Track your loan status. Get your book and checkout", 
+          url:"borrowing-history"
+        }
+      ]
+    }
+  }
+}
+</script>

src/router/routes.js

@@ -6,7 +6,8 @@ const routes = [
     children: [
       { path: '', component: () => import('pages/Index.vue') },
       { path: 'home', component: () => import('pages/azrulpage.vue') },
-      { path: 'contact-us', component: () => import('pages/contactus.vue') }
+      { path: 'contact-us', component: () => import('pages/contactus.vue') },
+      { path: 'my-account', component: () => import('pages/myaccount.vue') }
     ]
   },