refactor: substituir topbar por navbar componentizada

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

components/navbar/app-navbar.tsx

@@ -4,10 +4,10 @@ import { NotificationBell } from "@/components/notificacoes/notification-bell";
 import { RefreshPageButton } from "@/components/refresh-page-button";
 import type { DashboardNotificationsSnapshot } from "@/lib/dashboard/notifications";
 import { Logo } from "../logo";
-import { TopNavMenu } from "./top-nav-menu";
-import { TopbarUser } from "./topbar-user";
+import { NavMenu } from "./nav-menu";
+import { NavbarUser } from "./navbar-user";
 
-type AppTopbarProps = {
+type AppNavbarProps = {
 	user: {
 		id: string;
 		name: string;
@@ -19,14 +19,14 @@ type AppTopbarProps = {
 	notificationsSnapshot: DashboardNotificationsSnapshot;
 };
 
-export function AppTopbar({
+export function AppNavbar({
 	user,
 	pagadorAvatarUrl,
 	preLancamentosCount = 0,
 	notificationsSnapshot,
-}: AppTopbarProps) {
+}: AppNavbarProps) {
 	return (
-		<header className="fixed top-0 left-0 right-0 z-50 h-15 shrink-0 flex items-center bg-card/80 backdrop-blur-md supports-backdrop-filter:bg-card/70">
+		<header className="fixed top-0 left-0 right-0 z-50 h-15 shrink-0 flex items-center bg-card backdrop-blur-lg supports-backdrop-filter:bg-card/60">
 			<div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-4 h-full">
 				{/* Logo */}
 				<Link href="/dashboard" className="shrink-0 mr-1">
@@ -34,7 +34,7 @@ export function AppTopbar({
 				</Link>
 
 				{/* Navigation */}
-				<TopNavMenu />
+				<NavMenu />
 
 				{/* Right-side actions */}
 				<div className="ml-auto flex items-center gap-2">
@@ -49,7 +49,7 @@ export function AppTopbar({
 				</div>
 
 				{/* User avatar */}
-				<TopbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
+				<NavbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
 			</div>
 		</header>
 	);

components/navbar/mobile-link.tsx

@@ -1,34 +1,38 @@
 "use client";
 
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils/ui";
+import { NavLink } from "./nav-link";
 
-type MobileNavLinkProps = {
+type MobileLinkProps = {
 	href: string;
 	icon: React.ReactNode;
 	children: React.ReactNode;
 	onClick?: () => void;
 	badge?: number;
+	preservePeriod?: boolean;
 };
 
-export function MobileNavLink({
+export function MobileLink({
 	href,
 	icon,
 	children,
 	onClick,
 	badge,
-}: MobileNavLinkProps) {
+	preservePeriod,
+}: MobileLinkProps) {
 	const pathname = usePathname();
+
 	const isActive =
 		href === "/dashboard"
 			? pathname === href
 			: pathname === href || pathname.startsWith(`${href}/`);
 
 	return (
-		<Link
+		<NavLink
 			href={href}
+			preservePeriod={preservePeriod}
 			onClick={onClick}
 			className={cn(
 				"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
@@ -43,7 +47,7 @@ export function MobileNavLink({
 					{badge}
 				</Badge>
 			) : null}
-		</Link>
+		</NavLink>
 	);
 }
 

components/navbar/nav-dropdown.tsx

@@ -1,24 +1,21 @@
-import Link from "next/link";
+"use client";
+
 import { Badge } from "@/components/ui/badge";
+import type { NavItem } from "./nav-items";
+import { NavLink } from "./nav-link";
 
-export type DropdownLinkItem = {
-	href: string;
-	label: string;
-	icon: React.ReactNode;
-	badge?: number;
+type NavDropdownProps = {
+	items: NavItem[];
 };
 
-type DropdownLinkListProps = {
-	items: DropdownLinkItem[];
-};
-
-export function DropdownLinkList({ items }: DropdownLinkListProps) {
+export function NavDropdown({ items }: NavDropdownProps) {
 	return (
 		<ul className="grid w-48 gap-0.5 p-2">
 			{items.map((item) => (
 				<li key={item.href}>
-					<Link
+					<NavLink
 						href={item.href}
+						preservePeriod={item.preservePeriod}
 						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>
@@ -31,7 +28,7 @@ export function DropdownLinkList({ items }: DropdownLinkListProps) {
 								{item.badge}
 							</Badge>
 						) : null}
-					</Link>
+					</NavLink>
 				</li>
 			))}
 		</ul>

components/navbar/nav-items.tsx

@@ -0,0 +1,113 @@
+import {
+	RiArrowLeftRightLine,
+	RiBankCard2Line,
+	RiBankLine,
+	RiCalendarEventLine,
+	RiFileChartLine,
+	RiFundsLine,
+	RiGroupLine,
+	RiInboxLine,
+	RiPriceTag3Line,
+	RiSparklingLine,
+	RiTodoLine,
+} from "@remixicon/react";
+
+export type NavItem = {
+	href: string;
+	label: string;
+	icon: React.ReactNode;
+	badge?: number;
+	preservePeriod?: boolean;
+};
+
+export type NavSection = {
+	label: string;
+	items: NavItem[];
+};
+
+export const NAV_SECTIONS: NavSection[] = [
+	{
+		label: "Lançamentos",
+		items: [
+			{
+				href: "/lancamentos",
+				label: "lançamentos",
+				icon: <RiArrowLeftRightLine className="size-4" />,
+				preservePeriod: true,
+			},
+			{
+				href: "/pre-lancamentos",
+				label: "pré-lançamentos",
+				icon: <RiInboxLine className="size-4" />,
+			},
+			{
+				href: "/calendario",
+				label: "calendário",
+				icon: <RiCalendarEventLine className="size-4" />,
+			},
+		],
+	},
+	{
+		label: "Finanças",
+		items: [
+			{
+				href: "/cartoes",
+				label: "cartões",
+				icon: <RiBankCard2Line className="size-4" />,
+			},
+			{
+				href: "/contas",
+				label: "contas",
+				icon: <RiBankLine className="size-4" />,
+			},
+			{
+				href: "/orcamentos",
+				label: "orçamentos",
+				icon: <RiFundsLine className="size-4" />,
+				preservePeriod: true,
+			},
+		],
+	},
+	{
+		label: "Organização",
+		items: [
+			{
+				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" />,
+			},
+		],
+	},
+	{
+		label: "Relatórios",
+		items: [
+			{
+				href: "/insights",
+				label: "insights",
+				icon: <RiSparklingLine className="size-4" />,
+				preservePeriod: true,
+			},
+			{
+				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" />,
+				preservePeriod: true,
+			},
+		],
+	},
+];

components/navbar/nav-link.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+
+const PERIOD_PARAM = "periodo";
+
+type NavLinkProps = Omit<React.ComponentProps<typeof Link>, "href"> & {
+	href: string;
+	preservePeriod?: boolean;
+};
+
+export function NavLink({
+	href,
+	preservePeriod = false,
+	...props
+}: NavLinkProps) {
+	const searchParams = useSearchParams();
+
+	const resolvedHref = useMemo(() => {
+		if (!preservePeriod) return href;
+		const periodo = searchParams.get(PERIOD_PARAM);
+		if (!periodo) return href;
+		const separator = href.includes("?") ? "&" : "?";
+		return `${href}${separator}${PERIOD_PARAM}=${encodeURIComponent(periodo)}`;
+	}, [href, preservePeriod, searchParams]);
+
+	return <Link href={resolvedHref} {...props} />;
+}

components/navbar/nav-menu.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { RiDashboardLine, RiMenuLine } from "@remixicon/react";
+import { useState } from "react";
+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 { MobileLink, MobileSectionLabel } from "./mobile-link";
+import { NavDropdown } from "./nav-dropdown";
+import { NAV_SECTIONS } from "./nav-items";
+import { NavPill } from "./nav-pill";
+import { triggerClass } from "./nav-styles";
+import { MobileTools, NavToolsDropdown } from "./nav-tools";
+
+export function NavMenu() {
+	const [sheetOpen, setSheetOpen] = useState(false);
+	const close = () => setSheetOpen(false);
+
+	return (
+		<>
+			{/* Desktop */}
+			<nav className="hidden md:flex items-center flex-1">
+				<NavigationMenu viewport={false}>
+					<NavigationMenuList className="gap-0">
+						<NavigationMenuItem>
+							<NavPill href="/dashboard" preservePeriod>
+								Dashboard
+							</NavPill>
+						</NavigationMenuItem>
+
+						{NAV_SECTIONS.map((section) => (
+							<NavigationMenuItem key={section.label}>
+								<NavigationMenuTrigger className={triggerClass}>
+									{section.label}
+								</NavigationMenuTrigger>
+								<NavigationMenuContent>
+									<NavDropdown items={section.items} />
+								</NavigationMenuContent>
+							</NavigationMenuItem>
+						))}
+
+						<NavigationMenuItem>
+							<NavigationMenuTrigger className={triggerClass}>
+								Ferramentas
+							</NavigationMenuTrigger>
+							<NavigationMenuContent>
+								<NavToolsDropdown />
+							</NavigationMenuContent>
+						</NavigationMenuItem>
+					</NavigationMenuList>
+				</NavigationMenu>
+			</nav>
+
+			{/* Mobile */}
+			<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+				<SheetTrigger asChild>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="md:hidden text-foreground hover:bg-foreground/10 hover:text-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">
+						<MobileLink
+							href="/dashboard"
+							icon={<RiDashboardLine className="size-4" />}
+							onClick={close}
+							preservePeriod
+						>
+							Dashboard
+						</MobileLink>
+
+						{NAV_SECTIONS.map((section) => (
+							<div key={section.label}>
+								<MobileSectionLabel label={section.label} />
+								{section.items.map((item) => (
+									<MobileLink
+										key={item.href}
+										href={item.href}
+										icon={item.icon}
+										onClick={close}
+										badge={item.badge}
+										preservePeriod={item.preservePeriod}
+									>
+										{item.label}
+									</MobileLink>
+								))}
+							</div>
+						))}
+
+						<MobileSectionLabel label="Ferramentas" />
+						<MobileTools onClose={close} />
+					</nav>
+				</SheetContent>
+			</Sheet>
+		</>
+	);
+}

components/navbar/nav-pill.tsx

@@ -1,28 +1,31 @@
 "use client";
 
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils/ui";
+import { NavLink } from "./nav-link";
 import { linkActive, linkBase, linkIdle } from "./nav-styles";
 
-type SimpleNavLinkProps = {
+type NavPillProps = {
 	href: string;
+	preservePeriod?: boolean;
 	children: React.ReactNode;
 };
 
-export function SimpleNavLink({ href, children }: SimpleNavLinkProps) {
+export function NavPill({ href, preservePeriod, children }: NavPillProps) {
 	const pathname = usePathname();
+
 	const isActive =
 		href === "/dashboard"
 			? pathname === href
 			: pathname === href || pathname.startsWith(`${href}/`);
 
 	return (
-		<Link
+		<NavLink
 			href={href}
+			preservePeriod={preservePeriod}
 			className={cn(linkBase, isActive ? linkActive : linkIdle)}
 		>
 			{children}
-		</Link>
+		</NavLink>
 	);
 }

components/navbar/nav-tools.tsx

@@ -11,7 +11,7 @@ import { cn } from "@/lib/utils/ui";
 const itemClass =
 	"flex w-full items-center gap-2.5 rounded-sm px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors cursor-pointer";
 
-export function FerramentasDropdownContent() {
+export function NavToolsDropdown() {
 	const { privacyMode, toggle } = usePrivacyMode();
 	const [calcOpen, setCalcOpen] = useState(false);
 
@@ -54,13 +54,11 @@ export function FerramentasDropdownContent() {
 	);
 }
 
-type MobileFerramentasItemsProps = {
+type MobileToolsProps = {
 	onClose: () => void;
 };
 
-export function MobileFerramentasItems({
-	onClose,
-}: MobileFerramentasItemsProps) {
+export function MobileTools({ onClose }: MobileToolsProps) {
 	const { privacyMode, toggle } = usePrivacyMode();
 	const [calcOpen, setCalcOpen] = useState(false);
 

components/navbar/navbar-user.tsx

@@ -29,7 +29,7 @@ import { Badge } from "../ui/badge";
 const itemClass =
 	"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent";
 
-type TopbarUserProps = {
+type NavbarUserProps = {
 	user: {
 		id: string;
 		name: string;
@@ -39,7 +39,7 @@ type TopbarUserProps = {
 	pagadorAvatarUrl: string | null;
 };
 
-export function TopbarUser({ user, pagadorAvatarUrl }: TopbarUserProps) {
+export function NavbarUser({ user, pagadorAvatarUrl }: NavbarUserProps) {
 	const router = useRouter();
 	const [logoutLoading, setLogoutLoading] = useState(false);
 	const [feedbackOpen, setFeedbackOpen] = useState(false);

components/topbar/top-nav-menu.tsx

@@ -1,302 +0,0 @@
-"use client";
-
-import {
-	RiArrowLeftRightLine,
-	RiBankCard2Line,
-	RiBankLine,
-	RiCalendarEventLine,
-	RiDashboardLine,
-	RiFileChartLine,
-	RiFundsLine,
-	RiGroupLine,
-	RiInboxLine,
-	RiMenuLine,
-	RiPriceTag3Line,
-	RiSparklingLine,
-	RiTodoLine,
-} from "@remixicon/react";
-import { useState } from "react";
-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 type { DropdownLinkItem } from "./dropdown-link-list";
-import { DropdownLinkList } from "./dropdown-link-list";
-import {
-	FerramentasDropdownContent,
-	MobileFerramentasItems,
-} from "./ferramentas-dropdown";
-import { MobileNavLink, MobileSectionLabel } from "./mobile-nav-link";
-import { triggerClass } from "./nav-styles";
-import { SimpleNavLink } from "./simple-nav-link";
-
-export function TopNavMenu() {
-	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" />,
-		},
-		{
-			href: "/calendario",
-			label: "calendário",
-			icon: <RiCalendarEventLine className="size-4" />,
-		},
-	];
-
-	const financasItems: DropdownLinkItem[] = [
-		{
-			href: "/cartoes",
-			label: "cartões",
-			icon: <RiBankCard2Line className="size-4" />,
-		},
-		{
-			href: "/contas",
-			label: "contas",
-			icon: <RiBankLine className="size-4" />,
-		},
-		{
-			href: "/orcamentos",
-			label: "orçamentos",
-			icon: <RiFundsLine className="size-4" />,
-		},
-	];
-
-	const organizacaoItems: DropdownLinkItem[] = [
-		{
-			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 viewport={false}>
-					<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>
-							<NavigationMenuTrigger className={triggerClass}>
-								Finanças
-							</NavigationMenuTrigger>
-							<NavigationMenuContent>
-								<DropdownLinkList items={financasItems} />
-							</NavigationMenuContent>
-						</NavigationMenuItem>
-
-						<NavigationMenuItem>
-							<NavigationMenuTrigger className={triggerClass}>
-								Organização
-							</NavigationMenuTrigger>
-							<NavigationMenuContent>
-								<DropdownLinkList items={organizacaoItems} />
-							</NavigationMenuContent>
-						</NavigationMenuItem>
-
-						<NavigationMenuItem>
-							<NavigationMenuTrigger className={triggerClass}>
-								Relatórios
-							</NavigationMenuTrigger>
-							<NavigationMenuContent>
-								<DropdownLinkList items={analiseItems} />
-							</NavigationMenuContent>
-						</NavigationMenuItem>
-
-						<NavigationMenuItem>
-							<NavigationMenuTrigger className={triggerClass}>
-								Ferramentas
-							</NavigationMenuTrigger>
-							<NavigationMenuContent>
-								<FerramentasDropdownContent />
-							</NavigationMenuContent>
-						</NavigationMenuItem>
-					</NavigationMenuList>
-				</NavigationMenu>
-			</nav>
-
-			{/* Mobile hamburger */}
-			<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-				<SheetTrigger asChild>
-					<Button
-						variant="ghost"
-						size="icon"
-						className="md:hidden text-foreground hover:bg-foreground/10 hover:text-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="Lançamentos" />
-						<MobileNavLink
-							href="/lancamentos"
-							icon={<RiArrowLeftRightLine className="size-4" />}
-							onClick={close}
-						>
-							lançamentos
-						</MobileNavLink>
-						<MobileNavLink
-							href="/pre-lancamentos"
-							icon={<RiInboxLine className="size-4" />}
-							onClick={close}
-						>
-							pré-lançamentos
-						</MobileNavLink>
-						<MobileNavLink
-							href="/calendario"
-							icon={<RiCalendarEventLine className="size-4" />}
-							onClick={close}
-						>
-							calendário
-						</MobileNavLink>
-
-						<MobileSectionLabel label="Finanças" />
-						<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>
-						<MobileNavLink
-							href="/orcamentos"
-							icon={<RiFundsLine className="size-4" />}
-							onClick={close}
-						>
-							orçamentos
-						</MobileNavLink>
-
-						<MobileSectionLabel label="Organização" />
-						<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>
-
-						<MobileSectionLabel label="Ferramentas" />
-						<MobileFerramentasItems onClose={close} />
-					</nav>
-				</SheetContent>
-			</Sheet>
-		</>
-	);
-}