Files
openmonetis/components/sidebar/app-sidebar.tsx
Felipe Coutinho 0767636eed feat(dashboard): ajustar layout e estilos
- Adiciona o PrivacyProvider ao layout do dashboard
- Atualiza variáveis de cor no CSS para o tema
- Modifica largura máxima de elementos no componente de tabela
- Remove fonte antropic-sans e substitui por Barlow
- Ajusta classes de estilo em componentes de cartão e sidebar
2025-12-11 17:43:33 +00:00

80 lines
2.0 KiB
TypeScript

"use client";
import { Logo } from "@/components/logo";
import { NavMain } from "@/components/sidebar/nav-main";
import { NavSecondary } from "@/components/sidebar/nav-secondary";
import { NavUser } from "@/components/sidebar/nav-user";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from "@/components/ui/sidebar";
import * as React from "react";
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[];
}
export function AppSidebar({
user,
pagadorAvatarUrl,
pagadores,
...props
}: AppSidebarProps) {
if (!user) {
throw new Error("AppSidebar requires a user but received undefined.");
}
const navigation = React.useMemo(
() => createSidebarNavData(pagadores),
[pagadores]
);
return (
<Sidebar collapsible="icon" {...props}>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton
asChild
className="data-[slot=sidebar-menu-button]:px-1.5! hover:bg-transparent"
>
<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"} />;
}