Button for the appearance of the SideBar-CodePudding

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

CodePudding user response：

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.

https://codesandbox.io/s/zealous-hodgkin-lf7qwt