Matheus
a15ea26cb5
Usuário forneceu 3 logos novos (B2BCall horizontal, B2BCall quadrado, Handix — empresa mãe). Processados com sharp (trim de whitespace + resize) e salvos em apps/frontend/public/branding/, substituindo o antigo b2blogo.png (mesmo desenho, só com mais espaço em branco ao redor). Achado ao processar: Logo_Handix.png original era RGB sem canal alpha (fundo branco opaco) — aplicar o mesmo filtro brightness-0 invert já usado no logo B2BCall pro painel escuro do login virava um retângulo branco sólido. Corrigido recolorindo pixels próximos de branco como transparentes via sharp antes de salvar. Sidebar (tenant e platform) ganha o ícone do B2BCall ao lado do nome do tenant/ "PLATFORM" no cabeçalho (canto superior esquerdo); topbar ganha o logo da Handix com link pra www.handix.com.br (canto superior direito, escondido no mobile). Login ganha "BY HANDIX" abaixo do logo principal e um rodapé com o logo da Handix + link. Testado ponta a ponta via Puppeteer: login, dashboard tenant/platform (claro e escuro), sidebar recolhida, drawer mobile. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BFaBaBSQGhyXGEgtTYZGV8
56 lines
2.6 KiB
TypeScript
56 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
import * as Dialog from "@radix-ui/react-dialog";
|
|
import { Menu, X } from "lucide-react";
|
|
import { NavList } from "./nav-list";
|
|
import type { NavSection } from "./nav-types";
|
|
|
|
/** Drawer de navegação pra telas abaixo de `lg` (secao 175: notebook/
|
|
* tablet são prioridade, mas o próprio celular do agente precisa
|
|
* funcionar) — a sidebar fixa de 256px não cabe num viewport de celular.
|
|
* Radix Dialog dá foco preso + Escape + clique fora de graça (secao 176:
|
|
* navegação completa por teclado). */
|
|
export function MobileNavDrawer({ items }: { items: NavSection[] }) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<Dialog.Root open={open} onOpenChange={setOpen}>
|
|
<Dialog.Trigger asChild>
|
|
<button
|
|
type="button"
|
|
aria-label="Abrir menu de navegação"
|
|
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring lg:hidden"
|
|
>
|
|
<Menu className="h-5 w-5" aria-hidden />
|
|
</button>
|
|
</Dialog.Trigger>
|
|
<Dialog.Portal>
|
|
<Dialog.Overlay className="fixed inset-0 z-40 bg-[hsl(224_45%_11%)]/50 opacity-0 backdrop-blur-[1px] transition-opacity duration-200 data-[state=open]:opacity-100" />
|
|
<Dialog.Content
|
|
className="fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] -translate-x-full flex-col bg-surface shadow-pop outline-none transition-transform duration-200 ease-out data-[state=open]:translate-x-0"
|
|
aria-describedby={undefined}
|
|
>
|
|
<Dialog.Title className="sr-only">Navegação</Dialog.Title>
|
|
<div className="flex h-16 items-center justify-between border-b border-border px-4">
|
|
<Image src="/branding/b2bcall-horizontal.png" alt="B2BCall" width={110} height={36} />
|
|
<Dialog.Close asChild>
|
|
<button
|
|
type="button"
|
|
aria-label="Fechar menu"
|
|
className="flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<X className="h-4 w-4" aria-hidden />
|
|
</button>
|
|
</Dialog.Close>
|
|
</div>
|
|
<nav className="flex-1 overflow-y-auto px-2 py-3" aria-label="Navegação principal">
|
|
<NavList items={items} onNavigate={() => setOpen(false)} />
|
|
</nav>
|
|
</Dialog.Content>
|
|
</Dialog.Portal>
|
|
</Dialog.Root>
|
|
);
|
|
}
|