切换按钮打开侧边栏时如何调整主内容尺寸并按侧边栏宽度位移

核心逻辑是通过同一个状态绑定侧边栏宽度和主内容偏移值，确保两者数值完全一致，不需要额外计算偏移距离。

• 先定义固定常量存储侧边栏宽度，避免两处写数值出现偏差：const SIDEBAR_WIDTH = 240，单位默认px，你可以根据需求自行调整数值。
• 侧边栏样式绑定状态控制位移：打开时位移为0，关闭时向左偏移自身宽度，同时加上和主内容区同步的过渡动画。
• 主内容区样式绑定同一个状态，侧边栏打开时左外边距等于侧边栏宽度，关闭时左外边距为0，过渡动画时长、缓动函数和侧边栏保持一致。
• 切换按钮仅需修改控制侧边栏显示的状态值即可，两侧样式会自动同步更新。

核心代码示例如下：

import { useState } from 'react';

// 统一配置侧边栏宽度，两处调用保证数值一致
const SIDEBAR_WIDTH = 240;

export default function App() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  return (
    <div className="w-full min-h-screen flex">
      {/* 侧边栏 */}
      <aside 
        className={`fixed top-0 left-0 h-full w-[${SIDEBAR_WIDTH}px] bg-slate-800 text-white z-20 transition-transform duration-300 ease-in-out ${
          isSidebarOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        侧边栏内容区域
      </aside>

      {/* 主内容区域 */}
      <main 
        className={`flex-1 min-h-screen p-4 transition-all duration-300 ease-in-out ${
          isSidebarOpen ? `ml-[${SIDEBAR_WIDTH}px]` : 'ml-0'
        }`}
      >
        <button 
          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
          className="px-4 py-2 bg-blue-600 text-white rounded-md"
        >
          切换侧边栏
        </button>
        主内容区域
      </main>
    </div>
  );
}

如果你使用的是Tailwind CSS v3以下不支持方括号动态值的版本，可以先在tailwind.config.js中提前注册自定义宽度类：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      width: {
        sidebar: '240px',
      },
      margin: {
        sidebar: '240px',
      }
    }
  }
}

之后直接用w-sidebar、ml-sidebar替换代码中的动态值即可。

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