Layout visual: cabecera con nav/sesión/idioma + pie, tema Tailwind

- components/Header.tsx (server, lee sesión): marca, nav (Inicio; login/register o account/logout según sesión), LanguageSwitcher y LogoutButton. - components/LanguageSwitcher.tsx (cliente): cambia de idioma conservando la ruta (next-intl usePathname/useRouter). components/LogoutButton.tsx (compartido). - components/Footer.tsx. app/[locale]/layout.tsx envuelve children con Header/Footer (columna min-h-screen). Se unifica el LogoutButton (se borra el de account/). - messages: namespace Nav. Verificado: home ES/EN con cabecera+nav+idioma+pie; enlaces locale-aware (/en/login); textos por idioma. Al leer sesión en el header, todas las rutas pasan a dinámicas. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-12 22:57:00 +00:00
parent f332fc39ca
commit 4a783d165f
8 changed files with 113 additions and 10 deletions
@@ -1,7 +1,7 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { redirect } from '@/i18n/navigation'
 import { getSession } from '@/lib/session'
-import { LogoutButton } from './LogoutButton'
+import { LogoutButton } from '@/components/LogoutButton'

 export const dynamic = 'force-dynamic'

@@ -3,6 +3,8 @@ import { notFound } from 'next/navigation'
 import { NextIntlClientProvider, hasLocale } from 'next-intl'
 import { getTranslations, setRequestLocale } from 'next-intl/server'
 import { routing } from '@/i18n/routing'
+import { Header } from '@/components/Header'
+import { Footer } from '@/components/Footer'
 import '../globals.css'

 export function generateStaticParams() {
@@ -44,8 +46,12 @@ export default async function LocaleLayout({

  return (
    <html lang={locale}>
-      <body>
-        <NextIntlClientProvider>{children}</NextIntlClientProvider>
+      <body className="flex min-h-screen flex-col">
+        <NextIntlClientProvider>
+          <Header />
+          <div className="flex-1">{children}</div>
+          <Footer />
+        </NextIntlClientProvider>
      </body>
    </html>
  )
@@ -0,0 +1,10 @@
+export function Footer() {
+  const year = 2026 // TODO: sustituir por año dinámico cuando haya fuente de fecha
+  return (
+    <footer className="mt-12 border-t border-amber-900/50 bg-[#241812]">
+      <div className="mx-auto max-w-5xl px-4 py-6 text-center text-sm text-amber-200/60">
+        © {year} Nova WoW · WotLK Classic 3.4.3
+      </div>
+    </footer>
+  )
+}
@@ -0,0 +1,47 @@
+import { getTranslations } from 'next-intl/server'
+import { Link } from '@/i18n/navigation'
+import { getSession } from '@/lib/session'
+import { LanguageSwitcher } from './LanguageSwitcher'
+import { LogoutButton } from './LogoutButton'
+
+export async function Header() {
+  const t = await getTranslations('Nav')
+  const session = await getSession()
+  const loggedIn = Boolean(session.username)
+
+  return (
+    <header className="border-b border-amber-900/50 bg-[#241812]">
+      <div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-3">
+        <Link href="/" className="text-xl font-bold tracking-wide text-amber-500">
+          Nova WoW
+        </Link>
+        <nav className="flex items-center gap-4 text-sm">
+          <Link href="/" className="text-amber-200 hover:text-amber-400">
+            {t('home')}
+          </Link>
+          {loggedIn ? (
+            <>
+              <Link href="/account" className="text-amber-200 hover:text-amber-400">
+                {t('account')}
+              </Link>
+              <LogoutButton />
+            </>
+          ) : (
+            <>
+              <Link href="/login" className="text-amber-200 hover:text-amber-400">
+                {t('login')}
+              </Link>
+              <Link
+                href="/register"
+                className="rounded bg-amber-600 px-3 py-1 font-semibold text-[#1b120b] hover:bg-amber-500"
+              >
+                {t('register')}
+              </Link>
+            </>
+          )}
+          <LanguageSwitcher />
+        </nav>
+      </div>
+    </header>
+  )
+}
@@ -0,0 +1,28 @@
+'use client'
+
+import { useLocale } from 'next-intl'
+import { usePathname, useRouter } from '@/i18n/navigation'
+import { routing } from '@/i18n/routing'
+
+const LABELS: Record<string, string> = { es: 'ES', en: 'EN' }
+
+export function LanguageSwitcher() {
+  const locale = useLocale()
+  const pathname = usePathname() // sin prefijo de idioma
+  const router = useRouter()
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => router.replace(pathname, { locale: e.target.value })}
+      className="rounded border border-amber-900/60 bg-[#2c1e14] px-2 py-1 text-sm"
+      aria-label="language"
+    >
+      {routing.locales.map((loc) => (
+        <option key={loc} value={loc}>
+          {LABELS[loc] ?? loc.toUpperCase()}
+        </option>
+      ))}
+    </select>
+  )
+}
@@ -4,8 +4,8 @@ import { useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { useRouter } from '@/i18n/navigation'

-export function LogoutButton() {
-  const t = useTranslations('Account')
+export function LogoutButton({ className }: { className?: string }) {
+  const t = useTranslations('Nav')
  const router = useRouter()
  const [busy, setBusy] = useState(false)

@@ -17,11 +17,7 @@ export function LogoutButton() {
  }

  return (
-    <button
-      onClick={logout}
-      disabled={busy}
-      className="rounded border border-amber-900/60 px-4 py-2 text-amber-200 disabled:opacity-60"
-    >
+    <button onClick={logout} disabled={busy} className={className ?? 'text-amber-200 hover:text-amber-400'}>
      {t('logout')}
    </button>
  )
@@ -3,6 +3,14 @@
    "title": "Nova WoW WoW WotLK 3.4.3 Server - Latino & Español 💎",
    "description": "Download and play WotLK Classic for free on Nova WoW - WoW WotLK 3.4.3 server - The best WoW server 🔥"
  },
+  "Nav": {
+    "home": "Home",
+    "login": "Sign in",
+    "register": "Create account",
+    "account": "My account",
+    "logout": "Log out",
+    "language": "Language"
+  },
  "Home": {
    "brand": "Nova WoW",
    "serverStatus": "Server status",
@@ -3,6 +3,14 @@
    "title": "Nova WoW Server de WoW WotLK 3.4.3 Latino y Español 💎",
    "description": "Descarga y juega gratis a WotLK Classic en Nova WoW - Server de WoW WotLK 3.4.3 Latino y Español - El mejor server de WoW 🔥"
  },
+  "Nav": {
+    "home": "Inicio",
+    "login": "Iniciar sesión",
+    "register": "Crear cuenta",
+    "account": "Mi cuenta",
+    "logout": "Cerrar sesión",
+    "language": "Idioma"
+  },
  "Home": {
    "brand": "Nova WoW",
    "serverStatus": "Estado del servidor",