From 33975a633c348ccb2264a334db5deb484cf354dd Mon Sep 17 00:00:00 2001
From: AzuTear <vmbao62@hotmail.com>
Date: Wed, 17 Jun 2026 13:39:54 +0200
Subject: [PATCH] Separate active season admin card

---
 frontend/src/views/admin/AdminLayoutView.vue | 60 ++++++++++----------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/frontend/src/views/admin/AdminLayoutView.vue b/frontend/src/views/admin/AdminLayoutView.vue
index ed4570a..4aeb7ac 100644
--- a/frontend/src/views/admin/AdminLayoutView.vue
+++ b/frontend/src/views/admin/AdminLayoutView.vue
@@ -35,36 +35,38 @@ onMounted(async () => {
 <template>
   <div class="pb-10">
     <div class="grid gap-5 xl:grid-cols-[220px_minmax(0,1fr)]">
-      <Card class="h-fit p-2 xl:sticky xl:top-4">
-        <nav class="space-y-1">
-          <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'"
-          >
-            <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>
+      <aside class="space-y-3 xl:sticky xl:top-4 xl:h-fit">
+        <Card class="p-2">
+          <nav class="space-y-1">
+            <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'"
+            >
+              <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"
+                >
+                  {{ item.badge() }}
+                </span>
               </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"
-              >
-                {{ item.badge() }}
-              </span>
-            </div>
-          </RouterLink>
-        </nav>
+            </RouterLink>
+          </nav>
+        </Card>
 
-        <div class="mt-3 rounded-lg border border-violet-100 bg-violet-50/60 px-3 py-3">
+        <Card class="p-3">
           <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-violet-500">Aktive Season</p>
           <p class="mt-1 truncate text-sm font-semibold text-violet-800">{{ currentSeason.year || 'Keine Season' }} · {{ currentSeason.currentPhase || 'Kein Status' }}</p>
           <p class="mt-1 truncate text-xs text-slate-500">{{ currentSeason.name || 'Bitte Season auswaehlen.' }}</p>
@@ -78,8 +80,8 @@ onMounted(async () => {
               <strong class="block text-base leading-5 text-violet-800">{{ item.value }}</strong>
             </div>
           </div>
-        </div>
-      </Card>
+        </Card>
+      </aside>
 
       <RouterView />
     </div>