Desenvolvedores
src_
components_
NavProjects.jsx

Explicação e Código:

O código começa com a importação de ícones e componentes do React. Usamos o pacote lucide-react para adicionar ícones, como o Folder, MoreHorizontal, Share e Trash2. Esses ícones são utilizados para representar visualmente as ações disponíveis nos itens do menu de projetos. 📂📤🗑️

'use client'
 
import { Folder, MoreHorizontal, Share, Trash2 } from 'lucide-react'
 
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from '@/components/ui/sidebar'

Aqui, além dos ícones, são importados componentes de menu dropdown e de sidebar, como DropdownMenu, SidebarGroup, SidebarMenu, entre outros. O useSidebar é usado para gerenciar o comportamento responsivo do sidebar, ajustando o alinhamento do menu com base na tela.

Renderizando os Projetos 🔄

O componente NavProjects recebe uma lista de projetos e renderiza cada projeto com um ícone e um link. Cada projeto é envolvido por um SidebarMenuItem, e dentro de cada item de menu há um botão de ação para interagir com ele. 🔗📂

export function NavProjects({ projects }) {
  const { isMobile } = useSidebar()
 
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <SidebarGroupLabel>Projects</SidebarGroupLabel>
      <SidebarMenu>
        {projects.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton asChild>
              <a href={item.url}>
                <item.icon />
                <span>{item.name}</span>
              </a>
            </SidebarMenuButton>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <SidebarMenuAction showOnHover>
                  <MoreHorizontal />
                  <span className="sr-only">More</span>
                </SidebarMenuAction>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                className="w-48"
                side={isMobile ? 'bottom' : 'right'}
                align={isMobile ? 'end' : 'start'}
              >
                <DropdownMenuItem>
                  <Folder className="text-muted-foreground" />
                  <span>View Project</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Share className="text-muted-foreground" />
                  <span>Share Project</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Trash2 className="text-muted-foreground" />
                  <span>Delete Project</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        ))}
        <SidebarMenuItem>
          <SidebarMenuButton>
            <MoreHorizontal />
            <span>More</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
  )
}

Neste trecho de código, o projects.map itera sobre a lista de projetos, criando um item de menu para cada um. Para cada item, há uma ação associada representada pelos menus suspensos (DropdownMenu), com opções como "Visualizar", "Compartilhar" e "Excluir". 🗂️✨

Resumo do Componente

O componente NavProjects é projetado para ser interativo e responsivo. Ele exibe os projetos com ícones de fácil visualização e menus com ações para manipular os projetos. Isso cria uma interface de usuário rica para navegar entre os projetos de forma rápida e eficiente.

Código Completo:

'use client'
 
import { Folder, MoreHorizontal, Share, Trash2 } from 'lucide-react'
 
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  useSidebar,
} from '@/components/ui/sidebar'
 
export function NavProjects({ projects }) {
  const { isMobile } = useSidebar()
 
  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <SidebarGroupLabel>Projects</SidebarGroupLabel>
      <SidebarMenu>
        {projects.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton asChild>
              <a href={item.url}>
                <item.icon />
                <span>{item.name}</span>
              </a>
            </SidebarMenuButton>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <SidebarMenuAction showOnHover>
                  <MoreHorizontal />
                  <span className="sr-only">More</span>
                </SidebarMenuAction>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                className="w-48"
                side={isMobile ? 'bottom' : 'right'}
                align={isMobile ? 'end' : 'start'}
              >
                <DropdownMenuItem>
                  <Folder className="text-muted-foreground" />
                  <span>View Project</span>
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <Share className="text-muted-foreground" />
                  <span>Share Project</span>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Trash2 className="text-muted-foreground" />
                  <span>Delete Project</span>
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        ))}
        <SidebarMenuItem>
          <SidebarMenuButton>
            <MoreHorizontal />
            <span>More</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
  )
}
NavMain.jsxNavSecondary.jsx