在桌面或tablet视图中隐藏语义ui react的边栏

import React, { useState, useEffect } from 'react';

const App = () => {
  const [isSidebarVisible, setIsSidebarVisible] = useState(true);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 768) { // 设置屏幕宽度的阈值
        setIsSidebarVisible(false);
      } else {
        setIsSidebarVisible(true);
      }
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div className="app">
      {isSidebarVisible && <Sidebar />} {/* 根据isSidebarVisible的值决定是否渲染边栏 */}
      <Content />
    </div>
  );
};

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

const Content = () => {
  // 主内容区域的内容
  return (
    <div className="content">
      {/* 主内容区域的内容 */}
    </div>
  );
};

export default App;