feat: btm-nav for mobile

Zephyruso · Jan 7, 2025 · 07e7d8f · 07e7d8f
1 parent dec2173
commit 07e7d8f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 33 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
@@ -18,33 +18,29 @@
         :horizontal="true"
       />
       <div class="relative h-0 flex-1">
-        <RouterView class="absolute h-full w-full" />
+        <RouterView
+          class="absolute h-full w-full"
+          :class="isPWA ? 'pb-[5.5rem]' : 'pb-14'"
+        />
       </div>
-      <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 glass z-30 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 bg-inherit' : ''"
+        >
+          <component
+            :is="ROUTE_ICON_MAP[r]"
+            class="h-5 w-5"
+          />
+          <span class="text-xs">
+            {{ $t(r) }}
+          </span>
+        </button>
       </div>
     </div>
 
@@ -101,6 +97,7 @@ import { RouterView, useRoute, useRouter } from 'vue-router'
 
 const modalRef = ref<HTMLDialogElement | null>(null)
 const isPWA = (() => {
+  return 1
   return window.matchMedia('(display-mode: standalone)').matches || navigator.standalone
 })()
 

diff --git a/src/views/RulesPage.vue b/src/views/RulesPage.vue
@@ -10,15 +10,17 @@
     </div>
   </template>
   <template v-else>
-    <VirtualScroller :data="renderRules">
-      <template v-slot="{ item: rule }: { item: Rule }">
-        <RuleCard
-          :key="rule.payload"
-          :rule="rule"
-          :index="rules.indexOf(rule) + 1"
-        />
-      </template>
-    </VirtualScroller>
+    <div>
+      <VirtualScroller :data="renderRules">
+        <template v-slot="{ item: rule }: { item: Rule }">
+          <RuleCard
+            :key="rule.payload"
+            :rule="rule"
+            :index="rules.indexOf(rule) + 1"
+          />
+        </template>
+      </VirtualScroller>
+    </div>
   </template>
 </template>