Projeto 07 – Minha Primeira Rede Social (Navegação) 📱

Neste projeto, você vai construir a estrutura de navegação de uma rede social simplificada, lidando com perfis dinâmicos e rotas protegidas por lógica.

🎯 Objetivo

Dominar a estruturação de rotas complexas, parâmetros de URL e navegação programática.

🛠️ Requisitos

Uso de BrowserRouter, Routes e Route.
Criação de uma rota dinâmica para o perfil do usuário (/perfil/:username).
Uso de Link e useNavigate.

📝 Passo a Passo

1. Estrutura de Páginas

Crie os componentes/páginas: - Feed: Onde aparecem as postagens (Home). - Explorar: Uma lista de usuários sugeridos. - Perfil: Mostra o nome do usuário vindo da URL.

Crie um componente SideBar que fique visível em todas as rotas e contenha links para Feed e Explorar.

3. Rota Dinâmica

Configure a rota do Perfil. Dentro do componente Perfil, use o useParams para mostrar na tela: "Você está visualizando o perfil de: [username]".

4. Navegação Programática

Na página de Explorar, adicione um botão "Logoff". Ao clicar, o sistema deve usar o useNavigate para mandar o usuário para uma página de Login (que você também deve criar).

✅ Critérios de Entrega

Ao navegar entre Feed e Explorar, o componente Sidebar não deve sumir da tela.
Ao acessar /perfil/ricardo, a tela deve mostrar "ricardo".
Ao acessar uma URL inexistente, a página de erro 404 deve ser exibida.

Dica de UI

Use o NavLink para que o ícone ou texto do menu mude de cor quando o usuário estiver naquela aba específica!