neckfireandClaude Opus 4.8
8ee9596529
Build & Deploy / build (push) Failing after 5s
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
66 lines
2.5 KiB
Vue
66 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
const auth = useAuthStore()
|
|
const { locale, locales, setLocale } = useI18n()
|
|
const { t } = useI18n()
|
|
|
|
const tabs = computed(() => [
|
|
{ to: '/', icon: 'i-lucide-flame', label: t('nav.dashboard') },
|
|
{ to: '/exercises', icon: 'i-lucide-dumbbell', label: t('nav.exercises') },
|
|
{ to: '/routines', icon: 'i-lucide-list-checks', label: t('nav.routines') },
|
|
{ to: '/history', icon: 'i-lucide-history', label: t('nav.history') },
|
|
{ to: '/profile', icon: 'i-lucide-user', label: t('nav.profile') }
|
|
])
|
|
|
|
const route = useRoute()
|
|
const langItems = computed(() => (locales.value as { code: string, name: string }[]).map(l => ({
|
|
label: l.name,
|
|
onSelect: () => setLocale(l.code as 'fr' | 'en' | 'pt-BR')
|
|
})))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-dvh flex flex-col bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100">
|
|
<!-- Header -->
|
|
<header class="sticky top-0 z-30 flex items-center justify-between px-4 h-14 border-b border-zinc-200/70 dark:border-zinc-800/70 backdrop-blur bg-white/80 dark:bg-zinc-950/80">
|
|
<NuxtLink to="/" class="flex items-center gap-2">
|
|
<SfLogo :size="30" />
|
|
<span class="font-extrabold tracking-tight text-lg">
|
|
<span class="sf-flame-text">Streak</span><span>Fit</span>
|
|
</span>
|
|
</NuxtLink>
|
|
<div class="flex items-center gap-1">
|
|
<UDropdownMenu :items="langItems">
|
|
<UButton icon="i-lucide-languages" color="neutral" variant="ghost" size="sm" :label="locale.toUpperCase()" />
|
|
</UDropdownMenu>
|
|
<UColorModeButton />
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Contenu -->
|
|
<main class="flex-1 w-full max-w-2xl mx-auto px-4 py-5 pb-24">
|
|
<slot />
|
|
</main>
|
|
|
|
<!-- Bottom nav (mobile-first, masquée si non connecté) -->
|
|
<nav
|
|
v-if="auth.isAuthed"
|
|
class="fixed bottom-0 inset-x-0 z-30 border-t border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-950/95 backdrop-blur"
|
|
>
|
|
<ul class="max-w-2xl mx-auto grid grid-cols-5">
|
|
<li v-for="tab in tabs" :key="tab.to">
|
|
<NuxtLink
|
|
:to="tab.to"
|
|
class="flex flex-col items-center gap-0.5 py-2.5 text-xs transition-colors"
|
|
:class="route.path === tab.to
|
|
? 'text-flame-600 dark:text-flame-400'
|
|
: 'text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200'"
|
|
>
|
|
<UIcon :name="tab.icon" class="size-5" />
|
|
<span>{{ tab.label }}</span>
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</template>
|