如何使用ReactJS创建固定的侧边栏？侧边栏应该会在较小的屏幕上折叠

npx create-react-app my-app
cd my-app

import React from 'react';

function Sidebar() {
  return (
    <div className="sidebar">
      {/* 侧边栏内容 */}
    </div>
  );
}

export default Sidebar;

import React from 'react';
import Sidebar from './Sidebar';

function App() {
  return (
    <div className="app">
      <Sidebar />
      {/* 主要内容 */}
    </div>
  );
}

export default App;

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background-color: #f0f0f0;
}

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

function App() {
  const [isSidebarCollapsed, setSidebarCollapsed] = useState(false);

  const toggleSidebar = () => {
    setSidebarCollapsed(!isSidebarCollapsed);
  };

  return (
    <div className="app">
      <button onClick={toggleSidebar}>Toggle Sidebar</button>
      <div className={`sidebar ${isSidebarCollapsed ? 'collapsed' : ''}`}>
        {/* 侧边栏内容 */}
      </div>
      {/* 主要内容 */}
    </div>
  );
}

export default App;

.sidebar.collapsed {
  display: none;
}