mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-06-10 07:16:01 +00:00
refactor(nav): remover sidebar, unificar navegação na navbar
Componentes da sidebar lateral (app-sidebar, nav-main, nav-secondary, nav-user, nav-link), sidebar.tsx e use-mobile.ts removidos. Barrel exports órfãos de shared/hooks, shared/components/providers, shared/lib/schemas e shared/lib/types também removidos. Navbar recebe ajustes menores de markup e acessibilidade. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
@@ -25,10 +25,10 @@ export function NavDropdown({ items }: NavDropdownProps) {
|
||||
href={item.href}
|
||||
preservePeriod={item.preservePeriod}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-sm px-2 py-2 text-sm transition-colors",
|
||||
"flex items-center gap-3 rounded-sm px-2 py-3 text-sm transition-colors",
|
||||
isActive
|
||||
? "bg-accent text-foreground"
|
||||
: "text-foreground hover:bg-accent",
|
||||
? "border-primary bg-accent text-foreground"
|
||||
: "border-transparent text-foreground hover:bg-accent",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
|
||||
@@ -29,9 +29,10 @@ import { NavPill } from "./nav-pill";
|
||||
import { MobileTools, NavToolsDropdown } from "./nav-tools";
|
||||
|
||||
const triggerClass =
|
||||
"h-8! rounded-md! px-2! py-0! text-sm! font-medium! bg-transparent! shadow-none! capitalize! [&_svg]:text-current! text-black/75! hover:text-black! hover:bg-black/10! focus:text-black! focus:bg-black/10! focus-visible:ring-black/20! data-[state=open]:text-black! data-[state=open]:bg-black/10!";
|
||||
"h-8! rounded-md! px-2! py-0! text-sm! font-medium! bg-transparent! shadow-none! capitalize! [&_svg]:text-current! text-black/75! hover:text-black! hover:bg-black/10! focus:text-black! focus:bg-black/10! focus-visible:ring-black/20! data-[state=open]:text-black! data-[state=open]:bg-black/10! dark:text-white/75! dark:hover:text-white! dark:hover:bg-white/10! dark:focus:text-white! dark:focus:bg-white/10! dark:focus-visible:ring-white/20! dark:data-[state=open]:text-white! dark:data-[state=open]:bg-white/10!";
|
||||
|
||||
const triggerActiveClass = "bg-black/15! text-black!";
|
||||
const triggerActiveClass =
|
||||
"bg-black/15! text-black! dark:bg-white/15! dark:text-white!";
|
||||
|
||||
export function NavMenu() {
|
||||
const pathname = usePathname();
|
||||
|
||||
@@ -26,7 +26,7 @@ export function NavPill({ href, preservePeriod, children }: NavPillProps) {
|
||||
className={cn(
|
||||
buttonVariants({ variant: "navbar", size: "sm" }),
|
||||
"capitalize",
|
||||
isActive && "bg-black/15 text-black",
|
||||
isActive && "bg-black/15 text-black dark:bg-white/15 dark:text-white",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -5,7 +5,7 @@ import { usePrivacyMode } from "@/shared/components/providers/privacy-provider";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
|
||||
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";
|
||||
"flex w-full items-center gap-2.5 rounded-sm px-2 py-3 text-sm text-foreground hover:bg-accent transition-colors cursor-pointer";
|
||||
|
||||
type NavToolsDropdownProps = {
|
||||
onOpenCalculator: () => void;
|
||||
@@ -22,7 +22,7 @@ export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
|
||||
<RiCalculatorLine className="size-4" />
|
||||
</span>
|
||||
<span className="flex flex-col flex-1 text-left">
|
||||
<span className="font-medium">Calculadora</span>
|
||||
<span className="font-semibold">Calculadora</span>
|
||||
<span className="text-xs text-muted-foreground lowercase">
|
||||
Faça cálculos rápidos
|
||||
</span>
|
||||
@@ -39,7 +39,7 @@ export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
|
||||
)}
|
||||
</span>
|
||||
<span className="flex flex-col flex-1 text-left">
|
||||
<span className="font-medium">Privacidade</span>
|
||||
<span className="font-semibold">Privacidade</span>
|
||||
<span className="text-xs text-muted-foreground lowercase">
|
||||
Oculta valores na tela
|
||||
</span>
|
||||
|
||||
@@ -16,15 +16,21 @@ export function NavbarShell({
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`${positionClass} z-50 flex h-16 shrink-0 items-center bg-primary`}
|
||||
className={`${positionClass} z-50 flex h-16 shrink-0 items-center bg-primary border-b dark:bg-card dark:border-b-border/60`}
|
||||
>
|
||||
<div className="relative z-10 mx-auto flex h-full w-full max-w-8xl items-center gap-4 px-4">
|
||||
{logoHref ? (
|
||||
<Link href={logoHref} className="shrink-0">
|
||||
<Logo variant="compact" invertTextOnDark={false} />
|
||||
<Logo
|
||||
variant="compact"
|
||||
iconClassName="dark:brightness-100 dark:saturate-100"
|
||||
/>
|
||||
</Link>
|
||||
) : (
|
||||
<Logo variant="compact" invertTextOnDark={false} />
|
||||
<Logo
|
||||
variant="compact"
|
||||
iconClassName="dark:brightness-100 dark:saturate-100"
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -34,9 +34,11 @@ export function NotificationBellTrigger({
|
||||
className={cn(
|
||||
buttonVariants({ variant: "ghost", size: "icon-sm" }),
|
||||
"group relative shadow-none transition-all duration-200",
|
||||
"hover:border-black/20 hover:bg-black/10 hover:text-black focus-visible:ring-2 focus-visible:ring-black/20",
|
||||
"data-[state=open]:bg-black/10 data-[state=open]:text-black",
|
||||
hasAnySourceItems ? "text-black" : "text-black/75",
|
||||
"hover:border-black/20 hover:bg-black/10 hover:text-black focus-visible:ring-2 focus-visible:ring-black/20 dark:hover:border-white/20 dark:hover:bg-white/10 dark:hover:text-white dark:focus-visible:ring-white/20",
|
||||
"data-[state=open]:bg-black/10 data-[state=open]:text-black dark:data-[state=open]:bg-white/10 dark:data-[state=open]:text-white",
|
||||
hasAnySourceItems
|
||||
? "text-black dark:text-white"
|
||||
: "text-black/75 dark:text-white/75",
|
||||
)}
|
||||
>
|
||||
<RiNotification2Line
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
markDashboardNotificationAsReadAction,
|
||||
markDashboardNotificationAsUnreadAction,
|
||||
unarchiveDashboardNotificationAction,
|
||||
} from "@/features/dashboard/notifications-actions";
|
||||
} from "@/features/dashboard/notifications/notifications-actions";
|
||||
import type {
|
||||
NotificationActionState,
|
||||
NotificationBellProps,
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
"use client";
|
||||
import * as React from "react";
|
||||
import { Logo } from "@/shared/components/logo";
|
||||
import { NavMain } from "@/shared/components/navigation/sidebar/nav-main";
|
||||
import { NavSecondary } from "@/shared/components/navigation/sidebar/nav-secondary";
|
||||
import { NavUser } from "@/shared/components/navigation/sidebar/nav-user";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
useSidebar,
|
||||
} from "@/shared/components/ui/sidebar";
|
||||
import { createSidebarNavData, type PagadorLike } from "./nav-link";
|
||||
|
||||
type AppUser = {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
image: string | null;
|
||||
};
|
||||
|
||||
interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
|
||||
user: AppUser;
|
||||
pagadorAvatarUrl: string | null;
|
||||
pagadores: PagadorLike[];
|
||||
preLancamentosCount?: number;
|
||||
}
|
||||
|
||||
export function AppSidebar({
|
||||
user,
|
||||
pagadorAvatarUrl,
|
||||
pagadores,
|
||||
preLancamentosCount = 0,
|
||||
...props
|
||||
}: AppSidebarProps) {
|
||||
if (!user) {
|
||||
throw new Error("AppSidebar requires a user but received undefined.");
|
||||
}
|
||||
|
||||
const navigation = React.useMemo(
|
||||
() => createSidebarNavData({ pagadores, preLancamentosCount }),
|
||||
[pagadores, preLancamentosCount],
|
||||
);
|
||||
|
||||
return (
|
||||
<Sidebar collapsible="icon" {...props}>
|
||||
<SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
className="data-[slot=sidebar-menu-button]:px-1.5! hover:bg-transparent active:bg-transparent pt-8 py-6 justify-center hover:scale-120 scale-110 transition-all duration-200"
|
||||
>
|
||||
<a href="/dashboard">
|
||||
<LogoContent />
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<NavMain sections={navigation.navMain} />
|
||||
<NavSecondary items={navigation.navSecondary} className="mt-auto" />
|
||||
</SidebarContent>
|
||||
<SidebarFooter>
|
||||
<NavUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
function LogoContent() {
|
||||
const { state } = useSidebar();
|
||||
const isCollapsed = state === "collapsed";
|
||||
|
||||
return <Logo variant={isCollapsed ? "small" : "full"} />;
|
||||
}
|
||||
@@ -1,185 +0,0 @@
|
||||
import {
|
||||
type RemixiconComponentType,
|
||||
RiArrowLeftRightLine,
|
||||
RiAtLine,
|
||||
RiBankCard2Line,
|
||||
RiBankLine,
|
||||
RiCalendarEventLine,
|
||||
RiDashboardLine,
|
||||
RiFileChartLine,
|
||||
RiFundsLine,
|
||||
RiGroupLine,
|
||||
RiPriceTag3Line,
|
||||
RiSecurePaymentLine,
|
||||
RiSettings2Line,
|
||||
RiSparklingLine,
|
||||
RiTodoLine,
|
||||
} from "@remixicon/react";
|
||||
|
||||
export type SidebarSubItem = {
|
||||
title: string;
|
||||
url: string;
|
||||
avatarUrl?: string | null;
|
||||
isShared?: boolean;
|
||||
key?: string;
|
||||
icon?: RemixiconComponentType;
|
||||
badge?: number;
|
||||
};
|
||||
|
||||
export type SidebarItem = {
|
||||
title: string;
|
||||
url: string;
|
||||
icon: RemixiconComponentType;
|
||||
isActive?: boolean;
|
||||
items?: SidebarSubItem[];
|
||||
};
|
||||
|
||||
export type SidebarSection = {
|
||||
title: string;
|
||||
items: SidebarItem[];
|
||||
};
|
||||
|
||||
export type SidebarNavData = {
|
||||
navMain: SidebarSection[];
|
||||
navSecondary: {
|
||||
title: string;
|
||||
url: string;
|
||||
icon: RemixiconComponentType;
|
||||
}[];
|
||||
};
|
||||
|
||||
export interface PagadorLike {
|
||||
id: string;
|
||||
name: string | null;
|
||||
avatarUrl: string | null;
|
||||
canEdit?: boolean;
|
||||
}
|
||||
|
||||
export interface SidebarNavOptions {
|
||||
pagadores: PagadorLike[];
|
||||
preLancamentosCount?: number;
|
||||
}
|
||||
|
||||
export function createSidebarNavData(
|
||||
options: SidebarNavOptions,
|
||||
): SidebarNavData {
|
||||
const { pagadores, preLancamentosCount = 0 } = options;
|
||||
const pagadorItems = pagadores
|
||||
.map((pagador) => ({
|
||||
title: pagador.name?.trim().length
|
||||
? pagador.name.trim()
|
||||
: "Pagador sem nome",
|
||||
url: `/payers/${pagador.id}`,
|
||||
key: pagador.canEdit ? pagador.id : `${pagador.id}-shared`,
|
||||
isShared: !pagador.canEdit,
|
||||
avatarUrl: pagador.avatarUrl,
|
||||
}))
|
||||
.sort((a, b) =>
|
||||
a.title.localeCompare(b.title, "pt-BR", { sensitivity: "base" }),
|
||||
);
|
||||
|
||||
const pagadorItemsWithHistory: SidebarSubItem[] = pagadorItems;
|
||||
|
||||
return {
|
||||
navMain: [
|
||||
{
|
||||
title: "Gestão Financeira",
|
||||
items: [
|
||||
{
|
||||
title: "Dashboard",
|
||||
url: "/dashboard",
|
||||
icon: RiDashboardLine,
|
||||
},
|
||||
{
|
||||
title: "Lançamentos",
|
||||
url: "/transactions",
|
||||
icon: RiArrowLeftRightLine,
|
||||
items: [
|
||||
{
|
||||
title: "Pré-Lançamentos",
|
||||
url: "/inbox",
|
||||
key: "pre-lancamentos",
|
||||
icon: RiAtLine,
|
||||
badge:
|
||||
preLancamentosCount > 0 ? preLancamentosCount : undefined,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Calendário",
|
||||
url: "/calendar",
|
||||
icon: RiCalendarEventLine,
|
||||
},
|
||||
{
|
||||
title: "Cartões",
|
||||
url: "/cards",
|
||||
icon: RiBankCard2Line,
|
||||
},
|
||||
{
|
||||
title: "Contas",
|
||||
url: "/accounts",
|
||||
icon: RiBankLine,
|
||||
},
|
||||
{
|
||||
title: "Orçamentos",
|
||||
url: "/budgets",
|
||||
icon: RiFundsLine,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Organização",
|
||||
items: [
|
||||
{
|
||||
title: "Pagadores",
|
||||
url: "/payers",
|
||||
icon: RiGroupLine,
|
||||
items: pagadorItemsWithHistory,
|
||||
},
|
||||
{
|
||||
title: "Categorias",
|
||||
url: "/categories",
|
||||
icon: RiPriceTag3Line,
|
||||
},
|
||||
{
|
||||
title: "Anotações",
|
||||
url: "/notes",
|
||||
icon: RiTodoLine,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Análise",
|
||||
items: [
|
||||
{
|
||||
title: "Insights",
|
||||
url: "/insights",
|
||||
icon: RiSparklingLine,
|
||||
},
|
||||
{
|
||||
title: "Tendências",
|
||||
url: "/reports/category-trends",
|
||||
icon: RiFileChartLine,
|
||||
},
|
||||
{
|
||||
title: "Uso de Cartões",
|
||||
url: "/reports/card-usage",
|
||||
icon: RiBankCard2Line,
|
||||
},
|
||||
{
|
||||
title: "Análise de Parcelas",
|
||||
url: "/reports/installment-analysis",
|
||||
icon: RiSecurePaymentLine,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
navSecondary: [
|
||||
{
|
||||
title: "Ajustes",
|
||||
url: "/settings",
|
||||
icon: RiSettings2Line,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -1,212 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
type RemixiconComponentType,
|
||||
RiArrowRightSLine,
|
||||
RiUserSharedLine,
|
||||
} from "@remixicon/react";
|
||||
import Link from "next/link";
|
||||
import { usePathname, useSearchParams } from "next/navigation";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "@/shared/components/ui/avatar";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/shared/components/ui/collapsible";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
} from "@/shared/components/ui/sidebar";
|
||||
import { getAvatarSrc } from "@/shared/lib/payers/utils";
|
||||
|
||||
type NavItem = {
|
||||
title: string;
|
||||
url: string;
|
||||
icon: RemixiconComponentType;
|
||||
isActive?: boolean;
|
||||
items?: {
|
||||
title: string;
|
||||
url: string;
|
||||
avatarUrl?: string | null;
|
||||
isShared?: boolean;
|
||||
key?: string;
|
||||
icon?: RemixiconComponentType;
|
||||
badge?: number;
|
||||
}[];
|
||||
};
|
||||
|
||||
type NavSection = {
|
||||
title: string;
|
||||
items: NavItem[];
|
||||
};
|
||||
|
||||
const MONTH_PERIOD_PARAM = "periodo";
|
||||
|
||||
const PERIOD_AWARE_PATHS = new Set(["/dashboard", "/transactions", "/budgets"]);
|
||||
|
||||
export function NavMain({ sections }: { sections: NavSection[] }) {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const periodParam = searchParams.get(MONTH_PERIOD_PARAM);
|
||||
|
||||
const normalizedPathname =
|
||||
pathname.endsWith("/") && pathname !== "/"
|
||||
? pathname.slice(0, -1)
|
||||
: pathname;
|
||||
|
||||
const isLinkActive = (url: string) => {
|
||||
const normalizedUrl =
|
||||
url.endsWith("/") && url !== "/" ? url.slice(0, -1) : url;
|
||||
|
||||
// Verifica se é exatamente igual ou se o pathname começa com a URL
|
||||
return (
|
||||
normalizedPathname === normalizedUrl ||
|
||||
normalizedPathname.startsWith(`${normalizedUrl}/`)
|
||||
);
|
||||
};
|
||||
|
||||
const buildHrefWithPeriod = (url: string) => {
|
||||
if (!periodParam) {
|
||||
return url;
|
||||
}
|
||||
|
||||
const [rawPathname, existingSearch = ""] = url.split("?");
|
||||
const normalizedRawPathname =
|
||||
rawPathname.endsWith("/") && rawPathname !== "/"
|
||||
? rawPathname.slice(0, -1)
|
||||
: rawPathname;
|
||||
|
||||
if (!PERIOD_AWARE_PATHS.has(normalizedRawPathname)) {
|
||||
return url;
|
||||
}
|
||||
|
||||
const params = new URLSearchParams(existingSearch);
|
||||
params.set(MONTH_PERIOD_PARAM, periodParam);
|
||||
|
||||
const queryString = params.toString();
|
||||
return queryString
|
||||
? `${normalizedRawPathname}?${queryString}`
|
||||
: normalizedRawPathname;
|
||||
};
|
||||
|
||||
const activeLinkClasses =
|
||||
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-dark! hover:text-primary!";
|
||||
|
||||
return (
|
||||
<>
|
||||
{sections.map((section, index) => (
|
||||
<SidebarGroup key={section.title}>
|
||||
<SidebarGroupLabel className="text-xs text-muted-foreground/60">
|
||||
{section.title}
|
||||
</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{section.items.map((item) => {
|
||||
const itemIsActive = isLinkActive(item.url);
|
||||
return (
|
||||
<Collapsible key={item.title} asChild>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
tooltip={item.title}
|
||||
isActive={itemIsActive}
|
||||
className={itemIsActive ? activeLinkClasses : ""}
|
||||
>
|
||||
<Link prefetch href={buildHrefWithPeriod(item.url)}>
|
||||
<item.icon className="size-4" />
|
||||
{item.title}
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
{item.items?.length ? (
|
||||
<>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuAction className="data-[state=open]:rotate-90 px-2 trasition-transform duration-200">
|
||||
<RiArrowRightSLine className="text-primary" />
|
||||
<span className="sr-only">Toggle</span>
|
||||
</SidebarMenuAction>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{item.items?.map((subItem) => {
|
||||
const subItemIsActive = isLinkActive(
|
||||
subItem.url,
|
||||
);
|
||||
const avatarSrc = getAvatarSrc(
|
||||
subItem.avatarUrl,
|
||||
);
|
||||
const initial =
|
||||
subItem.title.charAt(0).toUpperCase() || "?";
|
||||
return (
|
||||
<SidebarMenuSubItem
|
||||
key={subItem.key ?? subItem.title}
|
||||
>
|
||||
<SidebarMenuSubButton
|
||||
asChild
|
||||
isActive={subItemIsActive}
|
||||
className={
|
||||
subItemIsActive ? activeLinkClasses : ""
|
||||
}
|
||||
>
|
||||
<Link
|
||||
prefetch
|
||||
href={buildHrefWithPeriod(subItem.url)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
{subItem.icon ? (
|
||||
<subItem.icon className="size-4" />
|
||||
) : subItem.avatarUrl !== undefined ? (
|
||||
<Avatar className="size-5 border border-border/60 bg-background">
|
||||
<AvatarImage
|
||||
src={avatarSrc}
|
||||
alt={`Avatar de ${subItem.title}`}
|
||||
/>
|
||||
<AvatarFallback className="text-xs font-medium uppercase">
|
||||
{initial}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
) : null}
|
||||
<span>{subItem.title}</span>
|
||||
{subItem.badge ? (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="ml-auto h-5 min-w-5 px-1.5 text-xs"
|
||||
>
|
||||
{subItem.badge}
|
||||
</Badge>
|
||||
) : null}
|
||||
{subItem.isShared ? (
|
||||
<RiUserSharedLine className="size-3.5 text-muted-foreground" />
|
||||
) : null}
|
||||
</Link>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</>
|
||||
) : null}
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { RemixiconComponentType } from "@remixicon/react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import type * as React from "react";
|
||||
import {
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/shared/components/ui/sidebar";
|
||||
|
||||
export function NavSecondary({
|
||||
items,
|
||||
...props
|
||||
}: {
|
||||
items: {
|
||||
title: string;
|
||||
url: string;
|
||||
icon: RemixiconComponentType;
|
||||
}[];
|
||||
} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<SidebarGroup {...props}>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{items.map((item) => {
|
||||
const normalizedPathname =
|
||||
pathname.endsWith("/") && pathname !== "/"
|
||||
? pathname.slice(0, -1)
|
||||
: pathname;
|
||||
const normalizedUrl =
|
||||
item.url.endsWith("/") && item.url !== "/"
|
||||
? item.url.slice(0, -1)
|
||||
: item.url;
|
||||
const itemIsActive =
|
||||
normalizedPathname === normalizedUrl ||
|
||||
normalizedPathname.startsWith(`${normalizedUrl}/`);
|
||||
return (
|
||||
<SidebarMenuItem key={item.title}>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={itemIsActive}
|
||||
className={
|
||||
itemIsActive
|
||||
? "data-[active=true]:bg-sidebar-accent data-[active=true]:text-dark! hover:text-primary!"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<Link prefetch href={item.url}>
|
||||
<item.icon className={"h-4 w-4"} />
|
||||
<span>{item.title}</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
);
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import {
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
} from "@/shared/components/ui/sidebar";
|
||||
import { getAvatarSrc } from "@/shared/lib/payers/utils";
|
||||
|
||||
type NavUserProps = {
|
||||
user: {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
image: string | null;
|
||||
};
|
||||
pagadorAvatarUrl: string | null;
|
||||
};
|
||||
|
||||
export function NavUser({ user, pagadorAvatarUrl }: NavUserProps) {
|
||||
const avatarSrc = pagadorAvatarUrl
|
||||
? getAvatarSrc(pagadorAvatarUrl)
|
||||
: user.image || getAvatarSrc(null);
|
||||
const isDataUrl = avatarSrc.startsWith("data:");
|
||||
|
||||
return (
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
size="lg"
|
||||
className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground "
|
||||
>
|
||||
<div className="relative size-8 shrink-0 overflow-hidden rounded-full">
|
||||
<Image
|
||||
src={avatarSrc}
|
||||
unoptimized={isDataUrl}
|
||||
alt={user.name}
|
||||
fill
|
||||
sizes="32px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-medium">{user.name}</span>
|
||||
<span className="text-muted-foreground truncate text-xs">
|
||||
{user.email}
|
||||
</span>
|
||||
</div>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user