From 62c70bcf228c4c35f99bfaae61198df5fc60c17d Mon Sep 17 00:00:00 2001
From: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Date: Tue, 7 Jan 2025 19:48:57 +0800
Subject: [PATCH] feat: btm-nav for mobile

---
 index.html             |  2 +-
 src/views/HomePage.vue | 33 ++++++++++++---------------------
 2 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 4b37e8b4..d01c7657 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <title>zashboard</title>
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0"
+      content="width=device-width, initial-scale=1.0,viewport-fit=cover"
     />
     <meta
       name="description"
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 00ae027b..5511ab71 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -23,28 +23,19 @@
       <div :class="`${isPWA ? 'h-20' : 'h-12'} shrink-0 md:hidden`"></div>
       <div
         ref="navBarRef"
-        :class="`fixed bottom-0 z-30 w-full bg-base-200 md:hidden ${isPWA ? 'h-20 pb-8' : 'h-12'}`"
+        :class="`btm-nav fixed bottom-0 z-30 w-full bg-base-100 md:hidden ${isPWA ? 'h-20 pb-8' : 'h-12'}`"
       >
-        <div class="flex h-12 w-full items-center justify-center gap-1 p-2">
-          <ul class="menu menu-horizontal flex flex-1">
-            <li
-              v-for="r in renderRoutes"
-              :key="r"
-              class="flex-1"
-            >
-              <a
-                class="flex items-center justify-center"
-                :class="r === route.name ? 'active' : 'inactive'"
-                :href="`#${r}`"
-              >
-                <component
-                  :is="ROUTE_ICON_MAP[r]"
-                  class="h-5 w-5"
-                />
-              </a>
-            </li>
-          </ul>
-        </div>
+        <button
+          v-for="r in renderRoutes"
+          :key="r"
+          @click="router.push({ name: r })"
+          :class="r === route.name ? 'active' : ''"
+        >
+          <component
+            :is="ROUTE_ICON_MAP[r]"
+            class="h-5 w-5"
+          />
+        </button>
       </div>
     </div>