47 lines
2.0 KiB
Vue
47 lines
2.0 KiB
Vue
<template>
|
|
<nav class="md:hidden fixed bottom-0 left-0 right-0 bg-slate-900/80 backdrop-blur-xl border-t border-slate-800 pb-safe z-40">
|
|
<div class="flex justify-around items-center h-16">
|
|
<NuxtLink to="/" class="flex flex-col items-center gap-1 text-slate-400 transition-colors" active-class="text-blue-500">
|
|
<span class="text-xl">🏠</span>
|
|
<span class="text-[10px] font-medium">Главная</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/canvases" class="flex flex-col items-center gap-1 text-slate-400 transition-colors" active-class="text-blue-500">
|
|
<span class="text-xl">🗺️</span>
|
|
<span class="text-[10px] font-medium">Канвасы</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/tasks" class="flex flex-col items-center gap-1 text-slate-400 transition-colors" active-class="text-blue-500">
|
|
<span class="text-xl">✅</span>
|
|
<span class="text-[10px] font-medium">Задачи</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink v-if="isAdmin" to="/admin" class="flex flex-col items-center gap-1 text-slate-400 transition-colors" active-class="text-red-500">
|
|
<span class="text-xl">🛡️</span>
|
|
<span class="text-[10px] font-medium">Админ</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/settings" class="flex flex-col items-center gap-1 text-slate-400 transition-colors" active-class="text-blue-500">
|
|
<span class="text-xl">⚙️</span>
|
|
<span class="text-[10px] font-medium">Опции</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink to="/profile" class="flex flex-col items-center gap-1 text-slate-400 transition-colors" active-class="text-blue-500">
|
|
<span class="text-xl">👤</span>
|
|
<span class="text-[10px] font-medium">Профиль</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
const auth = useAuth()
|
|
const isAdmin = computed(() => auth.user.value?.role === 'admin')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pb-safe {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
</style>
|