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>
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { NavList } from '@/components/layout/nav-list';
|
|
import type { NavItem } from '@/lib/layout/nav-items';
|
|
|
|
interface SidebarProps {
|
|
brand: React.ReactNode;
|
|
brandCollapsed: React.ReactNode;
|
|
items: NavItem[];
|
|
footer: React.ReactNode;
|
|
footerCollapsed: React.ReactNode;
|
|
collapsed: boolean;
|
|
onToggleCollapsed: () => void;
|
|
}
|
|
|
|
/**
|
|
* Sidebar fixa (desktop, `md+`). Itens de menu e rodapé de usuário chegam
|
|
* via props — sem nada hardcoded — para ser reaproveitada entre o shell do
|
|
* master e o do tenant com conteúdo diferente (Etapa 14).
|
|
*/
|
|
export function Sidebar({
|
|
brand,
|
|
brandCollapsed,
|
|
items,
|
|
footer,
|
|
footerCollapsed,
|
|
collapsed,
|
|
onToggleCollapsed,
|
|
}: SidebarProps) {
|
|
return (
|
|
<aside
|
|
className={cn(
|
|
'fixed inset-y-0 left-0 z-30 hidden flex-col border-r border-border bg-surface transition-[width] duration-150 md:flex',
|
|
collapsed ? 'w-16' : 'w-60',
|
|
)}
|
|
>
|
|
<div className={cn('flex h-16 shrink-0 items-center gap-2 overflow-hidden px-4', collapsed && 'justify-center px-2')}>
|
|
{collapsed ? brandCollapsed : brand}
|
|
</div>
|
|
<Separator />
|
|
<div className="min-h-0 flex-1 overflow-y-auto px-3 py-4">
|
|
<NavList items={items} collapsed={collapsed} />
|
|
</div>
|
|
<Separator />
|
|
<div className={cn('flex flex-col gap-2 p-3', collapsed && 'items-center')}>
|
|
{collapsed ? footerCollapsed : footer}
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={onToggleCollapsed}
|
|
aria-label={collapsed ? 'Expandir menu' : 'Recolher menu'}
|
|
className={collapsed ? 'self-center' : 'self-end'}
|
|
>
|
|
{collapsed ? <PanelLeftOpen className="size-4" /> : <PanelLeftClose className="size-4" />}
|
|
</Button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|