帮我用react写一个侧边栏在右边可点击收起的布局

好的，以下是一个简单的 React 侧边栏组件，可点击折叠：

import React, { useState } from 'react';

const Sidebar = () => {
  const [collapsed, setCollapsed] = useState(false);

  const handleCollapse = () => {
    setCollapsed(!collapsed);
  };

  return (
    <>
      <div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
        </ul>
      </div>
      <div className="content">
        <button onClick={handleCollapse}>{collapsed ? 'Expand' : 'Collapse'}</button>
        <p>Main content goes here!</p>
      </div>
    </>
  );
};

export default Sidebar;

CSS 样式：

.sidebar {
  position: fixed;
  top: 0;
  right: -200px;
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  transition: right 0.3s ease-in-out;
}

.sidebar.collapsed {
  right: 0;
}

.content {
  margin-right: 200px;
  padding: 20px;
}

当点击按钮时，`handleCollapse` 函数会被调用，`collapsed` 状态会被切换。在 CSS 中，`.sidebar` 类有一个 `right` 属性，控制它在右边的位置。当 `.sidebar` 元素的 `collapsed` 类被添加时，`right` 属性的值变为 `0`，从而将侧边栏展开。