My website has a sidebar (FiltersSideBar in my code) with filters. The sidebar is on the left.
I also made a functionality that would hide the Sidebar at certain sizes of the browser window. The sidebar hides and a button appears with which (I assume) Sidebar can be opened again.
This is where I have a problem. I can't figure out how to open the Sidebar so that it sits on over of the main information page.
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>
);
}
FiltersSideBar.jsx
export default function FiltersSideBar() {
return (
<CardContent>
<Table>
<TableBody>
......
</TableBody>
</Table>
</CardContent>
);
}
Start by actually using the value set by setHideSidebar
const [filters, setFilters] = useState({.....})
const size = WindowSize();
// Actually use the state here
const [hideSidebar, setHideSidebar] = useState(true);
And then below that, where you are checking if the sidebar can be shown above a certain width, add the following
{size.width > 600 && <FiltersSideBar />}
{size.width <= 600 && !hideSidebar && <FiltersSideBar className="overlay" />}
You'll need to augment your FiltersSideBar component to use the className when it's available:
export default function FiltersSideBar(props) {
return (
<CardContent className={props.className}>
{/* ... */}
</CardContent>
);
}
And also you'll need to add the following css somewhere
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
}