how to styling component from anther component in react js

enter image description here

Hello, how are you guys, I hope you find a solution to this problem. I want when I click on these bars the sidebar to disappear even though it’s not in the same component Thanks for the help.

import {
  faMagnifyingGlass,
  faCartShopping,
  faMessage,
  faBell,
  faUser,
  faBars,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import Sidebar from "./sidebar";
import Content from "./content";
import { render } from "@testing-library/react";

export default function Navbar(props) {

  
  
    function Toogle(){
        
      
      
    }
    
  return (
    <div className="item2" >
      <div className="leftContent">
        <FontAwesomeIcon className="iconsLeft" icon={faBars} onClick={Toogle}/>
        <FontAwesomeIcon className="iconsLeft" icon={faMagnifyingGlass} />
      </div>
      <div className="rightContent">
        <FontAwesomeIcon className="iconsRight" icon={faCartShopping} />
        <FontAwesomeIcon className="iconsRight" icon={faMessage} />
        <FontAwesomeIcon className="iconsRight" icon={faBell} />
        <div className="userAcount">
          <FontAwesomeIcon className="iconsRight" icon={faUser} />
          <p>issam</p>
        </div>
      </div>
    </div>
  );
}