Por el momento, tengo la siguiente estructura en el sitio: SideBar (ubicado a la izquierda) y la parte principal del sitio. Lo hice para que cuando se reduzca el ancho del navegador, la barra lateral se oculte, dejando solo la parte principal del sitio (el código se presenta a continuación). Y además, la barra lateral aparece solo cuando se expande el navegador. Funciona.
Pero me gustaría agregar lo siguiente: cuando el navegador esté en un estado minimizado, agregue un botón que, al hacer clic, superpondrá la barra lateral en el menú principal (dejando así atrás el cuerpo principal del sitio).
Para una demostración, presentaré https://catalog.onliner.by/tv (haga que el ancho del navegador sea mínimo y haga clic en el botón "Фильтры")
Y en consecuencia me gustaría hacer un botón para cerrar la barra lateral
estaria muy agradecido por cualquier consejo
https://codesandbox.io/s/reverent-einstein-mh1xyo
TamañoVentana.jsx
export default function WindowSize () { const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined }); useEffect(() => { if (typeof window !== "undefined") { function handleResize() { setWindowSize({ width: window.innerWidth, height: window.innerHeight }); } window.addEventListener("resize", handleResize); handleResize(); return () => window.removeEventListener("resize", handleResize); } }, []); return windowSize; };Aplicación.jsx
return ( <ThemeProvider theme={theme}> <BrowserRouter> <AppContext.Provider value={{ filters, setFilters}}> <div style={{display: 'flex'}}> {size.width > 600 && <Sidebar />} <Routes> <Route exact path='/devices/' element={<PockId />} /> <Route path="*" element={<Navigate to="/devices" replace />} /> </Routes> </div> </AppContext.Provider> </BrowserRouter> </ThemeProvider> );Una vez más, mis expectativas: cuando desaparezca el SideBar, que aparezca un botón con el que puedas abrir el SideBar, dejando atrás la página principal.
Simplemente cree un estado para mostrar y ocultar la barra lateral alternando una clase que hace una animación de translate a la barra lateral.
ex del estado.
import { useState } from 'react' const [hideSidebar, setHideSidebar] = useState(false) Puede darle a su barra lateral una clase, por ejemplo sidebar-left-nav
.sidebar-left-nav { -webkit-transform: translate3d(-100%, 0px, 0px); transform: translate3d(-100%, 0px, 0px); visibility: visible; transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; } .closed.sidebar-left-nav { -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); visibility: visible; } Luego, por su estado hideSidebar , puede alternar la clase closed cuando se hace clic en el botón.
<button onClick={() => { setHideSidebar(prev => !prev)})>Toggle Sidebar</div>En el contenedor de la barra lateral
className={`sidebar-left-nav ${hideSidebar && 'closed'}`}Por favor, chequee esto.