transition não segura | Flexbox: posicione elementos na tela

estou escrevendo um código que consiste em um menu de navegação. ao clicar (onclick) ele deveria abrir (se espandir), mas quando clico ele até se mexe, mas a transição não é completada. só funciona se eu clicar e segurar. eu queria que ele se abrisse qd eu clicasse e parmanecesse aberto e só fechasse quando eu clicasse novamente.

Eis o código:

[...]
<body>
  <div class="navigation">
    <div class="menu__toggle"></div>
    <div class="profile">
      <div class="imgBx">
        <img src="./female-57.jpg" alt="imagem de perfil">
      </div>
    </div>
    <ul class="menu">
      <li>
        <a href="#">
          <span class="icon"><ion-icon name="person-outline"></ion-icon></span>
          <span class="text">Profile</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon"><ion-icon name="chatbubble-outline"></ion-icon></span>
          <span class="text">Inbox</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
          <span class="text">Settings</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon"><ion-icon name="help-circle-outline"></ion-icon></span>
          <span class="text">Support</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon"><ion-icon name="log-out-outline"></ion-icon></span>
          <span class="text">Logout</span>
        </a>
      </li>
    </ul>
  </div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <script>
    const menu__toggle = document.querySelector('.menu__toggle');
    const navigation = document.querySelector('.navigation');
    menu__toggle.onclick = function() {
      navigation.classList.toggle('active');
    }
  </script>
[...]

* {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", "Helvetica";
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f7f7f7f7;
}

.navigation {
    width: 80px;
    background: #fff;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: -20px 20px 50px rgba(0, 0, 0, 0.05);
    transition: 0.5s;
  overflow: hidden;
}

.navigation:active {
    width: 400px;
}

.navigation .menu__toggle {
    position: relative;
    width: 80px;
    height: 70px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0 20px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.navigation .menu__toggle::before {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    background: #333;
    transform: translateY(-10px);
    transition: 0.5s;
}

.navigation .menu__toggle::after {
    content: "";
    position: absolute;
    width: 35px;
    height: 2px;
    background: #333;
    transform: translateY(10px);
    transition: 0.5s;
    box-shadow: 0 -10px #333;
}

.navigation:active .menu__toggle::before {
    transform: translateY(0px) rotate(45deg);
}

.navigation:active .menu__toggle::after {
    transform: translateY(0px) rotate(-45deg);
    box-shadow: 0 0 #333;
}

.navigation .profile {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    padding: 0 10px;
    width: 100%;
}

.navigation .profile .imgBx {
    position: relative;
    width: 60px;
    height: 60px;
    transition: 0.5s;
    border-radius: 50%;
    overflow: hidden;
}

.navigation:active .profile .imgBx {
    width: 200px;
    height: 200px;
}

.navigation .profile .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navigation .menu {
    position: relative;
    width: 100%;
    padding: 10px;
    transition: 0.5s;
    border-top: 1px solid rgb(0, 0, 0, 0.05);
}

.navigation:active .menu {
  padding: 10px 20px;
}

.navigation .menu li {
    list-style: none; /* tira os pontinhos pretos da lista */
}

.navigation .menu li a {
    position: relative;
    display: flex;
    text-decoration: none;
    color: #111;
  border-radius: 10px;
}

.navigation .menu li a:hover {
  background: #0084ff;
  color: #fff;
}

.navigation .menu li a .icon {
    position: relative;
    min-width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  font-size: 1.5em;
}

.navigation .menu li a .text {
  position: relative;
  height: 60px;
  margin-left: 10px;
  display: flex;
    justify-content: center;
    align-items: center;
  font-size: 1.25em;
}

Mergulhe em programação