How to close a sidecart if i click outside of it

Question

i am trying to figure out how i can make my sidecart to close when i click outside of it, here is my scirpt:

   const toggler = document.getElementById('menu-toggle');
const cartWrapper = document.getElementById('wrapper');
var crossButton = document.getElementById('closeCart');




// Displaying Menu Cart
document.addEventListener('DOMContentLoaded', () => {

    toggler.addEventListener('click', toggleCart);
    crossButton.addEventListener('click',closeCart);
    
    function toggleCart(){

        cartWrapper.classList.toggle('menuDisplayed');
        cartWrapper.classList.toggle('menuDisplayedBgColor');

    }

    function closeCart(){

        cartWrapper.classList.toggle('menuDisplayed');
        cartWrapper.classList.toggle('menuDisplayedBgColor');
    }

   
 

    });

toggler is button that opens sidecart cartWrapper is the sidecart and crossButton the cross button that close the sidecart

Here is my sidecart:

If you want more information about my code i would appreciate it if you tell me, Thank you!

My html code:

    <!-- Sidebar Cart-->

<div id="wrapper">
  
    <!-- Sidebar -->
<div id="sidebar-wrapper">
  <div class="container">
  <div class="row">
    <div class="col-md-6 mt-auto titleCart">
      <h2 class="titleText">YOUR CART</h2>
    </div>
    <div class="col-md-2" style="left:30%"> 
      <div class="crossIcon" id="closeCart">
        <span class="iconify closeIcon" data-icon="zmdi:close"></span>
      </div>
    </div>
    </div>
    </div>
      <ul class="sidebar-nav">

      <li class="cart-item">
        <div class="cart-item-img">
           <img src="imgProducts/guitar1.jpg" alt="">
        </div>
        <div class="cart-item-txt">
           <a class = "cart-item-name" href="#">Miyiagi Guitar</a>
            <span class="cart-item-price-qty">
                1 x 16.00
            </span>
        </div>        
        <button class="button deleteBtn"><i class="fa fa-trash-o" style="position:relative;font-size:24px; left:0;"></i></button>   
        </li>

      </ul>

    <div class="col-md-12" style="margin-top:4em;">
      <hr class="dividerLineCart">
      <div class="cart-total">
        <h2 class="cartTotal">Total: $0.00</h2>
      </div>
    </div>
      <div class="col-md-12 d-flex buttonsCartDiv">
        <a href="cart.php" href="cart.php" class="buttonViewCart"> View Cart </a>
        <a href="#" class="buttonCheckout" style="margin-right:0.5em;"> Check Out </a>
      </div>
    

  </div>
</div>

My navbar that includes the button that toggle my sidecart:

<nav class="navbar fixed-top navbar-expand-md py-3 navbar-dark" style="background-color: rgba(41, 56, 61,0.65);font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
    <a class="navbar-brand" href="index.php">
        <img src="Images/charman logo white-trans.png" alt="Logo" style="height:50px;">
    </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li><hr class="dropdown-divider"></li>
      <li class="nav-item">
        <a class="nav-link" href="index.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="shop.php">Shop</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" href="guitars.php"  id="navbarDropdownMenuLink" role="button"  aria-haspopup="true" aria-expanded="false">
        Guitars
      </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="electrical-type.php">Electrical</a>
          <a class="dropdown-item" href="acoustic-type.php">Acoustic</a>
          <a class="dropdown-item" href="basses-type.php">Basses</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.php">Contact</a>
      </li> 
      <li class="nav-item">
        <a class="nav-link" id="has-divider" href="#" data-target="#modalRegister" data-toggle="modal">Sign Up
        <span class ="glyphicon glyphicon-user" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
       </a>
      </li>  
      <li class="nav-item">
        <a class="nav-link" id="has-divider2" href="#" data-target="#modalLogin" data-toggle="modal">Login
        <span class="glyphicon glyphicon-log-in" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="menu-toggle"><span id="cart-text">Cart</span>
          <span class="glyphicon glyphicon-shopping-cart" style="transform: scaleX(-1)" aria-hidden="true"></span>
          <span class="badge badge-notify">0</span>
        </a>
      </li>            
    </ul>
  </div>  
</nav>

Answer 1

Well you can just click EventListener to the elements opening outside the sideCart.... ! Btw one question here where you want to get clicked.... you just need to add click event listener outside of this cart thing.. and you are pretty much good to go... !

Answer 2

  if (cartWrapper.hasClass("menuDisplayed")) {
    $("body").on("click", function() {
           closeCart();
       });
       cartWrapper.on("click", function(event) {
            event.stopPropagation();
       });
 });

Answer 3

Hope this Code will help you.

<script>
    let sidebar = document.getElementById('sidebar-wrapper');
    let navbarTogglerButton = document.getElementById('toggler-button');

    window.document.addEventListener('click', (e) => {             
        let clickedArea = e.path[e.path.length-6]

        if ( clickedArea == sidebar || e.path[0] == navbarTogglerButton) {
            cartWrapper.classList.toggle('menuDisplayed');
            cartWrapper.classList.toggle('menuDisplayedBgColor');
        }
        else {             
            cartWrapper.classList.toggle('menuDisplayed');
            cartWrapper.classList.toggle('menuDisplayedBgColor');
        }
    });
</script>