React.js: Menus e alternando conteúdos

Afluentes: Desenvolvimento Front-end II

Estilo

Primeiro vamos adicionar alguns estilos ao nosso arquivo App.css:

/* Estilos da Navbar */
.navbar {
  background-color: #333;
  padding: 10px;
}

.navList {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navItem {
  margin: 0 15px;
  cursor: pointer;
  color: #fff;
}

.navItem:hover {
  text-decoration: underline;
}

/* Estilos do conteúdo */
.content {
  margin-top: 20px;
}

/* Estilos para o rodapé */
.footer {
  background-color: #333;
  color: rgba(255, 255, 255, 0.6); /* Deixa as letras mais apagadas */
  text-align: center;
  padding: 10px;
  position: relative;
  bottom: 0;
  width: 100%;
  margin-top: 20px;
  font-size: 14px; /* Tamanho de fonte menor para dar aspecto mais discreto */
}

Conteúdo da Página Inicial

Agora vamos criar um arquivo JavaScript para o conteúdo da página inicial. Então, dentro de src crie o arquivo Home.js com o seguinte conteúdo:

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <div>
        <h1>Bem-vindo à Página Inicial!</h1>
        <p>Este é o conteúdo da página Home.</p>
      </div>
    );
  }
}

export default Home;

Conteúdo da Página Sobre

E teremos também o About.js:

import React, { Component } from 'react';

class About extends Component {
  render() {
    return (
      <div>
        <h1>Sobre nós</h1>
        <p>Este é o conteúdo da página About.</p>
      </div>
    );
  }
}

export default About;

App.js

Por fim, temos o código do nosso App.js alterado para gerenciar o Navbar (menu) e os conteúdos:

import React, { Component } from 'react';
import './App.css'; // Importando o CSS externo
import Home from './Home';
import About from './About';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: 'Home',
    };
  }

  /* Tratamento do clique do menu para alterar o conteúdo da página.
     Isso deve ser gerenciado por meio de um state.
  */
  handleMenuClick = (page) => {
    this.setState({ content: page });
  };

  /* Renderizador da Navbar com os ítens do menu. Veja que ao clicar,
    chamamos a função de tratamento do click do menu.
  */
  renderNavbar() {
    return (
      <nav className="navbar">
        <ul className="navList">
          <li className="navItem" onClick={() => this.handleMenuClick('Home')}>
            Início
          </li>
          <li className="navItem" onClick={() => this.handleMenuClick('About')}>
            Sobre
          </li>
        </ul>
      </nav>
    );
  }

  /* Renderizamos o conteúdo por meio de um condicional if. Pegamos do state
     qual o ítem que foi clicado e então chamamos a classe específica.
  */
  renderContent() {
    const { content } = this.state;
    if (content === 'Home') {
      return <Home />;
    } else if (content === 'About') {
      return <About />;
    }
  }

  /* Função de renderização da aplicação */
  render() {
    return (
      <div className="App">
        {/* Navbar */}
        {this.renderNavbar()}

        {/* Conteúdo dinâmico */}
        <div className="content">
          {this.renderContent()}
        </div>

        {/* Rodapé */}
        <footer className="footer">
          <p>© 2024 MeuSite. Todos os direitos reservados.</p>
        </footer>
      </div>
    );
  }
}

export default App;