feat(navegacao): adiciona atalhos financeiros e seletor mensal

src/shared/components/navigation/navbar/nav-menu.tsx

@@ -22,9 +22,13 @@ import {
 	SheetTrigger,
 } from "@/shared/components/ui/sheet";
 import { cn } from "@/shared/utils/ui";
-import { MobileLink, MobileSectionLabel } from "./mobile-link";
+import {
+	MobileFinanceEntityLinks,
+	MobileLink,
+	MobileSectionLabel,
+} from "./mobile-link";
 import { NavDropdown } from "./nav-dropdown";
-import { NAV_SECTIONS } from "./nav-items";
+import { NAV_SECTIONS, type NavbarFinanceLinks } from "./nav-items";
 import { NavPill } from "./nav-pill";
 import { MobileTools, NavToolsDropdown } from "./nav-tools";
 
@@ -34,7 +38,11 @@ const triggerClass =
 const triggerActiveClass =
 	"bg-primary-foreground/15! text-primary-foreground! dark:bg-foreground/15! dark:text-foreground!";
 
-export function NavMenu() {
+export function NavMenu({
+	financeLinks,
+}: {
+	financeLinks: NavbarFinanceLinks;
+}) {
 	const pathname = usePathname();
 	const [sheetOpen, setSheetOpen] = useState(false);
 	const [calculatorOpen, setCalculatorOpen] = useState(false);
@@ -73,8 +81,19 @@ export function NavMenu() {
 									>
 										{section.label}
 									</NavigationMenuTrigger>
-									<NavigationMenuContent>
-										<NavDropdown items={section.items} />
+									<NavigationMenuContent
+										className={
+											section.label === "Finanças"
+												? "overflow-visible!"
+												: undefined
+										}
+									>
+										<NavDropdown
+											items={section.items}
+											financeLinks={
+												section.label === "Finanças" ? financeLinks : undefined
+											}
+										/>
 									</NavigationMenuContent>
 								</NavigationMenuItem>
 							);
@@ -130,17 +149,33 @@ export function NavMenu() {
 								<div key={section.label}>
 									<MobileSectionLabel label={section.label} />
 									{mobileItems.map((item) => (
-										<MobileLink
-											key={item.href}
-											href={item.href}
-											icon={item.icon}
-											onClick={close}
-											badge={item.badge}
-											preservePeriod={item.preservePeriod}
-											description={item.description}
-										>
-											{item.label}
-										</MobileLink>
+										<div key={item.href}>
+											<MobileLink
+												href={item.href}
+												icon={item.icon}
+												onClick={close}
+												badge={item.badge}
+												preservePeriod={item.preservePeriod}
+												description={item.description}
+											>
+												{item.label}
+											</MobileLink>
+											{item.href === "/cards" && financeLinks.cards.length ? (
+												<MobileFinanceEntityLinks
+													type="cards"
+													items={financeLinks.cards}
+													onClick={close}
+												/>
+											) : null}
+											{item.href === "/accounts" &&
+											financeLinks.accounts.length ? (
+												<MobileFinanceEntityLinks
+													type="accounts"
+													items={financeLinks.accounts}
+													onClick={close}
+												/>
+											) : null}
+										</div>
 									))}
 								</div>
 							);