In my Laravel project, I am attempting to create an active class for a link tag, but the class is not affecting the link. Below is the code snippet from my blade file:
<li class="{{ (request()->is('categories*')) ? 'side-active' : '' }}">
<a href="categories" >
<i class='bx bx-circle'></i>
<span class="links_name ">Kategori Produk</span>
</a>
<span class="tooltip">Kategori Produk</span>
</li>
Additionally, here is the CSS that I am using:
.side-active {
color: #009DA9 !important;
border-left: 2px solid #009DA9;
}
The output currently looks like this: https://i.sstatic.net/8hZ5p.png
However, when I place the class inside the span or i tag, it changes the font color as shown in the following code snippet:
<li class="">
<a href="categories" >
<i class='bx bx-circle {{ (request()->is('categories*')) ? 'side-active' : '' }}'></i>
<span class="links_name {{ (request()->is('categories*')) ? 'side-active' : '' }}">Kategori Produk</span>
</a>
<span class="tooltip">Kategori Produk</span>
</li>
This results in a different appearance as seen here: https://i.sstatic.net/dQf7D.png
My desired outcome is to have it look like this: https://i.sstatic.net/4lncM.png