汉堡菜单图标对齐与样式问题及侧边栏交互修复需求

1. 汉堡菜单图标对齐&样式统一问题 #

问题根源 #

• CSS类名拼写错误：JSX中使用hamburger，但CSS里写成了hamburguer（多了一个字母u），导致样式无法生效。
• CSS Modules使用错误：不能将styles.sidebar作为字符串拼接，需直接通过styles.xxx形式引用类名。
• 侧边栏采用fixed定位，按钮脱离文档流，无法与页面表格内容对齐。

修复操作 #

1. 修改CSS类名，将.hamburguer改为.hamburger，保证类名一致。
2. 调整汉堡按钮位置，设置与页面标题栏匹配的margin-top，或把侧边栏align-items改为flex-start，让按钮靠上对齐。
3. 正确使用CSS Modules：JSX中类名需通过${styles.sidebar}形式引用，而非直接拼接字符串。

2. 汉堡菜单交互&样式失效问题 #

问题根源 #

• 侧边栏aberto类未正确绑定：使用CSS Modules时，需通过styles.aberto才能生效。
• 链接hover颜色设置错误：与背景色#0073e6一致，hover时文字与背景融合，无法识别。
• 按钮无视觉反馈：默认按钮样式干扰，点击时无明显交互提示。

修复操作 #

1. 将JSX中的aberto改为styles.aberto，确保侧边栏打开时宽度变化生效。
2. 修改链接hover颜色为#e0e0e0这类浅色，与蓝色背景形成区分。
3. 给汉堡按钮添加background: none、border: none样式，去除默认按钮样式，保留cursor: pointer确保点击提示。

修正后的完整代码 #

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 ? styles.aberto : ''}`}>
      <button className={styles.hamburger} onClick={toggleMenu}>
        <MdMenu />
      </button>
      <div className={styles.funcoes}>
        <Link to='/entrar/home'>Tarefas</Link>
        <Link to='/entrar/admin'>Admin</Link>
      </div>
    </div>
  );
};

export default BarraLateral;

Barra_Lateral_style.css #

/* 侧边栏基础样式 */
.sidebar {
    width: 0;
    height: 100vh;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: #0073e6;
    overflow-x: hidden;
    transition: width 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 10px;
    color: #fff;
    font-size: 1.2rem;
}

/* 侧边栏打开状态 */
.sidebar.aberto {
    width: 250px;
}

/* 汉堡按钮样式 */
.hamburger {
    margin-top: 20px; /* 与页面标题栏高度匹配 */
    font-size: 2rem;
    cursor: pointer;
    background: none;
    border: none;
    color: #fff;
}

/* 功能链接容器 */
.funcoes {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 20px;
    font-size: 1.2rem;
}

/* 链接样式 */
.funcoes a {
    color: #fff;
    text-decoration: none;
    margin: 10px 0;
    transition: color 0.3s ease;
}

/* 链接hover效果 */
.funcoes a:hover {
    color: #e0e0e0; /* 浅色，与蓝色背景区分 */
}

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';
import TarefasTable from '../componentes/home/TarefasTable';
import TarefasCard from '../componentes/home/TarefasCard';
import BarraLateral from '../componentes/Barra-Lateral/Barra_Lateral';

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 />
      {/* 左边距预留，防止侧边栏打开遮挡内容 */}
      <div className='content' style={{ marginLeft: '60px', transition: 'margin-left 0.5s ease' }}>
        <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;

内容的提问来源于stack exchange，提问作者programmerlearner