React Drawer组件优化：实现展开时推送页面内容而非遮挡

要让侧边栏展开时推送主内容右移，核心是让主内容随侧边栏的显示/隐藏同步调整位置并添加过渡动画，以下是具体实现步骤：

1. 调整主内容容器样式 #

在使用Drawer的父组件中，给主内容容器添加动态边距和过渡效果，使其在侧边栏展开时向右偏移侧边栏的宽度（对应侧边栏的w-64）：

import React, { useState } from "react";
import Drawer from "./Drawer";

const App = () => {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);

  return (
    <div className="min-h-screen">
      {/* 侧边栏触发按钮 */}
      <button 
        onClick={() => setIsDrawerOpen(true)}
        className="p-2 m-4 bg-blue-500 text-white rounded"
      >
        打开侧边栏
      </button>

      {/* 引入侧边栏组件 */}
      <Drawer 
        isOpen={isDrawerOpen} 
        onClose={() => setIsDrawerOpen(false)} 
      />

      {/* 主内容容器 - 核心是动态边距和过渡 */}
      <main className={`transition-all duration-300 ${isDrawerOpen ? 'ml-64' : 'ml-0'}`}>
        <div className="p-8">
          <h1 className="text-2xl font-bold">主页面内容区域</h1>
          <p className="mt-4">侧边栏展开时，这个区域会被推向右方，不会被遮挡</p>
        </div>
      </main>
    </div>
  );
};

export default App;

2. 优化侧边栏定位（可选） #

原Drawer组件使用fixed定位（相对于视口固定），这不会影响主内容的布局偏移。如果希望侧边栏和主内容处于同一文档流上下文，可将fixed改为absolute，同时给父容器设置relative：

修改Drawer组件的外层div类名：

<div
  id="drawer-navigation"
  className={`absolute top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform ${
    isOpen ? "translate-x-0" : "-translate-x-full"
  } bg-white w-64 dark:bg-gray-800`}
  tabIndex={-1}
  aria-labelledby="drawer-navigation-label"
>
  {/* 侧边栏原有内容保持不变 */}
</div>

此时父容器（App中的最外层div）需要添加relative类：

<div className="relative min-h-screen">
  {/* 其他内容 */}
</div>

关键注意点 #

• 动画同步：主内容和侧边栏使用相同的过渡时长（duration-300），保证动画流畅一致
• 宽度匹配：主内容的ml-64必须和侧边栏的w-64宽度一致，确保偏移量准确
• 层级控制：保持侧边栏的z-40，确保它始终在主内容上方（但不会遮挡，因为主内容已偏移）

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