carlos/reformix-hackaton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rediseña la navegación móvil del panel/admin con barra de pestañas inferior

Browse Source 
Sustituye el menú hamburguesa por una barra fija inferior con iconos y
etiquetas (thumb-friendly, siempre visible), manteniendo la nav horizontal
en escritorio.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Carlos Narro
2026-05-30 22:56:30 +02:00
parent 83ad82e617
commit 27165a41eb
3 changed files with 121 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
mvp/b2c/src/app/admin/layout.tsx
View File

@@ -6,9 +6,9 @@ import AppNav from '@/components/AppNav';
export const metadata: Metadata = { title: 'Admin · Reformix' };
const ADMIN_LINKS = [
{ href: '/admin', label: 'Resumen' },
{ href: '/admin/usuarios', label: 'Usuarios' },
{ href: '/admin/planes', label: 'Planes' },
{ href: '/admin', label: 'Resumen', icon: 'resumen' },
{ href: '/admin/usuarios', label: 'Usuarios', icon: 'usuarios' },
{ href: '/admin/planes', label: 'Planes', icon: 'planes' },
] as const;
export default async function AdminLayout({ children }: { children: React.ReactNode }) {
@@ -26,7 +26,7 @@ export default async function AdminLayout({ children }: { children: React.ReactN
<AppNav links={ADMIN_LINKS} />
</div>
</header>
<main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
<main className="max-w-6xl mx-auto px-6 py-8 pb-24 sm:pb-8">{children}</main>
</div>
);
}

8
mvp/b2c/src/app/panel/layout.tsx
View File

@@ -7,9 +7,9 @@ import { eq } from 'drizzle-orm';
import AppNav from '@/components/AppNav';
const PANEL_LINKS = [
{ href: '/panel', label: 'Leads' },
{ href: '/panel/precios', label: 'Precios' },
{ href: '/panel/empresa', label: 'Empresa' },
{ href: '/panel', label: 'Leads', icon: 'leads' },
{ href: '/panel/precios', label: 'Precios', icon: 'precios' },
{ href: '/panel/empresa', label: 'Empresa', icon: 'empresa' },
] as const;
export const metadata: Metadata = {
@@ -41,7 +41,7 @@ export default async function PanelLayout({ children }: { children: React.ReactN
<AppNav links={PANEL_LINKS} />
</div>
</header>
<main className="max-w-6xl mx-auto px-6 py-8">{children}</main>
<main className="max-w-6xl mx-auto px-6 py-8 pb-24 sm:pb-8">{children}</main>
</div>
);
}

174
mvp/b2c/src/components/AppNav.tsx
View File

@@ -1,10 +1,17 @@
'use client';
import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
export type AppNavLink = { href: string; label: string };
export type AppNavIcon =
| 'leads'
| 'precios'
| 'empresa'
| 'resumen'
| 'usuarios'
| 'planes';
export type AppNavLink = { href: string; label: string; icon: AppNavIcon };
// El enlace activo es el href más específico (más largo) que prefija el pathname.
function activeHref(pathname: string, links: readonly AppNavLink[]): string {
@@ -17,14 +24,79 @@ function activeHref(pathname: string, links: readonly AppNavLink[]): string {
return best;
}
const ICON_PATHS: Record<AppNavIcon | 'salir', React.ReactNode> = {
leads: (
<>
<path d="M3 4h18v12H6l-3 3V4Z" />
<path d="M7 9h10M7 12h6" />
</>
),
precios: (
<>
<path d="M20 12 12.5 4.5A2 2 0 0 0 11 4H5a1 1 0 0 0-1 1v6a2 2 0 0 0 .6 1.4L12 20l8-8Z" />
<circle cx="8.5" cy="8.5" r="1.2" />
</>
),
empresa: (
<>
<path d="M4 21V6l8-3 8 3v15" />
<path d="M4 21h16M9 21v-5h6v5M8 9h.01M12 9h.01M16 9h.01M8 13h.01M12 13h.01M16 13h.01" />
</>
),
resumen: (
<>
<rect x="3" y="3" width="7" height="9" rx="1" />
<rect x="14" y="3" width="7" height="5" rx="1" />
<rect x="14" y="12" width="7" height="9" rx="1" />
<rect x="3" y="16" width="7" height="5" rx="1" />
</>
),
usuarios: (
<>
<circle cx="9" cy="8" r="3" />
<path d="M3.5 20a5.5 5.5 0 0 1 11 0" />
<path d="M16 5.5a3 3 0 0 1 0 5.5M17 14.5a5.5 5.5 0 0 1 3.5 5" />
</>
),
planes: (
<>
<path d="M12 3 3 8l9 5 9-5-9-5Z" />
<path d="M3 13l9 5 9-5M3 18l9 5 9-5" />
</>
),
salir: (
<>
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
<path d="M16 17l5-5-5-5M21 12H9" />
</>
),
};
function Icon({ name }: { name: AppNavIcon | 'salir' }) {
return (
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.75"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
{ICON_PATHS[name]}
</svg>
);
}
export default function AppNav({ links }: { links: readonly AppNavLink[] }) {
const pathname = usePathname();
const [open, setOpen] = useState(false);
const active = activeHref(pathname, links);
return (
<>
{/* Escritorio */}
{/* Escritorio: navegación horizontal en la cabecera */}
<nav className="hidden sm:flex items-center gap-4 text-xs font-medium">
{links.map((l) => (
<Link
@@ -42,64 +114,44 @@ export default function AppNav({ links }: { links: readonly AppNavLink[] }) {
</form>
</nav>
{/* Móvil: botón hamburguesa */}
<button
type="button"
onClick={() => setOpen((v) => !v)}
aria-label={open ? 'Cerrar menú' : 'Abrir menú'}
aria-expanded={open}
className="sm:hidden inline-flex items-center justify-center w-10 h-10 -mr-2 rounded-lg text-gray-700 hover:bg-gray-100"
{/* Móvil: barra de pestañas fija inferior (thumb-friendly) */}
<nav
className="sm:hidden fixed inset-x-0 bottom-0 z-30 border-t border-gray-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/80"
style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
aria-label="Navegación principal"
>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
{open ? (
<>
<line x1="6" y1="6" x2="18" y2="18" />
<line x1="6" y1="18" x2="18" y2="6" />
</>
) : (
<>
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="12" x2="21" y2="12" />
<line x1="3" y1="18" x2="21" y2="18" />
</>
)}
</svg>
</button>
{/* Móvil: panel desplegable */}
{open && (
<>
<button
type="button"
aria-hidden="true"
tabIndex={-1}
onClick={() => setOpen(false)}
className="sm:hidden fixed inset-0 top-16 z-10 bg-black/20 cursor-default"
/>
<nav className="sm:hidden absolute left-0 right-0 top-16 z-20 bg-white border-b border-gray-200 shadow-lg">
<div className="px-6 py-2 flex flex-col">
{links.map((l) => (
<Link
key={l.href}
href={l.href}
onClick={() => setOpen(false)}
className={
'py-3 text-sm border-b border-gray-100 ' +
(active === l.href ? 'text-black font-semibold' : 'text-gray-600')
}
>
{l.label}
</Link>
))}
<form action="/logout" method="post" className="py-3">
<button type="submit" className="text-sm text-gray-600">
Salir
</button>
</form>
</div>
</nav>
</>
)}
<div className="grid grid-cols-4">
{links.map((l) => {
const isActive = active === l.href;
return (
<Link
key={l.href}
href={l.href}
aria-current={isActive ? 'page' : undefined}
className={
'relative flex flex-col items-center justify-center gap-1 pt-2.5 pb-2 text-[11px] font-medium transition-colors ' +
(isActive ? 'text-black' : 'text-gray-400 hover:text-gray-600')
}
>
{isActive && (
<span className="absolute top-0 h-0.5 w-8 rounded-full bg-black" aria-hidden="true" />
)}
<Icon name={l.icon} />
<span className="leading-none">{l.label}</span>
</Link>
);
})}
<form action="/logout" method="post" className="contents">
<button
type="submit"
className="flex flex-col items-center justify-center gap-1 pt-2.5 pb-2 text-[11px] font-medium text-gray-400 transition-colors hover:text-gray-600"
>
<Icon name="salir" />
<span className="leading-none">Salir</span>
</button>
</form>
</div>
</nav>
</>
);
}