Gladyson/openmonetis
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: desacoplar componentes do top-nav-menu em arquivos separados

Browse Source 
- nav-styles.ts: constantes de estilo (linkBase, linkIdle, linkActive, triggerClass)
- simple-nav-link.tsx: link direto com estado ativo
- dropdown-link-list.tsx: lista de itens de dropdown com tipo DropdownLinkItem
- mobile-nav-link.tsx: MobileNavLink e MobileSectionLabel para o Sheet mobile
- top-nav-menu.tsx: apenas TopNavMenu, importa dos arquivos acima

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-02-22 22:38:29 +00:00
parent 87f919b9f5
commit d24157ed5b
6 changed files with 149 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/topbar/app-topbar.tsx
View File

@@ -29,7 +29,7 @@ export function AppTopbar({
notificationsSnapshot,
}: AppTopbarProps) {
return (
<header className="fixed top-0 left-0 right-0 z-50 bg-card h-14 shrink-0 flex items-center border-b">
<header className="fixed top-0 left-0 right-0 z-50 bg-card h-14 shrink-0 flex items-center">
<div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-3 h-full">
{/* Logo */}
<Link

39
components/topbar/dropdown-link-list.tsx Normal file
View File

@@ -0,0 +1,39 @@
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
export type DropdownLinkItem = {
href: string;
label: string;
icon: React.ReactNode;
badge?: number;
};
type DropdownLinkListProps = {
items: DropdownLinkItem[];
};
export function DropdownLinkList({ items }: DropdownLinkListProps) {
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>
);
}

56
components/topbar/mobile-nav-link.tsx Normal file
View File

@@ -0,0 +1,56 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils/ui";
type MobileNavLinkProps = {
href: string;
icon: React.ReactNode;
children: React.ReactNode;
onClick?: () => void;
badge?: number;
};
export function MobileNavLink({
href,
icon,
children,
onClick,
badge,
}: MobileNavLinkProps) {
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-card-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>
);
}
export 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>
);
}

20
components/topbar/nav-styles.ts Normal file
View File

@@ -0,0 +1,20 @@
export const linkBase =
"inline-flex h-9 items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors";
export const linkIdle = "text-foreground hover:text-foreground hover:underline";
export const linkActive = "text-primary";
export const triggerClass = [
"text-foreground!",
"bg-transparent!",
"hover:bg-transparent!",
"hover:text-foreground!",
"hover:underline!",
"focus:bg-transparent!",
"focus:text-foreground!",
"data-[state=open]:bg-transparent!",
"data-[state=open]:text-foreground!",
"data-[state=open]:underline!",
"px-3!",
].join(" ");

28
components/topbar/simple-nav-link.tsx Normal file
View File

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

133
components/topbar/top-nav-menu.tsx
View File

@@ -15,10 +15,7 @@ import {
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,
@@ -34,136 +31,16 @@ import {
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";
import { cn } from "@/lib/utils/ui";
import type { DropdownLinkItem } from "./dropdown-link-list";
import { DropdownLinkList } from "./dropdown-link-list";
import { MobileNavLink, MobileSectionLabel } from "./mobile-nav-link";
import { triggerClass } from "./nav-styles";
import { SimpleNavLink } from "./simple-nav-link";
type TopNavMenuProps = {
preLancamentosCount?: number;
};
const linkBase =
"inline-flex h-9 items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors";
const linkIdle = "text-foreground hover:text-foreground hover:underline";
const linkActive = "text-primary";
// NavigationMenuTrigger override: remove backgrounds, keep underline style
const triggerClass = [
"text-foreground!",
"bg-transparent!",
"hover:bg-transparent!",
"hover:text-foreground!",
"hover:underline!",
"focus:bg-transparent!",
"focus:text-foreground!",
"data-[state=open]:bg-transparent!",
"data-[state=open]:text-foreground!",
"data-[state=open]:underline!",
"px-3!",
].join(" ");
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(linkBase, isActive ? linkActive : linkIdle)}
>
{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-card-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);