forked from git.gladyson/openmonetis
refactor: desacoplar componentes do top-nav-menu em arquivos separados
- 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
@@ -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
39
components/topbar/dropdown-link-list.tsx
Normal 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
56
components/topbar/mobile-nav-link.tsx
Normal 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
20
components/topbar/nav-styles.ts
Normal 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
28
components/topbar/simple-nav-link.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user