temp layout

components/TransactionList.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-list :items="items"></v-list>
+</template>
+<script lang="ts" setup>
+let items = [
+        { type: 'subheader', title: 'Group #1' },
+        {
+          title: 'Item #1',
+          value: 1,
+        },
+        {
+          title: 'Item #2',
+          value: 2,
+        },
+        {
+          title: 'Item #3',
+          value: 3,
+        },
+        { type: 'divider' },
+        { type: 'subheader', title: 'Group #2' },
+        {
+          title: 'Item #4',
+          value: 4,
+        },
+        {
+          title: 'Item #5',
+          value: 5,
+        },
+        {
+          title: 'Item #6',
+          value: 6,
+        },
+      ];
+    
+</script>

layouts/desktop.vue

@@ -1,10 +1,16 @@
 <template>
-  <v-layout class="rounded rounded-md">
+  <!-- <v-layout class=""> -->
   <!-- <p>desktop layout</p> -->
+  <div>
     <DesktopSideBar />
-    <v-app-bar><slot name="app-bar-container"></slot></v-app-bar>
-    <v-main class="d-flex align-center justify-center" style="min-height: 300px;">
+    <v-app-bar flat>
+      <slot name="app-bar-container"></slot>
+    </v-app-bar>
+    <v-main class="bg-grey-lighten-4">
+      <v-container>
         <slot />
+      </v-container>
     </v-main>
-    </v-layout>
+  </div>
+  <!-- </v-layout> -->
 </template>

pages/desktop/transaction.vue

@@ -4,7 +4,9 @@
       <template #app-bar-container>
         <v-app-bar-title>Transactions</v-app-bar-title>
       </template>
-      Transaction Page
+      <v-card>
+        <transaction-list></transaction-list>
+      </v-card>
     </NuxtLayout>
   </div>
 </template>