From bef23326211f80135268a9b913a10884064e8b00 Mon Sep 17 00:00:00 2001
From: rca <nem@nem.x0.to>
Date: Sun, 21 Jul 2024 13:56:00 +0900
Subject: [PATCH] chatgpt test1

---
 src/pages/IndexPage.vue | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index bbf6c37..081e882 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -5,15 +5,46 @@
         <div class="text-h6">タスク一覧</div>
       </q-card-section>
       <q-card-section>
-        <TaskList />
+        <q-tabs
+          v-if="isMobile"
+          class="text-grey-8"
+          active-color="primary"
+          indicator-color="primary"
+          v-model="tab"
+        >
+          <q-tab name="tab1" label="Tab 1" />
+          <q-tab name="tab2" label="Tab 2" />
+          <q-tab name="tab3" label="Tab 3" />
+        </q-tabs>
+
+        <q-tab-panels v-else v-model="tab" animated>
+          <q-tab-panel name="tab1">
+            <TaskList />
+          </q-tab-panel>
+          <q-tab-panel name="tab2">
+            <!-- 他のコンテンツ -->
+          </q-tab-panel>
+          <q-tab-panel name="tab3">
+            <!-- 他のコンテンツ -->
+          </q-tab-panel>
+        </q-tab-panels>
       </q-card-section>
     </q-card>
   </q-page>
 </template>
 
 <script setup>
+import { ref, computed } from 'vue';
 import TaskList from 'components/TaskListComponent.vue';
+
+const tab = ref('tab1');
+
+const isMobile = computed(() => {
+  return window.innerWidth < 600; // 600px以下をモバイルデバイスとする
+});
 </script>
 
 <style scoped>
+/* 必要に応じてカスタムスタイルを追加 */
 </style>
+