Desenvolvedores
src_
components_
NavMain.jsx

Explicação do código:

O componente NavMain cria uma barra lateral com itens de navegação, sendo alguns itens colapsáveis com sub-itens. Utiliza a biblioteca lucide-react para ícones e componentes da UI para estruturação do menu.

Como o componente funciona:

  • Uso de Collapsible: A biblioteca @/components/ui/collapsible é utilizada para permitir que os itens de navegação sejam colapsáveis. Ou seja, os sub-itens podem ser escondidos ou exibidos de acordo com a interação do usuário.

  • Estrutura de sidebar: O componente recebe uma lista de itens (prop items), e para cada item, ele gera um SidebarMenuItem. Quando o item tem sub-itens, ele inclui um CollapsibleTrigger que permite que os sub-itens sejam mostrados ou ocultados.

  • Interatividade com ícones: O ChevronRight é usado para indicar que um item pode ser expandido, e a rotação do ícone é animada conforme o estado do item (aberto ou fechado).

Detalhamento do código:

  1. Importações:

    • ChevronRight é um ícone usado para indicar a possibilidade de expandir o item.
    • Componentes como Collapsible, SidebarGroup, SidebarMenu, entre outros, são usados para criar a estrutura do menu.

  2. Componente NavMain:

    • O NavMain recebe uma lista de itens como prop. Para cada item, ele verifica se há sub-itens.
    • Caso existam sub-itens, o item se torna colapsável e inclui um trigger que controla a expansão.

  3. Comportamento Colapsável:

    • Os itens com sub-itens são envoltos em Collapsible para garantir que eles possam ser expandidos ou contraídos.
    • O CollapsibleTrigger gera o botão de controle da expansão e o CollapsibleContent contém os sub-itens.

  4. Tooltip:

    • Cada botão de item (SidebarMenuButton) possui um tooltip, que é o título do item e aparece ao passar o mouse sobre o botão.

Emojis:

  • 📂 para representar o menu e a navegação.
  • 🔽 e 🔼 para indicar a expansão e contração dos itens de navegação.

Código completo:

'use client'
 
import { ChevronRight, LucideIcon } from 'lucide-react'
 
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
} from '@/components/ui/sidebar'
 
export function NavMain({ items }) {
  return (
    <SidebarGroup>
      <SidebarGroupLabel>Plataforma</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item) => (
          <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
            <SidebarMenuItem>
              <SidebarMenuButton tooltip={item.title}>
                {/* <a href={item.url}> */}
                <item.icon />
                <span>{item.title}</span>
                {/* </a> */}
              </SidebarMenuButton>
              {item.items?.length ? (
                <>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuAction className="data-[state=open]:rotate-90">
                      <ChevronRight />
                      <span className="sr-only">Toggle</span>
                    </SidebarMenuAction>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.items?.map((subItem) => (
                        <SidebarMenuSubItem key={subItem.title}>
                          <SidebarMenuSubButton asChild>
                            <a href={subItem.url}>
                              <span>{subItem.title}</span>
                            </a>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </>
              ) : null}
            </SidebarMenuItem>
          </Collapsible>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  )
}
NavBar.jsxNavProjects.jsx