97 lines
3.5 KiB
Plaintext
97 lines
3.5 KiB
Plaintext
---
|
|
import { dmTranslations as T } from "../../i18n/dm-translations";
|
|
|
|
export interface Props {
|
|
user?: {
|
|
name?: string;
|
|
avatar?: string;
|
|
tier?: 'free' | 'pro';
|
|
} | null;
|
|
}
|
|
|
|
const { user } = Astro.props;
|
|
---
|
|
|
|
<aside class="w-full">
|
|
<!-- User info (if logged in) -->
|
|
{user && (
|
|
<div data-testid="sidebar-user-block" class="flex items-center gap-3 mb-6 px-3 py-3 rounded-xl bg-[var(--bg-card)] border border-[var(--border-gold-strong)]">
|
|
{user.avatar ? (
|
|
<img src={user.avatar} alt="" class="w-8 h-8 rounded-full border-2 border-[var(--accent)]" />
|
|
) : (
|
|
<div class="w-8 h-8 rounded-full bg-[var(--accent)]/20 flex items-center justify-center text-[var(--accent)] text-sm font-bold">
|
|
{user.name?.charAt(0).toUpperCase() || "?"}
|
|
</div>
|
|
)}
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<span class="text-sm font-medium text-[var(--text-primary)] truncate">
|
|
{user.name || "Пользователь"}
|
|
</span>
|
|
{user.tier === 'pro' ? (
|
|
<span data-testid="tier-badge" data-tier="pro" class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide bg-[var(--accent)] text-white">
|
|
{T.badgePro}
|
|
</span>
|
|
) : (
|
|
<span data-testid="tier-badge" data-tier="free" class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide border border-[var(--text-muted)] text-[var(--text-muted)]">
|
|
{T.badgeFree}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<!-- Tools section -->
|
|
<div class="mb-6">
|
|
<div class="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-2 px-3">
|
|
{T.sidebarTools}
|
|
</div>
|
|
<nav class="space-y-1">
|
|
{[
|
|
{ id: "dice", label: T.dice, icon: "🎲" },
|
|
{ id: "initiative", label: T.initiative, icon: "⚔️" },
|
|
{ id: "reference", label: T.reference, icon: "📖" },
|
|
{ id: "notes", label: T.notes, icon: "📝" },
|
|
].map((item) => (
|
|
<a
|
|
href={`#${item.id}`}
|
|
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-card)] transition-colors duration-[var(--transition-base)] group"
|
|
>
|
|
<span class="text-base opacity-60 group-hover:opacity-100 transition-opacity">{item.icon}</span>
|
|
<span>{item.label}</span>
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Reference section -->
|
|
<div class="mb-6">
|
|
<div class="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-2 px-3">
|
|
{T.sidebarReference}
|
|
</div>
|
|
<nav class="space-y-1">
|
|
{[
|
|
{ id: "monsters", label: T.monsters },
|
|
{ id: "spells", label: T.spells },
|
|
].map((item) => (
|
|
<a
|
|
href={`#reference`}
|
|
class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-card)] transition-colors duration-[var(--transition-base)]"
|
|
>
|
|
<span class="w-1.5 h-1.5 rounded-full bg-[var(--gold)] opacity-60"></span>
|
|
<span>{item.label}</span>
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Future extensibility placeholder -->
|
|
<div class="opacity-50">
|
|
<div class="text-xs font-semibold text-[var(--text-muted)] uppercase tracking-wider mb-2 px-3">
|
|
{T.sidebarCampaigns}
|
|
</div>
|
|
<div class="px-3 py-2 text-sm text-[var(--text-muted)] italic">
|
|
Скоро...
|
|
</div>
|
|
</div>
|
|
</aside>
|