organize Css menu-bars

Question

i had create a menu-bars hamburger inside the app.js file to show it when I click on the 3bars alls is good but I had a problem related to CSS so when I click on icons-bar the menubar display very well but the other menu navbar on the right of it disappear.to be honest with you I'm not hero in CSS.this is my code :

app.js file:
import {useState} from "react";
import {BrowserRouter, Routes, Route, Link} from "react-router-dom";
import {useSelector} from "react-redux";
import HomePage from "./Pages/HomePage";
import ProductPage from "./Pages/ProductPage";
import CartPage from "./Pages/CartPage"


function App() {
const cart = useSelector(state=> state.cart);
const productsList = useSelector(state=> state.productsList);
const { products } = productsList;
const categories = products?.length 
 ? products.map(({category})=> category)
 : [];
 const [open, setOpen] = useState(false);
 const allCategories = categories.filter((element, index, categories)=> element !== categories[index + 1]);
 console.log(allCategories)
const { cartProducts } = cart;

const menuBar = () => {
    return (
        <div className={open ?"bars": "bars-close"} >
            {allCategories.map((category, index)=> <div key={index} className="bar" >{category}</div>
               
            )}

        </div>
    )
}
console.log(open)
  return (
      <BrowserRouter>
    <div className="grid-container" >
            <header className="row">
                <div>
                    <Link className="brand" to="/">My shop</Link>
                   <span className ="menu-bar">
                       <i onClick={()=> setOpen(!open)} className="fa fa-bars"></i>
                   </span>
                   {menuBar()}
                </div>
                <div>
                    <Link to="/cart/:id">Cart
                    {cartProducts.length > 0 && (
                        <span className="badge" >{cartProducts.length}</span>
                    )}
                    </Link>
                    <Link to="/signin">Sign In</Link>
                </div>
            </header>
            <main>
                <Routes>
                    <Route path="/cart/:id" element={<CartPage />} ></Route>
                    <Route path="/product/:id" element={<ProductPage />} exact ></Route>
                    <Route path="/" element={<HomePage />} ></Route>
              
                  </Routes>
            </main>
            <footer className="row center" >All right reserved</footer>
        </div>
        </BrowserRouter>
  );
}

export default App;

index.css file just the part of menu-bars:
 .bars {
      display: block;
      width: 20rem;
      background-color: #101010;
      height: 80px;
      transition-delay: 400ms;
      z-index: 2;
    position: relative;
      left: 5rem;
    
  }
  .bars-close {
      display: none;
 transition-delay: 500ms;
  }
  .bars .bar {
      font-size: 2rem;
      color: #fff;
      text-decoration: underline;
      margin: 0.2rem 0;
      text-align: center;
  }
  .menu-bar {
      color: #ffffff;
      
  }
  .menu-bar i {
    margin-left: 2rem;
    font-size: 3rem;
    cursor: pointer;
  }