StreakFit — PWA Nuxt (thème flamme, logo SF animé)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-19 03:00:18 +02:00
commit 8ee9596529
41 changed files with 24630 additions and 0 deletions
@@ -0,0 +1,65 @@
+<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>