Desenvolvedores
src_
components_
SidebarLayout.jsx

Explicação do código 🧑‍💻

O código que vamos analisar faz parte de um layout para uma página de curso. O componente SidebarLayout organiza a navegação lateral e a exibição de breadcrumbs. Vamos explorar o que cada parte faz, passo a passo. 🚀

Importações 🔥

'use client'
import { AppSidebar } from '@/components/app-sidebar'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import { Separator } from '@/components/ui/separator'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'

Aqui, o código importa componentes essenciais para a criação do layout.

  • AppSidebar: O componente que renderiza a barra lateral.
  • Os componentes do breadcrumb (navegação hierárquica) que ajudam a mostrar a sequência de páginas (Curso → Módulo → Aula).
  • O Separator que adiciona uma linha para separar visualmente elementos.
  • SidebarInset, SidebarProvider e SidebarTrigger são usados para configurar a lógica da barra lateral, como sua visibilidade e o comportamento de abertura.

Definição do componente SidebarLayout 🎨

export default function SidebarLayout({
  children,
  course,
  module,
  lesson,
  moduleIndex,
  lessonIndex,
}) {

Aqui, o componente SidebarLayout é definido. Ele recebe as seguintes propriedades:

  • children: Conteúdo dinâmico que será exibido dentro do layout.
  • course: Informações sobre o curso, como nome e slug.
  • module: Informações sobre o módulo do curso.
  • lesson: Dados sobre a aula atual.
  • moduleIndex: O índice (número) do módulo.
  • lessonIndex: O índice (número) da aula.

Essas propriedades permitem que o layout seja dinâmico, exibindo diferentes conteúdos conforme a estrutura do curso, módulo e aula.

Estrutura do layout 🏗️

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2">
          <div className="flex items-center gap-2 px-4">
            <SidebarTrigger className="-ml-1" />
            <Separator orientation="vertical" className="mr-2 h-4" />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem className="hidden md:block">
                  <BreadcrumbLink href={`/cursos/${course.slug}`}>
                    {course.nomeCurso}
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden md:block" />
                <BreadcrumbItem className="hidden md:block">
                  <BreadcrumbLink href={`/cursos/${course.slug}/${moduleIndex}`}>
                    {moduleIndex}. {module.modulo.nomeModulo}
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden md:block" />
                <BreadcrumbItem>
                  <BreadcrumbPage>
                    {lessonIndex}. {lesson.nomeAula}
                  </BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </div>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">{children}</div>
      </SidebarInset>
    </SidebarProvider>
  )
}

O JSX abaixo descreve a estrutura do layout:

  • SidebarProvider: Contexto que fornece a funcionalidade da barra lateral para seus componentes filhos.
  • AppSidebar: Barra lateral com navegação.
  • SidebarInset: Área onde o conteúdo será inserido.
  • header: A parte superior da página que inclui a navegação e breadcrumbs.
    • SidebarTrigger: Botão para abrir ou fechar a barra lateral.
    • Separator: Linha vertical que separa o botão da navegação.
    • Breadcrumb: Navegação hierárquica que mostra a posição atual no curso.
    • Cada BreadcrumbItem representa um nível da navegação.
    • BreadcrumbPage exibe o nome da aula atual.

Finalmente, o children é renderizado dentro de um contêiner flexível para acomodar o conteúdo dinâmico da página.

Código Completo 📃

'use client'
import { AppSidebar } from '@/components/app-sidebar'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import { Separator } from '@/components/ui/separator'
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
 
export default function SidebarLayout({
  children,
  course,
  module,
  lesson,
  moduleIndex,
  lessonIndex,
}) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2">
          <div className="flex items-center gap-2 px-4">
            <SidebarTrigger className="-ml-1" />
            <Separator orientation="vertical" className="mr-2 h-4" />
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem className="hidden md:block">
                  <BreadcrumbLink href={`/cursos/${course.slug}`}>
                    {course.nomeCurso}
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden md:block" />
                <BreadcrumbItem className="hidden md:block">
                  <BreadcrumbLink href={`/cursos/${course.slug}/${moduleIndex}`}>
                    {moduleIndex}. {module.modulo.nomeModulo}
                  </BreadcrumbLink>
                </BreadcrumbItem>
                <BreadcrumbSeparator className="hidden md:block" />
                <BreadcrumbItem>
                  <BreadcrumbPage>
                    {lessonIndex}. {lesson.nomeAula}
                  </BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
          </div>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">{children}</div>
      </SidebarInset>
    </SidebarProvider>
  )
}

Agora, o código está estruturado com uma explicação detalhada e fácil de seguir. As funcionalidades de navegação e layout estão bem integradas, com o uso de componentes reutilizáveis, tornando o código modular e organizado. 😎

RichTextContent.jsxTagBadge.jsx