feat: btm-nav for mobile

Zephyruso · Jan 7, 2025 · 62c70bc · 62c70bc
1 parent dec2173
commit 62c70bc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 22 deletions.
diff --git 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
@@ -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>