Mi sitio web tiene una barra lateral (FiltersSideBar en mi código) con filtros. La barra lateral está a la izquierda.
También creé una funcionalidad que ocultaría la barra lateral en ciertos tamaños de la ventana del navegador. La barra lateral se oculta y aparece un botón con el que (supongo) la barra lateral se puede abrir de nuevo.
Aquí es donde tengo un problema. No sé cómo abrir la barra lateral para que quede encima de la página de información principal.
Aplicación.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> ); }FiltersSideBar.jsx
export default function FiltersSideBar() { return ( <CardContent> <Table> <TableBody> ...... </TableBody> </Table> </CardContent> ); }Comience usando realmente el valor establecido por setHideSidebar
const [filters, setFilters] = useState({.....}) const size = WindowSize(); // Actually use the state here const [hideSidebar, setHideSidebar] = useState(true);Y luego, debajo de eso, donde está verificando si la barra lateral se puede mostrar por encima de un cierto ancho, agregue lo siguiente
{size.width > 600 && <FiltersSideBar />} {size.width <= 600 && !hideSidebar && <FiltersSideBar className="overlay" />} Deberá aumentar su componente FiltersSideBar para usar className cuando esté disponible:
export default function FiltersSideBar(props) { return ( <CardContent className={props.className}> {/* ... */} </CardContent> ); }Y también deberá agregar el siguiente css en alguna parte
.overlay { position: absolute; top: 0; left: 0; z-index: 9999; }