git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-06-10 07:16:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: refina base visual e navegação

Browse Source
This commit is contained in:
Felipe Coutinho
2026-03-15 23:23:00 +00:00
parent 5a78fd614c
commit 64eb29d807
20 changed files with 350 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/shared/components/navigation/navbar/nav-dropdown.tsx
View File

@@ -1,6 +1,8 @@
"use client";
import { usePathname } from "next/navigation";
import { Badge } from "@/shared/components/ui/badge";
import { cn } from "@/shared/utils/ui";
import type { NavItem } from "./nav-items";
import { NavLink } from "./nav-link";
@@ -9,28 +11,60 @@ type NavDropdownProps = {
};
export function NavDropdown({ items }: NavDropdownProps) {
const pathname = usePathname();
return (
<ul className="grid w-48 gap-0.5 p-2">
{items.map((item) => (
<li key={item.href}>
<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>
<span className="flex-1">{item.label}</span>
{item.badge && item.badge > 0 ? (
<Badge
variant="secondary"
className="text-xs px-1.5 py-0 h-4 min-w-4 ml-auto"
<ul className="grid w-72 gap-0.5 p-2">
{items.map((item) => {
const isActive =
pathname === item.href || pathname.startsWith(`${item.href}/`);
return (
<li key={item.href}>
<NavLink
href={item.href}
preservePeriod={item.preservePeriod}
className={cn(
"flex items-center gap-3 rounded-sm px-2 py-2 text-sm transition-colors",
isActive
? "bg-accent text-foreground"
: "text-foreground hover:bg-accent",
)}
>
<span
className={cn(
"shrink-0",
isActive
? (item.iconClass ?? "text-foreground")
: (item.iconClass ?? "text-muted-foreground"),
)}
>
{item.badge}
</Badge>
) : null}
</NavLink>
</li>
))}
{item.icon}
</span>
<span className="flex flex-col min-w-0">
<span
className={cn("font-medium", isActive && "font-semibold")}
>
{item.label}
</span>
{item.description && (
<span className="text-xs text-muted-foreground truncate lowercase">
{item.description}
</span>
)}
</span>
{item.badge && item.badge > 0 ? (
<Badge
variant="secondary"
className="text-xs px-1.5 py-0 h-4 min-w-4 ml-auto shrink-0"
>
{item.badge}
</Badge>
) : null}
</NavLink>
</li>
);
})}
</ul>
);
}