PetAcademy - Documentação

Explicação Detalhada

Esse código define um componente React chamado AppSidebar. Ele exibe uma barra lateral de navegação que contém menus de navegação principal e secundária, além de uma área de rodapé para exibir informações sobre o usuário e permitir o login, caso o usuário não esteja autenticado.

O componente importa diversas dependências e ícones de bibliotecas como lucide-react para melhorar a interface visual com ícones 🖼️.
Ele também faz uso de componentes personalizados como Sidebar, NavMain, NavSecondary, entre outros, para construir a barra lateral.

Fluxo do Código

1. Importações 📦

Aqui, o código importa ícones e componentes necessários para o layout da barra lateral, como Sidebar, NavMain, e Button:

import * as React from 'react'
import { BookOpen, Bot, Command, LifeBuoy, Send, SquareTerminal } from 'lucide-react'
import { NavMain } from '@/components/nav-main'
import { NavSecondary } from '@/components/nav-secondary'
import { NavUser } from '@/components/nav-user'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@/components/ui/sidebar'
import { ModeToggle } from '@/components/ThemeSwitcher'
import { useUser } from '@/components/context/UserContext'
import { Button } from '@/components/ui/button'
import { useRouter } from 'next/navigation'

2. Dados de Navegação e Usuário 👤

O código define um objeto data que armazena informações de navegação, incluindo menus principais (ex: "Todos Cursos", "Meus Cursos") e menus secundários (ex: "Suporte", "Feedback"). Ele também contém dados do usuário:

const { user } = useUser()
const router = useRouter()
 
const data = {
  user: {
    ...user,
  },
  navMain: [
    {
      title: 'Todos Cursos',
      url: '/cursos',
      icon: SquareTerminal,
      isActive: true,
    },
    {
      title: 'Meus Cursos',
      url: '#',
      icon: Bot,
      items: [
        { title: 'Curso1', url: '#' },
        { title: 'Curso2', url: '#' },
        { title: 'Curso3', url: '#' },
      ],
    },
    {
      title: 'Documentação',
      url: '#',
      icon: BookOpen,
      items: [
        { title: 'Tutorial para alunos', url: '#' },
        { title: 'Tutorial para professores', url: '#' },
      ],
    },
  ],
  navSecondary: [
    {
      title: 'Suporte',
      url: '#',
      icon: LifeBuoy,
    },
    {
      title: 'Feedback',
      url: '#',
      icon: Send,
    },
  ],
}

3. Renderização da Sidebar ⚙️

A renderização da barra lateral é feita usando os componentes Sidebar, SidebarHeader, SidebarContent, e SidebarFooter. O menu principal é exibido com NavMain, e o menu secundário é exibido com NavSecondary. O rodapé da sidebar exibe o botão de login, caso o usuário não esteja autenticado.

return (
  <Sidebar variant="inset" {...props}>
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton size="lg" asChild>
            <a href="/cursos">
              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <Command className="size-4" />
              </div>
              <div className="grid flex-1 text-left text-sm leading-tight">
                <span className="truncate font-semibold">PetAcademy</span>
                <span className="truncate text-xs">Educação</span>
              </div>
            </a>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>
    <SidebarContent>
      <NavMain items={data.navMain} />
      <NavSecondary items={data.navSecondary} className="mt-auto" />
      <ModeToggle context="sidebar" />
    </SidebarContent>
    <SidebarFooter>
      {data.user && data.user.user ? (
        <NavUser user={data.user} />
      ) : (
        <Button onClick={() => router.push('/login')} className="w-full">
          Fazer Login
        </Button>
      )}
    </SidebarFooter>
  </Sidebar>
)

Código Completo:

'use client'
import * as React from 'react'
import { BookOpen, Bot, Command, LifeBuoy, Send, SquareTerminal } from 'lucide-react'
import { NavMain } from '@/components/nav-main'
import { NavSecondary } from '@/components/nav-secondary'
import { NavUser } from '@/components/nav-user'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@/components/ui/sidebar'
import { ModeToggle } from '@/components/ThemeSwitcher'
import { useUser } from '@/components/context/UserContext'
import { Button } from '@/components/ui/button'
import { useRouter } from 'next/navigation'
 
export function AppSidebar({ ...props }) {
  const { user } = useUser()
  const router = useRouter()
 
  const data = {
    user: {
      ...user,
    },
    navMain: [
      {
        title: 'Todos Cursos',
        url: '/cursos',
        icon: SquareTerminal,
        isActive: true,
      },
      {
        title: 'Meus Cursos',
        url: '#',
        icon: Bot,
        items: [
          {
            title: 'Curso1',
            url: '#',
          },
          {
            title: 'Curso2',
            url: '#',
          },
          {
            title: 'Curso3',
            url: '#',
          },
        ],
      },
      {
        title: 'Documentação',
        url: '#',
        icon: BookOpen,
        items: [
          {
            title: 'Tutorial para alunos',
            url: '#',
          },
          {
            title: 'Tutorial para professores',
            url: '#',
          },
        ],
      },
    ],
    navSecondary: [
      {
        title: 'Suporte',
        url: '#',
        icon: LifeBuoy,
      },
      {
        title: 'Feedback',
        url: '#',
        icon: Send,
      },
    ],
  }
  return (
    <Sidebar variant="inset" {...props}>
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg" asChild>
              <a href="/cursos">
                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                  <Command className="size-4" />
                </div>
                <div className="grid flex-1 text-left text-sm leading-tight">
                  <span className="truncate font-semibold">PetAcademy</span>
                  <span className="truncate text-xs">Educação</span>
                </div>
              </a>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <NavMain items={data.navMain} />
        <NavSecondary items={data.navSecondary} className="mt-auto" />
        <ModeToggle context="sidebar" />
      </SidebarContent>
      <SidebarFooter>
        {data.user && data.user.user ? (
          <NavUser user={data.user} />
        ) : (
          <Button onClick={() => router.push('/login')} className="w-full">
            Fazer Login
          </Button>
        )}
      </SidebarFooter>
    </Sidebar>
  )
}

Esse código cria uma interface de navegação com várias opções de cursos, documentação e outras funcionalidades essenciais para o usuário. Ele usa ícones e uma estrutura de componentes bem definida para garantir que a interface seja intuitiva e agradável de usar 🎨.

Modulo.ts AuthGuard.jsx