侧边栏在最小化时向右推送内容，在最大化时粘住

Question

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

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

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

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

应用程序.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 ^，比如如果侧边栏已经打开并且您尝试再次打开，然后切换两次，但这不起作用。

侧边栏.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**

侧边栏.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;
    }
  }

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

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

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

Answer 1

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

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

它应该会刷新。 它比普通网站慢一点，但我认为那是因为我使用的是 NPM。 我要说这是解决方案，因为它是标准。