Como Criar um Menu Lateral com Transição e Animação CSS

const [sidebarShow, toggleSidebarShow] = useState(false);
return (
    <>
        <button
            onClick={() => toggleSidebarShow(!sidebarShow)}
            className="btn-navbar btn-account"
            >
               <Icon name="user" /> Account
        </button>
        <AccountMenu show={sidebarShow} toggle={toggleSidebarShow} />
    </>
  );

// Fechar o menu quando clicar fora dele 
document.body.addEventListener("click", function (evt) {
        if (show && !evt.target.closest(".account-menu")) {
            toggle(false);
        }
    });

const currentClass = show ? 'show' : 'hide';
return (<aside className={'account-menu ' + currentClass}>
                <h4 className="email">{email}</h4>
                <strong className="label-plan"><small>Subscription Plan</small></strong>
                  // Coloque aqui seu próprio menu
                <button className="btn-signout">Sign Out</button>
            </aside>
  );

@keyframes width-slide-in {
    0% {
        width: 0;
        opacity: 0;
        display: none;
      }
      35% {
        width: 400px;
      }
    100% {
        opacity: 1;
        width: 400px;
        display: block;
    }
  }
  
aside.account-menu {
    font-size: 14.224px;
    background: #1c2146;
    color: #fff;
    position: fixed;
    height: 100vh;
    right: 0;
    top: 0;
    padding: 0;
    z-index: 1;
  transition-duration: 0.5s;
  animation: width-slide-in 0.5s forwards;
}

aside.account-menu.hide {
    visibility: hidden;
    display: none;
}
aside.account-menu.show {
    visibility: visible;
    display: block;
}