按钮显示SideBar的外观。

Question

目前，我在网站上有以下结构: SideBar (位于左侧)和站点的主要部分。我这样做是为了当浏览器的宽度缩小时，边栏是隐藏的，只留下站点的主要部分(代码如下所示)。而且，只有当浏览器展开时，SideBar才会出现。它起作用了。

但我想添加以下内容:当浏览器处于最小化状态时，添加一个按钮，当单击该按钮时，该按钮将覆盖主菜单上的SideBar (从而将站点的主体留在后面)。

作为演示，我将展示https://catalog.onliner.by/tv (使浏览器宽度最小化并单击"Фильтры“按钮)

因此，我想做一个按钮来关闭SideBar

如有任何建议，我将不胜感激。

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

再次，我的期望是:当SideBar消失时，会出现一个按钮，您可以用该按钮打开SideBar，而将主页抛在后面。

Answer 1

只需创建一个显示状态，并通过切换一个使translate动画到侧栏的类来隐藏侧边栏。

前政府官员。

import { useState } from 'react'

const [hideSidebar, setHideSidebar] = useState(false)

你可以给你的侧边栏一个类，例如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;
}

然后，根据您的hideSidebar状态，可以在单击按钮时切换closed类。

<button onClick={() => { setHideSidebar(prev => !prev)})>Toggle Sidebar</div>

在侧栏容器中

className={`sidebar-left-nav ${hideSidebar && 'closed'}`}

请检查一下这个。

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