React侧边栏下拉菜单重叠问题修复方案咨询

Hey there! Let's fix that sidebar submenu overlap issue right away— I can see exactly what's going wrong here.

What's Causing the Overlap? #

The main culprit is the fixed height='40px' on your parent Box component for each sidebar item. When the submenu expands, it can't fit inside that fixed height, so it overflows and overlaps with the items below. On top of that, your state management (isOpen + selectedSubMenu) is redundant and might lead to inconsistent behavior.

Step-by-Step Fix #

Here's how to adjust your code to get the "push down" behavior you want:

1. Remove Fixed Height from Parent Box
   Replace the fixed height='40px' with minHeight='40px'— this keeps the default item height consistent while letting the box grow vertically to fit the expanded submenu.

2. Simplify State Management
   You don't need a separate isOpen state. The selectedSubMenu alone can track which menu is expanded. When a user clicks an item, toggle its selection: if it's already open, close it; otherwise, set it as the active submenu.

3. Tweak Styling for Clarity (Optional)
   Add padding to items and indent submenus to make the hierarchy more visually obvious.

Modified Code #

import { useState } from "react";
import { Box, Text } from "@chakra-ui/react";
import sidebarItems from "./sidebarItems";

export default function Sidebar() {
  const [selectedSubMenu, setSelectedSubMenu] = useState("");

  const handleClick = (title) => {
    // Toggle submenu: close if already open, open if closed
    setSelectedSubMenu(prev => prev === title ? "" : title);
  };

  return (
    <div>
      <Box>
        {sidebarItems.map((item) => {
          const isExpanded = selectedSubMenu === item.title;
          return (
            <Box 
              key={item.title} // Add unique key for React list efficiency
              width='200px' 
              minHeight='40px' // Let box grow with content
              textAlign='start' 
              cursor='pointer' 
              onClick={() => handleClick(item.title)} 
              fontFamily='Fjord One' 
              boxShadow='lg' 
              _hover={{ bgColor: "#1a2963", color: "white" }}
            >
              <Text fontSize='xl' as='bold' py={2}> {/* Add vertical padding for better spacing */}
                {item.title}
              </Text>
              {isExpanded && item.subMenu?.map((subItem) => (
                <Box 
                  key={subItem.title} // Unique key for submenu items
                  bgColor='#e4e8e5' 
                  boxShadow='md' 
                  textAlign='start' 
                  width='200px' 
                  minHeight='40px'
                  py={2} // Vertical padding for submenu items
                  ml={4} // Indent submenu for clear hierarchy
                >
                  <Text fontFamily='Fjord One' fontSize='xl'>
                    {subItem.title}
                  </Text>
                </Box>
              ))}
            </Box>
          );
        })}
      </Box>
    </div>
  );
}

Key Changes Explained #

• Dynamic Height: The parent Box now expands automatically when the submenu is shown, pushing down the items below instead of overlapping them.
• Simpler State: The handleClick function toggles the selectedSubMenu state, eliminating the need for a separate isOpen variable.
• Better UX: Added padding improves touch targets, and submenu indentation makes the navigation hierarchy clearer.
• React Best Practices: Added unique key props to all list items, which is required for efficient rendering.

This should give you the exact behavior you're looking for— clicking a parent item will expand its submenu and push all subsequent sidebar items downward.

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