如何打开边栏，使其位于主信息页面的上方

Question

我的网站有一个带过滤器的侧边栏(我代码中的FiltersSideBar)。侧边栏在左边。

我还制作了一个功能，可以在浏览器窗口的特定大小隐藏边栏。侧边栏隐藏起来，出现一个按钮，(我想)使用该按钮可以再次打开侧边栏。

这就是我的问题所在。我不知道如何打开边栏，使它位于主信息页的上方。

App.js

export default function App() {
const [filters, setFilters] = useState({.....})
const size = WindowSize();   
const [setHideSidebar] = useState(false);

return (
<ThemeProvider theme={theme}>
<BrowserRouter>
<Header/>
<button style={{display: size.width > 600 ? "none" : "inline"}}
onClick={() => {setHideSidebar((prev) => !prev);}}>Toggle Sidebar
</button>
<AppContext.Provider value={{ filters, setFilters}}>
<div style={{display: 'flex'}} >
{size.width > 600 && <FiltersSideBar />}
<Routes>
<Route exact path='/devices/:deviceId/:userId/:sessionId' element={<Records />} />
<Route exact path='/devices/:deviceId/:userId/:sessionId/:recordId' element={<Record />} />
<Route path="*" element={<Navigate to="/devices" replace />} />
</Routes>
</div>
</AppContext.Provider>
<Footer />
</BrowserRouter>
</ThemeProvider>
);
}

过滤器边栏.jsx

export default function FiltersSideBar() {
return (
<CardContent>
<Table>
<TableBody>
......
</TableBody>
</Table>
</CardContent>
);
}

Answer 1

实际使用setHideSidebar设置的值开始

const [filters, setFilters] = useState({.....})
const size = WindowSize();
// Actually use the state here
const [hideSidebar, setHideSidebar] = useState(true);

然后在下面，在检查侧边栏是否可以显示在某个宽度以上的地方，添加以下

{size.width > 600 && <FiltersSideBar />}
{size.width <= 600 && !hideSidebar && <FiltersSideBar className="overlay" />}

当className可用时，您需要增强FiltersSideBar组件以使用它：

export default function FiltersSideBar(props) {
return (
<CardContent className={props.className}>
{/* ... */}
</CardContent>
);
}

此外，您还需要在的某个位置添加以下css

.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
}