PetAcademy - Documentação

Explicação Técnica:

Neste código, temos um componente funcional NavUser, que é responsável por exibir o menu de navegação do usuário em uma sidebar. Ele utiliza a biblioteca lucide-react para os ícones, componentes de interface de usuário personalizados de uma biblioteca própria (@/components/ui) e o contexto UserContext para gerenciar informações do usuário.

1. Importação de Componentes:

import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Sparkles } from 'lucide-react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { 
  DropdownMenu, 
  DropdownMenuContent, 
  DropdownMenuGroup, 
  DropdownMenuItem, 
  DropdownMenuLabel, 
  DropdownMenuSeparator, 
  DropdownMenuTrigger 
} from '@/components/ui/dropdown-menu'
import { 
  SidebarMenu, 
  SidebarMenuButton, 
  SidebarMenuItem, 
  useSidebar 
} from '@/components/ui/sidebar'
import { useUser } from '@/components/context/UserContext'

🔄 Aqui, estamos importando ícones de lucide-react e vários componentes da nossa biblioteca de UI, como Avatar, DropdownMenu, SidebarMenu, além do hook useSidebar e useUser para o gerenciamento de estado.

2. Função `NavUser`:

export function NavUser({ user }) {
  const { isMobile } = useSidebar()
  const { logout } = useUser()

📱 Dentro da função, obtemos o estado da sidebar (se está em modo mobile ou não) e o método logout do contexto de usuário para gerenciar a desconexão.

3. Menu de Navegação:

return (
  <SidebarMenu>
    <SidebarMenuItem>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <SidebarMenuButton
            size="lg"
            className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
          >
            <Avatar className="h-8 w-8 rounded-lg">
              <AvatarImage src={user?.user?.avatar || 'U'} alt={user?.user?.nomeCompleto} />
              <AvatarFallback className="rounded-lg">
                {user?.user?.nomeCompleto.charAt(0) || 'avatar'}
              </AvatarFallback>
            </Avatar>
            <div className="grid flex-1 text-left text-sm leading-tight">
              <span className="truncate font-semibold">{user?.user?.nomeCompleto || 'Nome'}</span>
              <span className="truncate text-xs">{user?.user?.email || 'Email'}</span>
            </div>
            <ChevronsUpDown className="ml-auto size-4" />
          </SidebarMenuButton>
        </DropdownMenuTrigger>

🔽 Aqui, criamos um SidebarMenu que contém um DropdownMenu com um ícone de avatar e o nome do usuário. O ícone do avatar é carregado a partir de uma URL fornecida pelo usuário ou um fallback (primeira letra do nome). Quando o menu está aberto, o botão recebe uma classe especial para alterar o estilo.

4. Conteúdo do Menu:

<DropdownMenuContent
  className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
  side={isMobile ? 'bottom' : 'right'}
  align="end"
  sideOffset={4}
>
  <DropdownMenuLabel className="p-0 font-normal">
    <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
      <Avatar className="h-8 w-8 rounded-lg">
        <AvatarImage src={user?.user?.avatar} alt={user?.user?.nomeCompleto} />
        <AvatarFallback className="rounded-lg">
          {user?.user?.nomeCompleto.charAt(0) || 'U'}
        </AvatarFallback>
      </Avatar>
      <div className="grid flex-1 text-left text-sm leading-tight">
        <span className="truncate font-semibold">{user?.user?.nomeCompleto || 'Nome'}</span>
        <span className="truncate text-xs">{user?.user?.email || 'Email'}</span>
      </div>
    </div>
  </DropdownMenuLabel>

📋 O conteúdo do menu exibe informações adicionais do usuário, incluindo o avatar, nome completo e e-mail. Aqui, a lógica de fallback é aplicada caso o usuário não tenha imagem de avatar.

5. Opções do Menu:

<DropdownMenuSeparator />
<DropdownMenuGroup>
  <DropdownMenuItem>
    <Sparkles className="mr-2" />
    I.A (experimental)
  </DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
  <DropdownMenuItem>
    <BadgeCheck className="mr-2" />
    Minha Conta
  </DropdownMenuItem>
  <DropdownMenuItem>
    <Bell className="mr-2" />
    Notificações
  </DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={logout}>
  <LogOut className="mr-2" />
  Sair
</DropdownMenuItem>

⚙️ As opções de menu incluem: I.A experimental, configurações de conta, notificações e a opção de logout. Para cada item, utilizamos ícones da biblioteca lucide-react e um onClick no item de logout para desconectar o usuário.

6. Código Completo:

'use client'
import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogOut, Sparkles } from 'lucide-react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from '@/components/ui/sidebar'
import { useUser } from '@/components/context/UserContext'
 
export function NavUser({ user }) {
  const { isMobile } = useSidebar()
  const { logout } = useUser()
  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
            >
              <Avatar className="h-8 w-8 rounded-lg">
                <AvatarImage src={user?.user?.avatar || 'U'} alt={user?.user?.nomeCompleto} />
                <AvatarFallback className="rounded-lg">
                  {user?.user?.nomeCompleto.charAt(0) || 'avatar'}
                </AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-semibold">{user?.user?.nomeCompleto || 'Nome'}</span>
                <span className="truncate text-xs">{user?.user?.email || 'Email'}</span>
              </div>
              <ChevronsUpDown className="ml-auto size-4" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
            side={isMobile ? 'bottom' : 'right'}
            align="end"
            sideOffset={4}
          >
            <DropdownMenuLabel className="p-0 font-normal">
              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                <Avatar className="h-8 w-8 rounded-lg">
                  <AvatarImage src={user?.user?.avatar} alt={user?.user?.nomeCompleto} />
                  <AvatarFallback className="rounded-lg">
                    {user?.user?.nomeCompleto.charAt(0) || 'U'}
                  </AvatarFallback>
                </Avatar>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-semibold">{user?.user?.nomeCompleto || 'Nome'}</span>
                  <span className="truncate text-xs">{user?.user?.email || 'Email'}</span>
                </div>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <Sparkles className="mr-2" />
                I.A (experimental)
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <BadgeCheck className="mr-2" />
                Minha Conta
              </DropdownMenuItem>
              <DropdownMenuItem>
                <Bell className="mr-2" />
                Notificações
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem onClick={logout}>
              <LogOut className="mr-2" />
              Sair
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}

NavSecondary.jsx PerguntaObjetivaComponent.jsx