chore: Refactor index.vue to improve menu rendering

Author: tacxou

src/pages/index.vue

@@ -1,19 +1,25 @@
 <template lang="pug">
-q-page.container
-  div.q-pa-md(v-for="part in menuParts", :key="part")
-    q-separator.q-my-sm-md
-    div.text-h5.q-my-md {{ part }}
+q-page.q-px-md(style="margin: auto; max-width: 1366px;")
+  .column.no-wrap
+    div(v-for="(part, i) in menuParts", :key="part")
+      q-bar.q-pa-lg.q-mb-sm.transparent(dense)
+        .text-h5 {{ part }}
 
-    div.row.q-gutter-md
-      q-btn(v-for="item in getMenuByPart(part)" :key="item.label"
-        tile :color="item.color"
-        class="col-xs-12 col-sm-6 col-md-6 col-lg-4"
-        :label="item.label"
-        @click="push(item.path)"
-        :icon="item.icon"
-        style="height: 60px; font-size: 18px; width:20%;" )
-          q-badge(v-if="item.badgeValue" :color="item.badge.color" floating) {{ item.badge.value }}
-      //- span(v-for="item in getMenuByPart(part)" :key="item.label") {{ item }}
+      .row.q-col-gutter-md
+        div.col(
+          v-for="item in getMenuByPart(part)" :key="item.label"
+          class="col-12 col-sm-6 col-md-6 col-lg-4"
+        )
+          q-btn.q-py-md.fit(
+            :color="item.color"
+            :label="item.label"
+            @click="push(item.path)"
+            :icon="item.icon"
+            style="font-size: 18px;"
+            tile
+          )
+            q-badge(v-if="item.badgeValue" :color="item.badge.color" floating v-text="item?.badge?.value")
+      q-separator.q-mt-md.q-mb-sm(v-if="i < menuParts.length - 1")
 </template>
 
 <script lang="ts" setup>