I have designed a blade with a signboard containing multiple columns, each displaying its name, color, and assigned cards (screenshot). To enable sorting of these cards, I added an icon next to each column title. My goal is to allow users to select sorting options by clicking on the sort-icon.
I attempted to implement this functionality by including a hidden select element and using .selectpicker('toggle') to toggle it upon clicking the icon, but unfortunately, this approach did not work as expected.
The foreach loop below showcases the code, where $statuses represents the values for the columns obtained from the controller.
<div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
<div class="row">
<div class="col-10">
<h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
<span class="small material-icons" style="display: inline">sort</span>
</div>
<div class="col-2">
<small class="totalCandidates mt-0 float-right"></small>
</div>
</div>
</div>
In summary, my query is whether there is a way to utilize an icon instead of a traditional select box to display sortable options?
Your assistance or suggestions are highly appreciated. Should this be impossible, kindly let me know so that I can explore alternative solutions.
Many thanks in advance!
EDIT
Following the advice from Bernhard Beatus's answer, I have updated my card header:
<div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
<div class="row">
<div class="col-10">
<ul class="nav nav-pills">
<h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
<li class="nav-item dropdown pl-1">
<a data-toggle="dropdown" href="#"><span class="small material-icons">sort</span></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Name</a>
<a class="dropdown-item" href="#">Status</a>
<a class="dropdown-item" href="#">Position</a>
<a class="dropdown-item" href="#">Creation date</a>
</div>
</li>
</ul>
</div>
<div class="col-2">
<small class="totalCandidates mt-0 float-right"></small>
</div>
</div>
</div>
This modification now displays a dropdown menu instead of a select box, which will suffice for the time being.