You have the option to assign an additional class to each <i> tag and then reference it in CSS using the li:hover selector. (I've labeled it as icon)
<div class="wrapper">
<div class="sidebar">
<ul class="side">
<li><a href="#"> <i class="bi bi-columns-gap fa-lg icon-red icon"></i></a>Dashboard</li> <!-- Additional class 'icon'-->
<li><a href="#"> <i class="bi bi-graph-up-arrow icon"></i> </a>Reporting</li>
<li><a href="#"> <i class="bi bi-send-check icon"></i> </a>Sending</li>
<li><a href="#"> <i class="bi bi-envelope icon"></i> </a>Receiving</li>
<li><a href="#"> <i class="bi bi-person-check icon"></i> </a>Verification</li>
</ul>
</div>
</div>
/*Referencing the class 'icon' with 'li:hover'*/
.wrapper .sidebar ul li:hover, li:hover .icon{
background-color: #064E88;
color: white;
}
li:hover .icon as a whole targets the element with the class 'icon' inside the hovered 'li' tag.
It is important to separate it with 'li:hover' so that the effect is applied to both the hovered li and <i> tag.
To modify the properties of an element when clicked (or when the tab is selected), simply assign the 'active' class to the selected tab. This class will be removed from the current tab and assigned to another tab when it is clicked.
let tabContainer = document.getElementsByClassName("side")[0]; //This container holds all the tab items.
let tabPane = tabContainer.getElementsByTagName("li"); //Returns a list of all elements with tag name 'li' inside the container, representing all the tab items.
for (let i = 0; i < tabPane.length; i++) {
//Add an event listener to each tab item to execute a function when clicked.
//Note: Inside the function, tabsPane[i] refers to the clicked tab item.
tabPane[i].addEventListener("click", function() {
tabContainer.getElementsByClassName("active")[0].classList.remove("active"); //Remove the 'active' class from the current selected tab.
tabPane[i].classList.add("active"); //Assign the 'active' class to the clicked tab item.
});
};
.wrapper {
display: flex;
position: relative;
}
.wrapper .sidebar{
position: fixed;
width: 200px;
background-color: #00B6E1;
/* padding: 30px 0; */
height: 100%;
}
.wrapper .sidebar ul li{
padding: 15px;
border-bottom: 1px solid #064E88;
/* border-top: 1px solid; */
/* color: white; */
font-weight: 400;
}
.wrapper .sidebar ul li a {padding: 10px;}
/*Referencing the class 'icon' with 'li:hover'*/
.wrapper .sidebar ul li:hover, li:hover .icon{
background-color: #064E88;
color: white;
}
/*Separate properties of the active or selected tab*/
.active {
background-color: cyan;
}
<div class="wrapper">
<div class="sidebar">
<ul class="side">
<!--Default active tab-->
<li class="active"><a href="#"> <i class="bi bi-columns-gap fa-lg icon-red icon"></i></a>Dashboard</li> <!-- Additional class 'icon'-->
<li><a href="#"> <i class="bi bi-graph-up-arrow icon"></i> </a>Reporting</li>
<li><a href="#"> <i class="bi bi-send-check icon"></i> </a>Sending</li>
<li><a href="#"> <i class="bi bi-envelope icon"></i> </a>Receiving</li>
<li><a href="#"> <i class="bi bi-person-check icon"></i> </a>Verification</li>
</ul>
</div>
</div>