improve(pages): turn sidebar pages into links

Author: gustavotoyota

apps/client/src/App.vue

@@ -144,6 +144,10 @@ html {
   isolation: isolate;
 }
 
+a {
+  text-decoration: none;
+}
+
 h1,
 h2,
 h3 {

apps/client/src/components/PageItem.vue

@@ -1,23 +1,35 @@
 <template>
-  <q-item
-    :data-page-id="pageId"
-    clickable
-    active-class="bg-grey-9"
-    v-ripple
-    @click="
-      internals.pages.goToPage(pageId, {
-        openInNewTab: ($event as MouseEvent).ctrlKey,
-      })
-    "
+  <a
+    :href="`/pages/${pageId}`"
+    @click.prevent.stop
   >
-    <PageItemContent
-      :icon="icon"
-      :page-id="pageId"
-      :prefer="prefer"
-    />
-  </q-item>
+    <q-item
+      v-bind="$attrs"
+      :data-page-id="pageId"
+      clickable
+      active-class="bg-grey-9"
+      v-ripple
+      @click="
+        internals.pages.goToPage(pageId, {
+          openInNewTab: ($event as MouseEvent).ctrlKey,
+        })
+      "
+    >
+      <PageItemContent
+        :icon="icon"
+        :page-id="pageId"
+        :prefer="prefer"
+      />
+    </q-item>
+  </a>
 </template>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script setup lang="ts">
 defineProps<{
   icon: boolean;