50 lines
2.5 KiB
Vue
50 lines
2.5 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-slate-950 text-slate-100">
|
|
<nav v-if="isAuthenticated" class="border-b border-slate-800 bg-slate-900/90 backdrop-blur-xl sticky top-0 z-40">
|
|
<div class="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
|
|
<div class="flex items-center gap-10">
|
|
<NuxtLink to="/" class="text-2xl font-black text-blue-500 tracking-tighter hover:scale-105 transition-transform">XFlow</NuxtLink>
|
|
|
|
<!-- Desktop Nav -->
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<NuxtLink to="/canvases" class="text-sm font-medium text-slate-400 hover:text-white transition flex items-center gap-2">
|
|
<span>🗺️</span> Проекты
|
|
</NuxtLink>
|
|
<NuxtLink to="/tasks" class="text-sm font-medium text-slate-400 hover:text-white transition flex items-center gap-2">
|
|
<span>✅</span> Задачи
|
|
</NuxtLink>
|
|
<NuxtLink v-if="isAdmin" to="/admin" class="text-sm font-medium text-red-400/80 hover:text-red-400 transition flex items-center gap-2">
|
|
<span>🛡️</span> Админ
|
|
</NuxtLink>
|
|
<NuxtLink to="/settings" class="text-sm font-medium text-slate-400 hover:text-white transition flex items-center gap-2">
|
|
<span>⚙️</span> Настройки
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6">
|
|
<NuxtLink :to="`/profile/${user?.username || user?.id}`" class="flex items-center gap-2 text-sm font-medium text-slate-300 hover:text-blue-400 transition">
|
|
<div class="w-8 h-8 bg-slate-800 rounded-full flex items-center justify-center border border-slate-700 text-xs">
|
|
{{ (user?.displayName || user?.username || '?').charAt(0).toUpperCase() }}
|
|
</div>
|
|
<span class="hidden sm:inline">{{ user?.displayName || user?.username }}</span>
|
|
</NuxtLink>
|
|
<button @click="logout" class="p-2 text-slate-500 hover:text-red-400 transition" title="Выйти">
|
|
<span class="text-xl">🚪</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="flex-1 pb-20 md:pb-0">
|
|
<slot />
|
|
</div>
|
|
<BottomNav />
|
|
<AchievementOverlay :achievements="userAchievements" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { user, isAuthenticated, isAdmin, logout } = useAuth()
|
|
const { achievements: userAchievements } = useAchievements()
|
|
</script>
|