Sidebar pushes content right when minimized, sticks when maximized

I am very, very new to front-end (I’ve been doing it for a week)

I currently have some JS/React, and CSS code that makes a basic website. Everything works and I’ve fixed all the bugs but one:

When the screen is full-size, the sidebar is automatically open. I don’t really care if it is or isn’t (and my problem may be solved if it wasn’t), but it is. When I minimize, the sidebar collapses and opens as normal. The content of the main page and the navigation bar on the top push to the right using JQuery. However, if I leave the sidebar open and maximize the screen, the contents stay pushed to the right because the sidebar stays open on the larger screen.

I have no idea what you need to see to be able to help me, so I’ll post the sidebar JS and CSS and the App.js JQuery code.

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

I did try to do an if/else up there ^, something like if the sidebar is already open and you try to open again, then toggle twice, but that didn’t work.

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

I only included what I thought might help ^^