fix styling to be more responsive and clean

vigilcare-dashboard/src/components/layout/AppSidebar.vue

@@ -1,13 +1,68 @@
 <script setup>
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const links = [
+  { to: '/ward', label: 'Virtual Ward', icon: 'ward' },
+  { to: '/alerts', label: 'Alert Center', icon: 'alerts' },
+]
+
+function linkClasses(path) {
+  const active = route.path.startsWith(path)
+  return active
+    ? 'bg-blue-50 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300'
+    : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+}
 </script>
 
 <template>
-  <aside class="hidden w-64 border-r border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 lg:block">
-    <div class="flex h-14 items-center px-4">
-      <span class="text-lg font-bold text-gray-900 dark:text-gray-100">VC</span>
+  <aside class="hidden w-64 shrink-0 border-r border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900 lg:flex lg:flex-col">
+    <div class="flex h-16 items-center px-8">
+      <span class="text-lg font-bold text-gray-900 dark:text-gray-100">VigilCare</span>
     </div>
-    <nav class="px-2 py-4">
-      <slot />
+    <nav class="flex-1 px-4 py-4" aria-label="Main navigation">
+      <ul class="space-y-2">
+        <li v-for="link in links" :key="link.to">
+          <RouterLink
+            :to="link.to"
+            class="flex items-center gap-4 rounded-lg px-4 py-2 text-sm font-medium transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+            :class="linkClasses(link.to)"
+          >
+            <svg
+              v-if="link.icon === 'ward'"
+              class="h-6 w-6 shrink-0"
+              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 shrink-0"
+              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>
   </aside>
 </template>