duvida ao criar menu q abre e fecha ao click

olá! gostaria de saber se alguem poderia me ajudar, estou produzindo um menu que quando o usuario clicka no icone abre uma pequena box, essa parte ja consegui botar pra funcionar ele clicka e fecha... mas nao estou conseguindo pra fazer a box fechar automaticamente quando clicko em outro elemento qualquer do site, elá só fecha se eu por exemplo se eu clickar na propria.

vi na web umas soluções com stoppropagation mas nao consegui rodar na pratica :(

JS

$(document).ready(function(){
    $('.profile_icon').click(function(){
        $('.profile-box').toggleClass("box-active");
    });
});

CSS

nav .profile-box {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 69px;
    right: 10px;
    background-color: rgba(25,25,25,0.95);
    border-radius: 10px;
    padding: 20px;
}

nav .profile-box.box-active  {
    visibility: visible;
    opacity: 1;
}

fico mt grato qm puder me ajudar!