fix styling to be more responsive and clean

2026-06-20 07:58:15 +08:00
parent 2f74e2dd8b
commit 2ca0078223
24 changed files with 398 additions and 367 deletions
@@ -0,0 +1,64 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const links = [
+  { to: '/ward', label: 'Ward', icon: 'ward' },
+  { to: '/alerts', label: 'Alerts', icon: 'alerts' },
+]
+
+const activePath = computed(() => route.path)
+</script>
+
+<template>
+  <nav
+    class="fixed inset-x-0 bottom-0 z-40 border-t border-gray-200 bg-white lg:hidden dark:border-gray-800 dark:bg-gray-900"
+    aria-label="Mobile navigation"
+  >
+    <ul class="flex h-16 items-stretch">
+      <li v-for="link in links" :key="link.to" class="flex-1">
+        <RouterLink
+          :to="link.to"
+          class="flex h-full flex-col items-center justify-center gap-2 px-4 py-2 text-xs font-medium transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500"
+          :class="activePath.startsWith(link.to)
+            ? 'text-blue-600 dark:text-blue-400'
+            : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'"
+        >
+          <svg
+            v-if="link.icon === 'ward'"
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 10h16M4 14h16M4 18h16"
+            />
+          </svg>
+          <svg
+            v-else
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+            />
+          </svg>
+          {{ link.label }}
+        </RouterLink>
+      </li>
+    </ul>
+  </nav>
+</template>