forked from git.gladyson/openmonetis
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
@@ -1,8 +1,6 @@
|
|||||||
import { FontProvider } from "@/components/font-provider";
|
import { FontProvider } from "@/components/font-provider";
|
||||||
import { SiteHeader } from "@/components/header-dashboard";
|
|
||||||
import { PrivacyProvider } from "@/components/privacy-provider";
|
import { PrivacyProvider } from "@/components/privacy-provider";
|
||||||
import { AppSidebar } from "@/components/sidebar/app-sidebar";
|
import { AppTopbar } from "@/components/topbar/app-topbar";
|
||||||
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
|
||||||
import { getUserSession } from "@/lib/auth/server";
|
import { getUserSession } from "@/lib/auth/server";
|
||||||
import { fetchDashboardNotifications } from "@/lib/dashboard/notifications";
|
import { fetchDashboardNotifications } from "@/lib/dashboard/notifications";
|
||||||
import { fetchPagadoresWithAccess } from "@/lib/pagadores/access";
|
import { fetchPagadoresWithAccess } from "@/lib/pagadores/access";
|
||||||
@@ -55,30 +53,19 @@ export default async function DashboardLayout({
|
|||||||
moneyFont={fontPrefs.moneyFont}
|
moneyFont={fontPrefs.moneyFont}
|
||||||
>
|
>
|
||||||
<PrivacyProvider>
|
<PrivacyProvider>
|
||||||
<SidebarProvider>
|
<AppTopbar
|
||||||
<AppSidebar
|
|
||||||
user={{ ...session.user, image: session.user.image ?? null }}
|
user={{ ...session.user, image: session.user.image ?? null }}
|
||||||
pagadorAvatarUrl={adminPagador?.avatarUrl ?? null}
|
pagadorAvatarUrl={adminPagador?.avatarUrl ?? null}
|
||||||
pagadores={pagadoresList.map((item) => ({
|
|
||||||
id: item.id,
|
|
||||||
name: item.name,
|
|
||||||
avatarUrl: item.avatarUrl,
|
|
||||||
canEdit: item.canEdit,
|
|
||||||
}))}
|
|
||||||
preLancamentosCount={preLancamentosCount}
|
preLancamentosCount={preLancamentosCount}
|
||||||
variant="sidebar"
|
notificationsSnapshot={notificationsSnapshot}
|
||||||
/>
|
/>
|
||||||
<SidebarInset>
|
<div className="flex flex-1 flex-col pt-14">
|
||||||
<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="@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">
|
<div className="flex flex-col gap-4 py-4 md:gap-6 w-full max-w-8xl mx-auto px-4">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
</PrivacyProvider>
|
</PrivacyProvider>
|
||||||
</FontProvider>
|
</FontProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
91
components/topbar/app-topbar.tsx
Normal file
91
components/topbar/app-topbar.tsx
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { AnimatedThemeToggler } from "@/components/animated-theme-toggler";
|
||||||
|
import { CalculatorDialogButton } from "@/components/calculadora/calculator-dialog";
|
||||||
|
import { FeedbackDialog } from "@/components/feedback/feedback-dialog";
|
||||||
|
import { NotificationBell } from "@/components/notificacoes/notification-bell";
|
||||||
|
import { PrivacyModeToggle } from "@/components/privacy-mode-toggle";
|
||||||
|
import { RefreshPageButton } from "@/components/refresh-page-button";
|
||||||
|
import type { DashboardNotificationsSnapshot } from "@/lib/dashboard/notifications";
|
||||||
|
import { TopNavMenu } from "./top-nav-menu";
|
||||||
|
import { TopbarUser } from "./topbar-user";
|
||||||
|
|
||||||
|
type AppTopbarProps = {
|
||||||
|
user: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
image: string | null;
|
||||||
|
};
|
||||||
|
pagadorAvatarUrl: string | null;
|
||||||
|
preLancamentosCount?: number;
|
||||||
|
notificationsSnapshot: DashboardNotificationsSnapshot;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function AppTopbar({
|
||||||
|
user,
|
||||||
|
pagadorAvatarUrl,
|
||||||
|
preLancamentosCount = 0,
|
||||||
|
notificationsSnapshot,
|
||||||
|
}: AppTopbarProps) {
|
||||||
|
return (
|
||||||
|
<header className="fixed top-0 left-0 right-0 z-50 bg-primary flex h-14 shrink-0 items-center gap-3 px-4 shadow-md">
|
||||||
|
{/* Logo */}
|
||||||
|
<Link href="/dashboard" className="flex items-center gap-2 shrink-0 mr-1">
|
||||||
|
<Image
|
||||||
|
src="/logo_small.png"
|
||||||
|
alt="OpenMonetis"
|
||||||
|
width={28}
|
||||||
|
height={28}
|
||||||
|
className="object-contain"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<Image
|
||||||
|
src="/logo_text.png"
|
||||||
|
alt="OpenMonetis"
|
||||||
|
width={90}
|
||||||
|
height={28}
|
||||||
|
className="object-contain invert hidden sm:block"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<TopNavMenu preLancamentosCount={preLancamentosCount} />
|
||||||
|
|
||||||
|
{/* Right-side actions — CSS vars overridden so icons render light on primary bg */}
|
||||||
|
<div
|
||||||
|
className="ml-auto flex items-center gap-1"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--foreground": "var(--primary-foreground)",
|
||||||
|
"--muted-foreground":
|
||||||
|
"color-mix(in oklch, var(--primary-foreground) 70%, transparent)",
|
||||||
|
"--accent":
|
||||||
|
"color-mix(in oklch, var(--primary-foreground) 15%, transparent)",
|
||||||
|
"--accent-foreground": "var(--primary-foreground)",
|
||||||
|
"--border":
|
||||||
|
"color-mix(in oklch, var(--primary-foreground) 30%, transparent)",
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<NotificationBell
|
||||||
|
notifications={notificationsSnapshot.notifications}
|
||||||
|
totalCount={notificationsSnapshot.totalCount}
|
||||||
|
/>
|
||||||
|
<CalculatorDialogButton withTooltip />
|
||||||
|
<RefreshPageButton />
|
||||||
|
<PrivacyModeToggle />
|
||||||
|
<AnimatedThemeToggler />
|
||||||
|
<span
|
||||||
|
aria-hidden
|
||||||
|
className="h-5 w-px bg-primary-foreground/30 mx-1 hidden sm:block"
|
||||||
|
/>
|
||||||
|
<FeedbackDialog />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* User avatar — outside the var-override div so dropdown stays normal */}
|
||||||
|
<TopbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
385
components/topbar/top-nav-menu.tsx
Normal file
385
components/topbar/top-nav-menu.tsx
Normal file
@@ -0,0 +1,385 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
RiArrowLeftRightLine,
|
||||||
|
RiBankCard2Line,
|
||||||
|
RiBankLine,
|
||||||
|
RiCalendarEventLine,
|
||||||
|
RiDashboardLine,
|
||||||
|
RiFileChartLine,
|
||||||
|
RiFundsLine,
|
||||||
|
RiGroupLine,
|
||||||
|
RiInboxLine,
|
||||||
|
RiMenuLine,
|
||||||
|
RiPriceTag3Line,
|
||||||
|
RiSparklingLine,
|
||||||
|
RiTodoLine,
|
||||||
|
} from "@remixicon/react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
NavigationMenu,
|
||||||
|
NavigationMenuContent,
|
||||||
|
NavigationMenuItem,
|
||||||
|
NavigationMenuList,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
} from "@/components/ui/navigation-menu";
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
SheetTrigger,
|
||||||
|
} from "@/components/ui/sheet";
|
||||||
|
import { cn } from "@/lib/utils/ui";
|
||||||
|
|
||||||
|
type TopNavMenuProps = {
|
||||||
|
preLancamentosCount?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const triggerClass =
|
||||||
|
"!bg-transparent !text-primary-foreground/90 hover:!bg-primary-foreground/15 hover:!text-primary-foreground focus:!bg-primary-foreground/15 focus:!text-primary-foreground data-[state=open]:!bg-primary-foreground/20 data-[state=open]:!text-primary-foreground";
|
||||||
|
|
||||||
|
function SimpleNavLink({
|
||||||
|
href,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
href: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const isActive =
|
||||||
|
href === "/dashboard"
|
||||||
|
? pathname === href
|
||||||
|
: pathname === href || pathname.startsWith(`${href}/`);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={href}
|
||||||
|
className={cn(
|
||||||
|
"inline-flex h-9 items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors",
|
||||||
|
"text-primary-foreground/90 hover:text-primary-foreground hover:bg-primary-foreground/15",
|
||||||
|
isActive && "bg-primary-foreground/20 text-primary-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type DropdownLinkItem = {
|
||||||
|
href: string;
|
||||||
|
label: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
badge?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
function DropdownLinkList({ items }: { items: DropdownLinkItem[] }) {
|
||||||
|
return (
|
||||||
|
<ul className="grid w-48 gap-0.5 p-2">
|
||||||
|
{items.map((item) => (
|
||||||
|
<li key={item.href}>
|
||||||
|
<Link
|
||||||
|
href={item.href}
|
||||||
|
className="flex items-center gap-2.5 rounded-sm px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors"
|
||||||
|
>
|
||||||
|
<span className="text-muted-foreground shrink-0">{item.icon}</span>
|
||||||
|
<span className="flex-1">{item.label}</span>
|
||||||
|
{item.badge && item.badge > 0 ? (
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className="text-[10px] px-1.5 py-0 h-4 min-w-4 ml-auto"
|
||||||
|
>
|
||||||
|
{item.badge}
|
||||||
|
</Badge>
|
||||||
|
) : null}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MobileNavLink({
|
||||||
|
href,
|
||||||
|
icon,
|
||||||
|
children,
|
||||||
|
onClick,
|
||||||
|
badge,
|
||||||
|
}: {
|
||||||
|
href: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
children: React.ReactNode;
|
||||||
|
onClick?: () => void;
|
||||||
|
badge?: number;
|
||||||
|
}) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const isActive =
|
||||||
|
href === "/dashboard"
|
||||||
|
? pathname === href
|
||||||
|
: pathname === href || pathname.startsWith(`${href}/`);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={href}
|
||||||
|
onClick={onClick}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
|
||||||
|
"text-foreground hover:bg-accent",
|
||||||
|
isActive && "bg-accent font-medium",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="text-muted-foreground shrink-0">{icon}</span>
|
||||||
|
<span className="flex-1">{children}</span>
|
||||||
|
{badge && badge > 0 ? (
|
||||||
|
<Badge variant="secondary" className="text-xs px-1.5 py-0">
|
||||||
|
{badge}
|
||||||
|
</Badge>
|
||||||
|
) : null}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function MobileSectionLabel({ label }: { label: string }) {
|
||||||
|
return (
|
||||||
|
<p className="mt-3 mb-1 px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||||
|
{label}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
|
||||||
|
const [sheetOpen, setSheetOpen] = useState(false);
|
||||||
|
const close = () => setSheetOpen(false);
|
||||||
|
|
||||||
|
const lancamentosItems: DropdownLinkItem[] = [
|
||||||
|
{
|
||||||
|
href: "/lancamentos",
|
||||||
|
label: "Lançamentos",
|
||||||
|
icon: <RiArrowLeftRightLine className="size-4" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/pre-lancamentos",
|
||||||
|
label: "Pré-Lançamentos",
|
||||||
|
icon: <RiInboxLine className="size-4" />,
|
||||||
|
badge: preLancamentosCount,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const organizacaoItems: DropdownLinkItem[] = [
|
||||||
|
{
|
||||||
|
href: "/orcamentos",
|
||||||
|
label: "Orçamentos",
|
||||||
|
icon: <RiFundsLine className="size-4" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/pagadores",
|
||||||
|
label: "Pagadores",
|
||||||
|
icon: <RiGroupLine className="size-4" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/categorias",
|
||||||
|
label: "Categorias",
|
||||||
|
icon: <RiPriceTag3Line className="size-4" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/anotacoes",
|
||||||
|
label: "Anotações",
|
||||||
|
icon: <RiTodoLine className="size-4" />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const analiseItems: DropdownLinkItem[] = [
|
||||||
|
{
|
||||||
|
href: "/insights",
|
||||||
|
label: "Insights",
|
||||||
|
icon: <RiSparklingLine className="size-4" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/relatorios/tendencias",
|
||||||
|
label: "Tendências",
|
||||||
|
icon: <RiFileChartLine className="size-4" />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: "/relatorios/uso-cartoes",
|
||||||
|
label: "Uso de Cartões",
|
||||||
|
icon: <RiBankCard2Line className="size-4" />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Desktop nav */}
|
||||||
|
<nav className="hidden md:flex items-center flex-1">
|
||||||
|
<NavigationMenu>
|
||||||
|
<NavigationMenuList className="gap-0">
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<SimpleNavLink href="/dashboard">Dashboard</SimpleNavLink>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<NavigationMenuTrigger className={triggerClass}>
|
||||||
|
Lançamentos
|
||||||
|
</NavigationMenuTrigger>
|
||||||
|
<NavigationMenuContent>
|
||||||
|
<DropdownLinkList items={lancamentosItems} />
|
||||||
|
</NavigationMenuContent>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<SimpleNavLink href="/calendario">Calendário</SimpleNavLink>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<SimpleNavLink href="/cartoes">Cartões</SimpleNavLink>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<SimpleNavLink href="/contas">Contas</SimpleNavLink>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<NavigationMenuTrigger className={triggerClass}>
|
||||||
|
Organização
|
||||||
|
</NavigationMenuTrigger>
|
||||||
|
<NavigationMenuContent>
|
||||||
|
<DropdownLinkList items={organizacaoItems} />
|
||||||
|
</NavigationMenuContent>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
|
||||||
|
<NavigationMenuItem>
|
||||||
|
<NavigationMenuTrigger className={triggerClass}>
|
||||||
|
Análise
|
||||||
|
</NavigationMenuTrigger>
|
||||||
|
<NavigationMenuContent>
|
||||||
|
<DropdownLinkList items={analiseItems} />
|
||||||
|
</NavigationMenuContent>
|
||||||
|
</NavigationMenuItem>
|
||||||
|
</NavigationMenuList>
|
||||||
|
</NavigationMenu>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Mobile hamburger */}
|
||||||
|
<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="md:hidden text-primary-foreground hover:bg-primary-foreground/15 hover:text-primary-foreground"
|
||||||
|
>
|
||||||
|
<RiMenuLine className="size-5" />
|
||||||
|
<span className="sr-only">Abrir menu</span>
|
||||||
|
</Button>
|
||||||
|
</SheetTrigger>
|
||||||
|
<SheetContent side="left" className="w-72 p-0">
|
||||||
|
<SheetHeader className="p-4 border-b">
|
||||||
|
<SheetTitle>Menu</SheetTitle>
|
||||||
|
</SheetHeader>
|
||||||
|
<nav className="p-3 overflow-y-auto">
|
||||||
|
<MobileNavLink
|
||||||
|
href="/dashboard"
|
||||||
|
icon={<RiDashboardLine className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</MobileNavLink>
|
||||||
|
|
||||||
|
<MobileSectionLabel label="Financeiro" />
|
||||||
|
<MobileNavLink
|
||||||
|
href="/lancamentos"
|
||||||
|
icon={<RiArrowLeftRightLine className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Lançamentos
|
||||||
|
</MobileNavLink>
|
||||||
|
<MobileNavLink
|
||||||
|
href="/pre-lancamentos"
|
||||||
|
icon={<RiInboxLine className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
badge={preLancamentosCount}
|
||||||
|
>
|
||||||
|
Pré-Lançamentos
|
||||||
|
</MobileNavLink>
|
||||||
|
<MobileNavLink
|
||||||
|
href="/calendario"
|
||||||
|
icon={<RiCalendarEventLine className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Calendário
|
||||||
|
</MobileNavLink>
|
||||||
|
<MobileNavLink
|
||||||
|
href="/cartoes"
|
||||||
|
icon={<RiBankCard2Line className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Cartões
|
||||||
|
</MobileNavLink>
|
||||||
|
<MobileNavLink
|
||||||
|
href="/contas"
|
||||||
|
icon={<RiBankLine className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Contas
|
||||||
|
</MobileNavLink>
|
||||||
|
|
||||||
|
<MobileSectionLabel label="Organização" />
|
||||||
|
<MobileNavLink
|
||||||
|
href="/orcamentos"
|
||||||
|
icon={<RiFundsLine className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Orçamentos
|
||||||
|
</MobileNavLink>
|
||||||
|
<MobileNavLink
|
||||||
|
href="/pagadores"
|
||||||
|
icon={<RiGroupLine className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Pagadores
|
||||||
|
</MobileNavLink>
|
||||||
|
<MobileNavLink
|
||||||
|
href="/categorias"
|
||||||
|
icon={<RiPriceTag3Line className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Categorias
|
||||||
|
</MobileNavLink>
|
||||||
|
<MobileNavLink
|
||||||
|
href="/anotacoes"
|
||||||
|
icon={<RiTodoLine className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Anotações
|
||||||
|
</MobileNavLink>
|
||||||
|
|
||||||
|
<MobileSectionLabel label="Análise" />
|
||||||
|
<MobileNavLink
|
||||||
|
href="/insights"
|
||||||
|
icon={<RiSparklingLine className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Insights
|
||||||
|
</MobileNavLink>
|
||||||
|
<MobileNavLink
|
||||||
|
href="/relatorios/tendencias"
|
||||||
|
icon={<RiFileChartLine className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Tendências
|
||||||
|
</MobileNavLink>
|
||||||
|
<MobileNavLink
|
||||||
|
href="/relatorios/uso-cartoes"
|
||||||
|
icon={<RiBankCard2Line className="size-4" />}
|
||||||
|
onClick={close}
|
||||||
|
>
|
||||||
|
Uso de Cartões
|
||||||
|
</MobileNavLink>
|
||||||
|
</nav>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
82
components/topbar/topbar-user.tsx
Normal file
82
components/topbar/topbar-user.tsx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { RiSettings2Line } from "@remixicon/react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useMemo } from "react";
|
||||||
|
import LogoutButton from "@/components/auth/logout-button";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { getAvatarSrc } from "@/lib/pagadores/utils";
|
||||||
|
|
||||||
|
type TopbarUserProps = {
|
||||||
|
user: {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
image: string | null;
|
||||||
|
};
|
||||||
|
pagadorAvatarUrl: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function TopbarUser({ user, pagadorAvatarUrl }: TopbarUserProps) {
|
||||||
|
const avatarSrc = useMemo(() => {
|
||||||
|
if (pagadorAvatarUrl) return getAvatarSrc(pagadorAvatarUrl);
|
||||||
|
if (user.image) return user.image;
|
||||||
|
return getAvatarSrc(null);
|
||||||
|
}, [user.image, pagadorAvatarUrl]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex items-center rounded-full ring-2 ring-primary-foreground/40 hover:ring-primary-foreground/80 transition-all focus-visible:outline-none focus-visible:ring-primary-foreground"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={avatarSrc}
|
||||||
|
alt={user.name}
|
||||||
|
width={32}
|
||||||
|
height={32}
|
||||||
|
className="size-8 rounded-full object-cover"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" className="w-60 p-2" sideOffset={10}>
|
||||||
|
<DropdownMenuLabel className="flex items-center gap-3 px-2 py-2">
|
||||||
|
<Image
|
||||||
|
src={avatarSrc}
|
||||||
|
alt={user.name}
|
||||||
|
width={36}
|
||||||
|
height={36}
|
||||||
|
className="size-9 rounded-full object-cover shrink-0"
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col min-w-0">
|
||||||
|
<span className="text-sm font-medium truncate">{user.name}</span>
|
||||||
|
<span className="text-xs text-muted-foreground truncate">
|
||||||
|
{user.email}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<div className="flex flex-col gap-1 pt-1">
|
||||||
|
<Link
|
||||||
|
href="/ajustes"
|
||||||
|
className="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent transition-colors"
|
||||||
|
>
|
||||||
|
<RiSettings2Line className="size-4 text-muted-foreground" />
|
||||||
|
Ajustes
|
||||||
|
</Link>
|
||||||
|
<div className="px-1 py-0.5">
|
||||||
|
<LogoutButton />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
167
components/ui/navigation-menu.tsx
Normal file
167
components/ui/navigation-menu.tsx
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
import { RiArrowDownBoxFill } from "@remixicon/react";
|
||||||
|
import { cva } from "class-variance-authority";
|
||||||
|
import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
|
||||||
|
import type * as React from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
function NavigationMenu({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
viewport = true,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
|
||||||
|
viewport?: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Root
|
||||||
|
data-slot="navigation-menu"
|
||||||
|
data-viewport={viewport}
|
||||||
|
className={cn(
|
||||||
|
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{viewport && <NavigationMenuViewport />}
|
||||||
|
</NavigationMenuPrimitive.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuList({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.List
|
||||||
|
data-slot="navigation-menu-list"
|
||||||
|
className={cn(
|
||||||
|
"group flex flex-1 list-none items-center justify-center gap-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuItem({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Item
|
||||||
|
data-slot="navigation-menu-item"
|
||||||
|
className={cn("relative", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const navigationMenuTriggerStyle = cva(
|
||||||
|
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
|
||||||
|
);
|
||||||
|
|
||||||
|
function NavigationMenuTrigger({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Trigger
|
||||||
|
data-slot="navigation-menu-trigger"
|
||||||
|
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}{" "}
|
||||||
|
<RiArrowDownBoxFill
|
||||||
|
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</NavigationMenuPrimitive.Trigger>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuContent({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Content
|
||||||
|
data-slot="navigation-menu-content"
|
||||||
|
className={cn(
|
||||||
|
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
|
||||||
|
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuViewport({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"absolute top-full left-0 isolate z-50 flex justify-center",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<NavigationMenuPrimitive.Viewport
|
||||||
|
data-slot="navigation-menu-viewport"
|
||||||
|
className={cn(
|
||||||
|
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuLink({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Link
|
||||||
|
data-slot="navigation-menu-link"
|
||||||
|
className={cn(
|
||||||
|
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function NavigationMenuIndicator({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
|
||||||
|
return (
|
||||||
|
<NavigationMenuPrimitive.Indicator
|
||||||
|
data-slot="navigation-menu-indicator"
|
||||||
|
className={cn(
|
||||||
|
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
|
||||||
|
</NavigationMenuPrimitive.Indicator>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
NavigationMenu,
|
||||||
|
NavigationMenuList,
|
||||||
|
NavigationMenuItem,
|
||||||
|
NavigationMenuContent,
|
||||||
|
NavigationMenuTrigger,
|
||||||
|
NavigationMenuLink,
|
||||||
|
NavigationMenuIndicator,
|
||||||
|
NavigationMenuViewport,
|
||||||
|
navigationMenuTriggerStyle,
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user