帮我用react写一个可收起侧边栏页面布局

当然可以，以下是一个简单的示例代码：

import React, { useState } from 'react';
import './App.css';

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

  const handleSidebarToggle = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={handleSidebarToggle}>Toggle Sidebar</button>
      </header>
      <div className="App-content">
        {isSidebarOpen && (
          <aside className="App-sidebar">
            <nav>
              <ul>
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
              </ul>
            </nav>
          </aside>
        )}
        <main className="App-main">
          <h1>Page Content</h1>
        </main>
      </div>
    </div>
  );
}

export default App;

在上面的代码中，我们使用了 `useState` hook 来跟踪侧边栏的开关状态。当用户点击 `Toggle Sidebar` 按钮时，我们会调用 `handleSidebarToggle` 函数来切换 `isSidebarOpen` 的值。如果 `isSidebarOpen` 为 `true`，则渲染侧边栏，否则不渲染。

在 CSS 中，我们可以使用 flexbox 布局来实现侧边栏的收起和展开。以下是示例代码中使用的 CSS：

.App {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.App-header {
  height: 60px;
  background-color: #282c34;
  color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
}

.App-content {
  flex: 1;
  display: flex;
}

.App-sidebar {
  width: 200px;
  background-color: #282c34;
  color: white;
  padding: 20px;
  transition: all 0.3s ease-in-out;
  transform: translateX(-200px);
}

.App-sidebar nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.App-sidebar nav ul li {
  margin-bottom: 10px;
}

.App-main {
  flex: 1;
  padding: 20px;
}

.App-content .App-sidebar-open {
  transform: translateX(0);
}

在上面的 CSS 中，我们定义了 `App`、`App-header`、`App-content`、`App-sidebar` 和 `App-main` 几个类，分别表示整个页面、页面头部、页面内容、侧边栏和主内容区域。我们通过 `flex-direction` 属性将 `App` 设置为垂直布局，然后将 `App-header` 固定在页面顶部。`App-content` 则占据了剩余的空间，并使用了 flexbox 布局将侧边栏和主内容区域并排排列。

在 `App-sidebar` 类中，我们将侧边栏的宽度设置为 200px，并使用了 `translateX` 属性将其向左平移了 200px，这样在页面加载时它就会被隐藏起来。当用户点击 `Toggle Sidebar` 按钮时，我们会给 `App-content` 添加一个 `App-sidebar-open` 类来将侧边栏向右平移回来。这里使用了 CSS 的 transition 动画来让侧边栏平滑地收起和展开。

希望这个示例能够帮助你实现可收起侧边栏页面布局，如果有任何疑问或需要进一步的帮助，请随时联系我！