feat: implementar topbar como experimento de navegação

Substitui a sidebar pela topbar com NavigationMenu do shadcn/ui.

- Logo à esquerda com invert para bg primário
- Links diretos: Dashboard, Calendário, Cartões, Contas
- Dropdowns: Lançamentos, Organização, Análise
- Mobile: Sheet lateral com hamburger
- Ações à direita: notificações, calculadora, tema, etc.
- User avatar com dropdown de ajustes/logout
- CSS vars overrideados na área de ações para cor primária

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-02-22 20:28:57 +00:00
parent f16140cb44
commit a9f73f7a45
5 changed files with 738 additions and 26 deletions

View File

@@ -1,8 +1,6 @@
import { FontProvider } from "@/components/font-provider";
import { SiteHeader } from "@/components/header-dashboard";
import { PrivacyProvider } from "@/components/privacy-provider";
import { AppSidebar } from "@/components/sidebar/app-sidebar";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { AppTopbar } from "@/components/topbar/app-topbar";
import { getUserSession } from "@/lib/auth/server";
import { fetchDashboardNotifications } from "@/lib/dashboard/notifications";
import { fetchPagadoresWithAccess } from "@/lib/pagadores/access";
@@ -55,30 +53,19 @@ export default async function DashboardLayout({
moneyFont={fontPrefs.moneyFont}
>
<PrivacyProvider>
<SidebarProvider>
<AppSidebar
user={{ ...session.user, image: session.user.image ?? null }}
pagadorAvatarUrl={adminPagador?.avatarUrl ?? null}
pagadores={pagadoresList.map((item) => ({
id: item.id,
name: item.name,
avatarUrl: item.avatarUrl,
canEdit: item.canEdit,
}))}
preLancamentosCount={preLancamentosCount}
variant="sidebar"
/>
<SidebarInset>
<SiteHeader notificationsSnapshot={notificationsSnapshot} />
<div className="flex flex-1 flex-col pt-12 md:pt-0">
<div className="@container/main flex flex-1 flex-col gap-2">
<div className="flex flex-col gap-4 py-4 md:gap-6 w-full max-w-8xl mx-auto">
{children}
</div>
</div>
<AppTopbar
user={{ ...session.user, image: session.user.image ?? null }}
pagadorAvatarUrl={adminPagador?.avatarUrl ?? null}
preLancamentosCount={preLancamentosCount}
notificationsSnapshot={notificationsSnapshot}
/>
<div className="flex flex-1 flex-col pt-14">
<div className="@container/main flex flex-1 flex-col gap-2">
<div className="flex flex-col gap-4 py-4 md:gap-6 w-full max-w-8xl mx-auto px-4">
{children}
</div>
</SidebarInset>
</SidebarProvider>
</div>
</div>
</PrivacyProvider>
</FontProvider>
);