tiagoandClaude Sonnet 5
323912748f
Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Ellipsis } from 'lucide-react';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
|
import { NavList } from '@/components/layout/nav-list';
|
|
import type { NavItem } from '@/lib/layout/nav-items';
|
|
|
|
function isActive(pathname: string, href: string): boolean {
|
|
return pathname === href || pathname.startsWith(`${href}/`);
|
|
}
|
|
|
|
interface BottomTabBarProps {
|
|
/** Os 4 itens principais, já resolvidos na ordem de exibição. */
|
|
items: NavItem[];
|
|
/** Restante do menu, exibido no sheet "Mais". */
|
|
moreItems: NavItem[];
|
|
}
|
|
|
|
/** Bottom tab bar mobile (`<md`) — 4 itens fixos + "Mais" com o restante do menu. */
|
|
export function BottomTabBar({ items, moreItems }: BottomTabBarProps) {
|
|
const pathname = usePathname();
|
|
const [moreOpen, setMoreOpen] = React.useState(false);
|
|
const moreActive = moreItems.some(
|
|
(item) => isActive(pathname, item.href) || item.children?.some((child) => isActive(pathname, child.href)),
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<nav
|
|
aria-label="Navegação principal"
|
|
className="fixed inset-x-0 bottom-0 z-20 flex h-16 items-stretch border-t border-border bg-surface md:hidden"
|
|
>
|
|
{items.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = isActive(pathname, item.href);
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
aria-current={active ? 'page' : undefined}
|
|
className={cn(
|
|
'flex flex-1 flex-col items-center justify-center gap-0.5 text-[11px] font-medium text-neutral-500',
|
|
active && 'text-primary-on-light',
|
|
)}
|
|
>
|
|
<Icon className="size-5" aria-hidden />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
<button
|
|
type="button"
|
|
onClick={() => setMoreOpen(true)}
|
|
aria-haspopup="dialog"
|
|
className={cn(
|
|
'flex flex-1 flex-col items-center justify-center gap-0.5 text-[11px] font-medium text-neutral-500',
|
|
moreActive && 'text-primary-on-light',
|
|
)}
|
|
>
|
|
<Ellipsis className="size-5" aria-hidden />
|
|
Mais
|
|
</button>
|
|
</nav>
|
|
|
|
<Sheet open={moreOpen} onOpenChange={setMoreOpen}>
|
|
<SheetContent side="bottom" className="max-h-[70vh] gap-0 p-0">
|
|
<SheetHeader>
|
|
<SheetTitle>Mais opções</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="overflow-y-auto px-3 pb-4">
|
|
<NavList items={moreItems} onNavigate={() => setMoreOpen(false)} />
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</>
|
|
);
|
|
}
|