PetAcademy - Documentação

Explicação:

O componente NavBar é responsável por exibir a barra de navegação do site, com links para páginas como "Cursos" e "Admin", além de um ModeToggle para permitir a troca de tema (claro/escuro). O componente também impede a exibição da barra de navegação em páginas de lições (cursos específicos).

Detalhamento do código:

const pathname = usePathname():
- A função usePathname() é importada de next/navigation e utilizada para obter o caminho atual da URL. Isso é importante para determinar em qual página o usuário está.
- 🔍 Obter o caminho da URL: Através desse caminho, a lógica pode verificar se o componente deve ser exibido ou não, como no caso de impedir a navegação na página de lições.
const parts = pathname.split('/'):
- O caminho é dividido em partes usando split('/'), resultando em um array de segmentos. Por exemplo, para a URL /cursos/123/lesson, o array seria ['', 'cursos', '123', 'lesson'].
- 🧩 Quebra da URL em partes: Permite analisar a URL de forma mais detalhada, facilitando a lógica de exibição condicional.
const isLessonPage = parts[1] === 'cursos' && parts.length >= 5:
- A variável isLessonPage é um booleano que verifica se a URL corresponde a uma página de lição, ou seja, se a URL começa com /cursos e possui 5 ou mais partes.
- 🚫 Evitar exibição em páginas de lições: Se a página atual for uma lição, a navegação é escondida, retornando null.
return null:
- Caso a página seja uma lição, o componente retorna null, ou seja, nada será exibido.
- ⚠️ Sem barra de navegação nas lições: Isso garante que a barra de navegação não apareça nas páginas de lições.
<div className="relative z-20 p-1 flex justify-between border-b bg-card bg-opacity-80">:
- Um div envolvente que serve como contêiner para a barra de navegação. Ele tem:
  - relative: Posicionamento relativo para sobrepor outros elementos, se necessário.
  - z-20: Ele é renderizado acima de outros elementos com z-index menor.
  - p-1: Espaçamento interno pequeno.
  - flex justify-between: Usa flexbox para organizar os itens dentro do contêiner, garantindo que os itens fiquem afastados (com espaço entre eles).
  - border-b: Adiciona uma borda inferior à barra de navegação.
  - bg-card bg-opacity-80: Define o fundo com uma leve transparência, usando classes Tailwind CSS.
- 📦 Contêiner flexível: Organiza os itens da navegação com espaçamento e estilo visual.
<Link href="/" className="flex items-center">:
- O Link é utilizado para redirecionar para a página inicial do site (/).
- LogoPetAcademy é o componente de logo, que é envolto dentro do Link para ser clicável.
- 🏠 Link para a página inicial: Faz o logo ser um link que leva à página inicial.
<div className="flex items-center space-x-4">:
- Um div que contém os links para as páginas de "Cursos" e "Admin", com espaçamento entre eles.
- 📱 Disposição dos itens: Organiza os itens horizontalmente com o uso de flexbox e aplica um espaçamento space-x-4.
<ModeToggle context="navbar" />:
- O ModeToggle é um componente que alterna entre os modos de tema claro e escuro.
- 🌙 Troca de tema: O componente ModeToggle adiciona funcionalidade para alternar entre temas dentro da barra de navegação.

Código Completo:

'use client'
import React from 'react'
import { usePathname } from 'next/navigation'
import { ModeToggle } from '@/components/ThemeSwitcher'
import LogoPetAcademy from '@/components/LogoPetAcademy'
import Link from 'next/link'
 
export default function NavBar() {
  const pathname = usePathname()
  const parts = pathname.split('/')
  const isLessonPage = parts[1] === 'cursos' && parts.length >= 5
 
  if (isLessonPage) return null
 
  return (
    <div className="relative z-20 p-1 flex justify-between border-b bg-card bg-opacity-80">
      <Link href="/" className="flex items-center">
        <LogoPetAcademy />
      </Link>
 
      <div className="flex items-center space-x-4">
        <Link href="/cursos" className="hover:text-primary">
          Cursos
        </Link>
        <Link href="/admin" className="hover:text-primary">
          Admin
        </Link>
        <ModeToggle context="navbar" />
      </div>
    </div>
  )
}

Este é o código completo do componente NavBar, que exibe uma barra de navegação com links para as páginas "Cursos" e "Admin", além de um controle para alternar entre os modos de tema claro e escuro. Ele também verifica se a página atual é uma página de lição e, em caso afirmativo, esconde a barra de navegação.

MultiplaEscolha.jsx NavMain.jsx