bao/vtuber-awards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine admin sidebar navigation

Browse Source
This commit is contained in:
AzuTear
2026-06-18 00:00:17 +02:00
parent adaea5cbce
commit 65ac0861da
1 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/admin/AdminLayoutView.vue
+18 -15
View File
@@ -34,34 +34,37 @@ 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 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'"
>
<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="shrink-0 rounded-full border border-violet-200 bg-white/90 px-2 py-0.5 text-[11px] font-semibold text-violet-700"
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>
</Card>