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
@@ -1,8 +1,94 @@
 <script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useWardStore } from '@/stores/ward'
+import { useDarkMode } from '@/composables/useDarkMode'
+
+const route = useRoute()
+const wardStore = useWardStore()
+const { department } = storeToRefs(wardStore)
+const { darkMode, toggle } = useDarkMode()
+
+const pageTitle = computed(() => route.meta.title ?? 'VigilCare')
+
+const departments = [
+  { value: '', label: 'All departments' },
+  { value: 'ICU', label: 'ICU' },
+  { value: 'GENERAL_MEDICINE', label: 'General Medicine' },
+  { value: 'SURGERY', label: 'Surgery' },
+]
+
+function onDepartmentChange(event) {
+  const value = event.target.value || null
+  wardStore.setDepartment(value)
+}
 </script>

 <template>
-  <header class="flex h-14 items-center border-b border-gray-200 bg-white px-4 dark:border-gray-800 dark:bg-gray-900">
-    <h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100">VigilCare Clinical</h1>
+  <header class="sticky top-0 z-30 border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
+    <div class="flex h-16 items-center gap-4 px-4 lg:px-8">
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+          VigilCare Clinical
+        </p>
+        <h1 class="truncate text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {{ pageTitle }}
+        </h1>
+      </div>
+
+      <div class="flex shrink-0 items-center gap-2 sm:gap-4">
+        <label v-if="route.name === 'WardDashboard'" class="hidden sm:block">
+          <span class="sr-only">Department filter</span>
+          <select
+            :value="department ?? ''"
+            class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200"
+            @change="onDepartmentChange"
+          >
+            <option v-for="dept in departments" :key="dept.value" :value="dept.value">
+              {{ dept.label }}
+            </option>
+          </select>
+        </label>
+
+        <button
+          type="button"
+          class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-600 transition duration-200 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:text-gray-300 dark:hover:bg-gray-800"
+          :aria-label="darkMode ? 'Switch to light mode' : 'Switch to dark mode'"
+          @click="toggle"
+        >
+          <svg
+            v-if="darkMode"
+            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="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+            />
+          </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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
  </header>
 </template>