[Dúvida] Indicação de imagem ativa no HTML

Olá Gustavo! Tudo bem?

Vou apresentar algumas sugestões de implementação que combina a lógica aplicada em páginas Django com CSS:

1. Adicionando uma classe 'ativa' no HTML: primeiro, você precisa adicionar uma classe 'ativa' ao link que corresponde à página atual. No Django, isso pode ser feito verificando a URL atual.

   <nav class="menu-lateral__navegacao">
       <a href="{% url 'index' %}" class="{% if request.path == '/' %}ativa{% endif %}">
           <img src="{% static 'assets/icones/1x/Home - ativo.png' %}"> Home
       </a>
       <a href="{% url 'login' %}" class="{% if request.path == '/login/' %}ativa{% endif %}">
           <img src="{% static 'assets/icones/1x/Mais vistas - inativo.png' %}"> Login
       </a>
       <a href="{% url 'cadastro' %}" class="{% if request.path == '/cadastro/' %}ativa{% endif %}">
           <img src="{% static 'assets/icones/1x/Novas - inativo.png' %}"> Cadastro
       </a>
       <a href="{% url 'logout' %}" class="{% if request.path == '/logout/' %}ativa{% endif %}">
           <img src="{% static 'assets/icones/1x/Surpreenda-me - inativo.png' %}"> Logout
       </a>
       <a href="{% url 'nova_imagem' %}" class="{% if request.path == '/nova_imagem/' %}ativa{% endif %}">
           <img src="{% static 'assets/icones/1x/Surpreenda-me - inativo.png' %}"> Nova Imagem
       </a>
   </nav>
   

2. Estilizando a classe 'ativa' no CSS: agora, vamos adicionar estilos para a classe 'ativa' no seu CSS. Isso pode incluir a mudança de cor do texto e a troca da imagem.

   .menu-lateral__navegacao a.ativa {
       color: #ff0000; /* Altere para a cor que desejar */
   }
   
   .menu-lateral__navegacao a.ativa img {
       content: url('/static/assets/icones/1x/Home - ativo.png'); /* Altere para a imagem ativa correspondente */
   }
   

3. Ajustando as imagens: você mencionou que tem imagens diferentes para os estados ativo e inativo. Certifique-se de que as URLs das imagens no CSS estejam corretas e que as imagens estejam no diretório correto.

   Aqui está um exemplo de como ficaria o menu.html e o CSS:

   <nav class="menu-lateral__navegacao">
       <a href="{% url 'index' %}" class="{% if request.path == '/' %}ativa{% endif %}">
           <img src="{% static 'assets/icones/1x/Home - inativo.png' %}"> Home
       </a>
       <a href="{% url 'login' %}" class="{% if request.path == '/login/' %}ativa{% endif %}">
           <img src="{% static 'assets/icones/1x/Mais vistas - inativo.png' %}"> Login
       </a>
       <a href="{% url 'cadastro' %}" class="{% if request.path == '/cadastro/' %}ativa{% endif %}">
           <img src="{% static 'assets/icones/1x/Novas - inativo.png' %}"> Cadastro
       </a>
       <a href="{% url 'logout' %}" class="{% if request.path == '/logout/' %}ativa{% endif %}">
           <img src="{% static 'assets/icones/1x/Surpreenda-me - inativo.png' %}"> Logout
       </a>
       <a href="{% url 'nova_imagem' %}" class="{% if request.path == '/nova_imagem/' %}ativa{% endif %}">
           <img src="{% static 'assets/icones/1x/Surpreenda-me - inativo.png' %}"> Nova Imagem
       </a>
   </nav>
   

   .menu-lateral__navegacao a.ativa {
       color: #ff0000; /* Altere para a cor que desejar */
   }
   
   .menu-lateral__navegacao a.ativa img {
       content: url('/static/assets/icones/1x/Home - ativo.png'); /* Altere para a imagem ativa correspondente */
   }
   

Deixo como observação que as sugestões que trouxe podem apresentar algumas diferenças caso adicione diretamente no seu código, então, recomendo que analise corretamente cada parte e verifique se a algum ponto que apresentará problemas no seu projeto.

No mais, espero ter ajudado e bons estudos!