侧边栏在最小化时向右推送内容，在最大化时保持不变

Question

我对前端非常非常陌生（我已经做了一个星期了）

我目前有一些 JS/React 和 CSS 代码可以制作一个基本的网站。一切正常，我已经修复了除一个错误之外的所有错误：

全屏时，侧边栏自动打开。我真的不在乎它是否存在（如果不是，我的问题可能会得到解决），但它确实存在。当我最小化时，边栏会折叠并正常打开。主页内容和顶部导航栏使用JQuery向右推。但是，如果我让侧边栏保持打开状态并最大化屏幕，内容会保持向右推，因为侧边栏在较大的屏幕上保持打开状态。

我不知道你需要看什么才能帮助我，所以我会 post 边栏 JS 和 CSS 以及 App.js JQuery代码。

App.js

  const [sidebarOpen, setsidebarOpen] = useState(false);
  const openSidebar = () => {
    setsidebarOpen(true);
    $('.main__container').toggleClass("open");
    $('.navbar').toggleClass("open");
    $('.navbar__left').toggleClass("open");
  };
  const closeSidebar = () => {
    setsidebarOpen(false);
    $('.main__container').toggleClass("open");
    $('.navbar').toggleClass("open");
    $('.navbar__left').toggleClass("open");
  };

我确实尝试在上面做一个 if/else ^，比如如果侧边栏已经打开并且您尝试再次打开，然后切换两次，但那没有用。

sidebar.js

const Sidebar = ({sidebarOpen, closeSidebar}) => {
   
    return (
        <div className={sidebarOpen ? "sidebar_responsive" : ""} id="sidebar">
            <div className="sidebar__title">
                <div className="sidebar__img">
                    <img src={logo} alt="logo" />
                </div>
                <div className="sidebar__he">
                    <h1>name <br></br> stuff</h1>
                </div>
                <i
                onClick={() => closeSidebar()}
                className="fa fa-times"
                id="sidebarIcon"
                aria-hidden="true"
                ></i>
            </div>
    **menu items**

sidebar.css

#sidebar {
    background: #263f8e;
    grid-area: sidebar;
    overflow-y: auto;
    padding: 20px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    height: 100vh;
  }
  
  
  .sidebar__menu > h2 {
    color: #69BF87;
    font-size: 16px;
    margin-top: 15px;
    margin-bottom: 5px;
    padding: 0 10px;
    font-weight: 700;
  }
  

  .sidebar_responsive {
    display: inline !important;
    z-index: 9999 !important;
    left: 0 !important;
    position: absolute;
    
  }
  
  @media only screen and (max-width: 978px) {
    #sidebar {
      display: none;
    }
  
    .sidebar__title > i {
      display: inline;
    }
  }

我只包含了我认为可能有帮助的内容^^

小编辑：如果我让侧边栏显示 = None，那么它会在没有侧边栏的情况下加载它。如果我最小化，打开侧边栏，然后最大化，侧边栏会保留。我感觉我在兜圈子！

小编辑 2：这有效 $(window).resize(function(){window.location.reload();});但不是很顺利，宁愿有更好的解决方案:)

Answer 1

似乎大多数（如果不是全部）网站在调整大小时都会刷新屏幕。我添加了这一行：

$(window).resize(function(){window.location.reload();});

它会按预期刷新。它比常规网站慢一点，但我认为那是因为我正在使用 NPM。我要说这是解决方案，因为它是标准的。

侧边栏在最小化时向右推送内容，在最大化时保持不变

Sidebar pushes content right when minimized, sticks when maximized

html

javascript

css

jquery

reactjs