Home > Mobile >  How to open the Sidebar so that it sits on over of the main information page
How to open the Sidebar so that it sits on over of the main information page

Time:07-05

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>
    );
}

CodePudding user response:

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;
}
  • Related