activar enlace al hacer click

[pilucho]

Hola Amigos del Foro.

Tengo el siguiente problema, el código funciona, pero no logro que se active los enlace seleccionado con dicho color,
es decir si hago click en alguno de los ITEMS debería quedar seleccionado que indica donde esta activado
el problema puede estar en el JAVASCRIPT.

Código Javascript:

<script>
let navigation = document.querySelector('.navigation'); 
let list = document.querySelectorAll(".navigation li");
function activeLink() {
  list.forEach((item) => {
    item.classList.remove("hovered");
  });
  this.classList.add("hovered");
}
list.forEach((item) => item.addEventListener("click", activeLink));
</script>
 

Código HTML:

<!-- AdminLTE -->
  <aside class="main-sidebar navigation">
    <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Item 1 -->
          <li class="nav-item">
            <a href="mylink.php" class="nav-link">
              <p>Item 1</p>
            </a>
          </li>
          <!-- Item 2 -->
          <li class="nav-item">
            <a href="mylink.php" class="nav-link">
              <p>Item 2</p>
            </a>
          </li>
          <!-- Item SubMenu -->
          <li class="nav-item">
            <a href="#" class="nav-link">
                <p>Item SubMenu</p>
            </a>
            <ul class="nav nav-treeview" style="display: none;">
              <li class="nav-item">
                <a href="mylink.php" class="nav-link">
                  <p>Item SubMenu 1</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="mylink.php" class="nav-link">
                  <p>Item SubMenu 2</p>
                </a>
              </li>
            </ul>          
          </li><!-- .Item SubMenu -->
        </ul>
    </nav><!-- .mt-2 -->
  </aside>
 

Código CSS:

<style>
.navigation {
  background: var(--blue);
  overflow: hidden;
}
.navigation ul {
  top: 0;
  left: 0;
}
.navigation ul li {
  list-style: none;
  color: var(--blue);
}
.navigation ul li:hover,
.navigation ul li.hovered {
  background-color: var(--white);
}
 
.navigation ul li a {
  color: var(--blue);
}
.navigation ul li:hover a p,
.navigation ul li.hovered a p {
  color: var(--blue);
}    
</style>