monitoring-app/src/components/app-sidebar.tsx

101 lines
2.6 KiB
TypeScript

'use client';
import * as React from 'react';
import {
GalleryVerticalEnd,
House,
SquareTerminal,
} from 'lucide-react';
import { NavMain } from '@/components/nav-main';
import { NavProjects } from '@/components/nav-projects';
import { NavUser } from '@/components/nav-user';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarRail,
} from '@/components/ui/sidebar';
import useGUsuarioGetJWTHook from '@/shared/hooks/auth/useGUsuarioGetJWTHook';
import Image from 'next/image';
// This is sample data.
const data = {
teams: [],
navMain: [
{
title: 'Início',
url: '#',
icon: House,
isActive: false,
items: [
{
title: 'Clientes',
url: '/administrativo/clientes/',
},
],
},
{
title: 'Administrativo',
url: '#',
icon: SquareTerminal,
isActive: true,
items: [
{
title: 'Usuários',
url: '/administrativo/usuarios/',
},
],
},
],
projects: [],
};
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
const { userAuthenticated } = useGUsuarioGetJWTHook();
return (
<Sidebar collapsible="icon" {...props}>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg" asChild>
<a href="#">
<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
<GalleryVerticalEnd className="size-4" />
<Image
src="/images/logo-abb.png"
alt="Logo do site"
width={100}
height={100}
className='rounded-lg'
/>
</div>
<div className="flex flex-col gap-0.5 leading-none">
<span className="font-semibold">
Orius Tecnologia
</span>
<span className="">
25.9.1
</span>
</div>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<NavMain items={data.navMain} />
<NavProjects projects={data.projects} />
</SidebarContent>
<SidebarFooter>
{userAuthenticated?.data ? <NavUser user={userAuthenticated.data} /> : 'Carregando...'}
</SidebarFooter>
<SidebarRail />
</Sidebar>
);
}