At the moment, I have the following structure on the site: SideBar (located on the left) and the main part of the site. I made it so that when the browser width is reduced, the Sidebar is hidden, leaving only the main part of the site (the code is presented below). And further, the SideBar appears only when the browser is expanded. It works.
But I'd like to add the following: When the browser is in a minimized state, add a button that, when clicked, will overlay the SideBar on the main menu (thus leaving the main body of the site behind).
For a demonstration, I will present https://catalog.onliner.by/tv (make the browser width minimal and click the "Фильтры" button)
And accordingly I would like to make a button to close the SideBar
I would be very grateful for any advice
https://codesandbox.io/s/reverent-einstein-mh1xyo
WindowSize.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;
};
App.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>
);
Once again, my expectations: when the SideBar disappears, that a button would appear with which you can open the SideBar, leaving the main page behind
Just create a state for show and hide the sidebar by toggling a class which makes a translate animation to the sidebar.
Ex of the state.
import { useState } from 'react'
const [hideSidebar, setHideSidebar] = useState(false)
You can give your sidebar a class for example 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;
}
Then by your hideSidebar state, you can toggle the closed class when the button is clicked.
<button onClick={() => { setHideSidebar(prev => !prev)})>Toggle Sidebar</div>
In the sidebar container
className={`sidebar-left-nav ${hideSidebar && 'closed'}`}
Please check this.