Hamburguer 菜单图标未与 tabela 对齐在同一高度且不遵循相同的样式

Question

我添加了一个汉堡包图标，但目前没有执行任何操作。当用户单击它时，它应该在左侧打开一个侧面板来显示我们网站的选项，这意味着它应该显示“任务”和“管理”，一个在另一个下面，格式化和样式化。我尝试这样做，但我无法使样式正常工作，并且如果有人单击汉堡菜单，它应该执行显示网站功能的操作。

Barra_Lateral.jsx
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { MdMenu } from 'react-icons/md';
import styles from './Barra_Lateral_style.css';
const BarraLateral = () => {
  const [menuAberto, setMenuAberto] = useState(false);

  const toggleMenu = () => {
    setMenuAberto(!menuAberto);
  };

  return (
    <div className={`styles.sidebar ${menuAberto ? 'aberto' : ''}`}>
      <button className={`hamburger ${styles.hamburger}`} onClick={toggleMenu}>
        <MdMenu />
      </button>
      <div className='funcoes'>
        <Link to='/entrar/home'>Tarefas</Link>
        <Link to='/entrar/admin'>Admin</Link>
      </div>
    </div>
  );
};

export default BarraLateral;

Barra_lateral_style.css
/* Estilos para a barra lateral */
.sidebar {
    width: 0;
    /* Largura inicial da barra lateral quando fechada */
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #0073e6;
    /* Cor de fundo azul */
    overflow-x: hidden;
    transition: 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    /* Cor do texto branco */
    font-size: 1.2rem;
    /* Tamanho do texto */
}

.sidebar.aberto {
    width: 250px;
    /* Largura da barra lateral quando aberta */
}

.hamburguer {
    margin-top: 10px;
    font-size: 2rem;
    /* Tamanho do ícone de hambúrguer */
    cursor: pointer;
}

/* Estilos para os links de funcionalidades */
.funcoes {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2rem;
    /* Tamanho do texto dos links */
}

.funcoes a {
    color: #fff;
    /* Cor do texto dos links */
    text-decoration: none;
    margin: 10px 0;
    transition: 0.3s;
}

.funcoes a:hover {
    color: #0073e6;
    /* Cor de destaque ao passar o mouse */
}

Home.jsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Spinner from '../componentes/Spinner';
import { Link } from 'react-router-dom';
import { MdOutlineAddBox } from 'react-icons/md'; // Apenas importe o ícone que está sendo usado
import TarefasTable from '../componentes/home/TarefasTable';
import TarefasCard from '../componentes/home/TarefasCard';
import BarraLateral from '../componentes/Barra-Lateral/Barra_Lateral'; // Corrija o nome do arquivo importado

const Home = () => {
  const [tarefas, setTarefas] = useState([]);
  const [carregando, setCarregando] = useState(false);
  const [showType, setShowType] = useState('tabela');

  useEffect(() => {
    setCarregando(true);
    axios
      .get('http://localhost:5555/tarefas')
      .then((response) => {
        setTarefas(response.data.data);
        setCarregando(false);
      })
      .catch((error) => {
        console.log(error);
        setCarregando(false);
      });
  }, []);

  return (
    <div className='p-4'>
      <BarraLateral />
      {/* Restante do conteúdo da página */}
      <div className='content'>
        <div className='flex justify-center'>
          <button
            className='bg-sky-500 hover:bg-sky-400 text-white px-4 py-2 rounded-lg mr-2'
            onClick={() => setShowType('tabela')}
          >
            Tabela
          </button>
          <button
            className='bg-sky-500 hover:bg-sky-400 text-white px-4 py-2 rounded-lg'
            onClick={() => setShowType('carta')}
          >
            Card
          </button>
        </div>
        <div className='flex justify-between items-center'>
          <h1 className='text-3xl my-8 mx-auto text-center'>Lista de Tarefas</h1>
          <Link to='/tarefas/criar'>
            <MdOutlineAddBox className='text-green-500 text-4xl' />
          </Link>
        </div>
        {carregando ? (
          <Spinner />
        ) : showType === 'tabela' ? (
          <TarefasTable tarefas={tarefas} />
        ) : showType === 'carta' ? (
          <TarefasCard tarefas={tarefas} />
        ) : (
          <div>
            <p>Invalid showType value: {showType}</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default Home;

Answer 1

我这样做修复了它

" import ./Barra_Lateral_style.css";
const toggleMenu = () => {
    setMenuAberto((prev) => !prev);
  };

return (
    <div style={{ position: "absolute" }}>
      <button
        className={`hamburger ${menuAberto ? "aberto" : ""}`}
        onClick={toggleMenu}
      >
        {menuAberto ? <FiX size={24}/> : <FiMenu size={24} />}
      </button>
      <div className={`sidebar ${menuAberto ? "aberto" : ""}`}>
        <button onClick={toggleMenu}>
          {menuAberto ? <FiX size={24}/> : <FiMenu size={24} />}
        </button>
        <div className="funcoes">
          <Link to="/entrar/home">Tarefas</Link>
          <Link to="/entrar/admin">Admin</Link>
        </div>
      </div>
    </div>
  );
};