From 65ac0861da71828dab577d6f4b61bc611cb1b3ce Mon Sep 17 00:00:00 2001
From: AzuTear <vmbao62@hotmail.com>
Date: Thu, 18 Jun 2026 00:00:17 +0200
Subject: [PATCH] Refine admin sidebar navigation

---
 frontend/src/views/admin/AdminLayoutView.vue | 43 +++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/frontend/src/views/admin/AdminLayoutView.vue b/frontend/src/views/admin/AdminLayoutView.vue
index 3c7832a..6c757f5 100644
--- a/frontend/src/views/admin/AdminLayoutView.vue
+++ b/frontend/src/views/admin/AdminLayoutView.vue
@@ -34,33 +34,36 @@ onMounted(async () => {
 
 <template>
   <div class="pb-10">
-    <div class="grid gap-5 xl:grid-cols-[220px_minmax(0,1fr)]">
+    <div class="grid gap-6 xl:grid-cols-[260px_minmax(0,1fr)]">
       <aside class="space-y-3 xl:sticky xl:top-4 xl:h-fit">
-        <Card class="p-2">
-          <nav class="space-y-1">
+        <Card class="p-3">
+          <nav class="space-y-2">
             <RouterLink
               v-for="item in navItems"
               :key="item.to"
               :to="item.to"
-              class="block rounded-lg border px-3 py-2.5 transition"
-              :class="route.path === item.to ? 'border-violet-200 bg-violet-100/80 text-violet-900' : 'border-transparent bg-white/70 text-slate-700 hover:border-violet-100 hover:bg-violet-50/70'"
+              class="group block rounded-2xl border px-3.5 py-3 transition"
+              :class="route.path === item.to ? 'border-violet-200 bg-gradient-to-br from-violet-50 via-white to-[#f7eef8] text-violet-950 shadow-[0_14px_34px_rgba(168,145,214,0.14)]' : 'border-transparent bg-white/55 text-slate-700 hover:border-violet-100 hover:bg-violet-50/70'"
             >
-              <div class="flex items-center justify-between gap-2">
-                <div class="flex min-w-0 items-center gap-2">
-                  <div class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-white/80 text-violet-700">
-                    <component :is="item.icon" class="h-4 w-4" />
-                  </div>
-                  <div class="min-w-0">
-                    <p class="truncate text-sm font-semibold">{{ item.label }}</p>
-                    <p class="truncate text-xs text-slate-500">{{ item.description }}</p>
-                  </div>
-                </div>
-                <span
-                  v-if="item.badge()"
-                  class="shrink-0 rounded-full border border-violet-200 bg-white/90 px-2 py-0.5 text-[11px] font-semibold text-violet-700"
+              <div class="flex items-center gap-3">
+                <div
+                  class="grid h-10 w-10 shrink-0 place-items-center rounded-2xl transition"
+                  :class="route.path === item.to ? 'bg-white text-violet-700 shadow-sm' : 'bg-violet-50 text-violet-600 group-hover:bg-white'"
                 >
-                  {{ item.badge() }}
-                </span>
+                  <component :is="item.icon" class="h-4.5 w-4.5" />
+                </div>
+                <div class="min-w-0 flex-1">
+                  <div class="flex min-w-0 items-center justify-between gap-3">
+                    <p class="truncate text-sm font-semibold leading-5">{{ item.label }}</p>
+                    <span
+                      v-if="item.badge()"
+                      class="grid h-7 min-w-7 shrink-0 place-items-center rounded-full border border-violet-200 bg-white px-2 text-xs font-semibold text-violet-700 shadow-sm"
+                    >
+                      {{ item.badge() }}
+                    </span>
+                  </div>
+                  <p class="mt-0.5 truncate text-xs leading-5 text-slate-500">{{ item.description }}</p>
+                </div>
               </div>
             </RouterLink>
           </nav>