list and menú

src/layouts/MainLayout.vue

@@ -7,7 +7,26 @@
           {{ store.user ? store.user.email : '' }}
         </q-toolbar-title>
 
-        <div><q-btn color="secondary" @click="logout">Logout</q-btn></div>
+        <div>
+          <div class="q-pa-md">
+            <div class="q-gutter-md">
+
+              <q-btn color="secondary" label="Menú">
+                <q-menu>
+                  <q-list style="min-width: 100px">
+                    <q-item clickable v-close-popup @click="newLista" v-if="router.currentRoute.value.path">
+                      <q-item-section>Nueva Lista</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item clickable v-close-popup @click="logout">
+                      <q-item-section>Logout</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </div>
+        </div>
       </q-toolbar>
     </q-header>
 
@@ -38,6 +57,9 @@ const logout = async () => {
       alert(error.message)
     }
   }
+}
 
+const newLista = () => {
+  console.log(router.currentRoute.value.path)
 }
 </script>

src/pages/IndexPage.vue

@@ -1,8 +1,31 @@
 <template>
-  <div class="q-pa-md">
+  <div class="bg-blue-grey window-height window-width row justify-center items-center">
     <q-infinite-scroll @load="onLoad" :offset="250">
       <div v-for="(lista, index) in arraylistas" :key="index" class="caption">
-        {{ lista }}
+        <div class="q-pa-md row items-start q-gutter-md">
+          <q-card class="my-card text-white"
+            :class="store.user?.email === lista.email_owner ? 'bg-secondary' : 'bg-green-7'">
+            <q-card-section>
+              <div class="text-h5">{{ lista.nombre }}</div>
+              <div class="text-subtitle1">{{ lista.email_owner }}</div>
+            </q-card-section>
+
+            <q-card-section>
+              Compartido con:
+              <span v-if="lista.profiles.length === 0">Nadie</span>
+              <span v-for="(profile, index) in lista.profiles" :key="index">
+                {{ profile.email }}
+              </span>
+            </q-card-section>
+
+            <q-separator dark />
+
+            <q-card-actions>
+              <q-btn flat>Action 1</q-btn>
+              <q-btn flat>Action 2</q-btn>
+            </q-card-actions>
+          </q-card>
+        </div>
       </div>
       <template v-slot:loading>
         <div class="row justify-center q-my-md">
@@ -17,9 +40,11 @@
 import useSupabase from '../boot/supabase'
 import { useQuasar } from 'quasar'
 import { onMounted } from 'vue'
+import { supabaseStore } from '../stores/supabaseStore'
 
 const { supabase } = useSupabase()
 const $q = useQuasar()
+const store = supabaseStore()
 
 let arraylistas = []