JSFiddle - React, Tailwind, and code Playground
HTML
<div id="SideNav">
<div id="Headerhome"><div id="Site-icon-1"></div> Dashboard</div>
<div id="HeaderSites"><div id="Site-icon-2" class = "SiteIconHover"></div>Clients</div>
<div id="HeaderApps"><div id="Site-icon-3"></div>Apps</div>
</div>
CSS
#Site-icon-1 {
background-color:#000;
width:25px;
height:25px;
float:left;
margin-right:15px;
margin-top:12px;
margin-left:5px;
}
.SiteIconHover {
background-color:#00a9ff !important;
width: 25px;
height: 25px;
float: left;
margin-right: 15px;
margin-top: 12px;
margin-left: 5px;}
#Site-icon-2 {
background-color:#000;
width: 25px;
height: 25px;
float: left;
margin-right: 15px;
margin-top: 12px;
margin-left: 5px;
}
#Site-icon-2.SiteIconHover2 {
background-color:#00a9ff;
width: 25px;
height: 25px;
float: left;
margin-right: 15px;
margin-top: 12px;
margin-left: 5px;}
#Site-icon-3 {
background-color:#000;
width: 25px;
height: 25px;
float: left;
margin-right: 15px;
margin-top: 12px;
margin-left: 5px;
}
#Site-icon-3.SiteIconHover3 {
background-color:#00a9ff;
width: 25px;
height: 25px;
float: left;
margin-right: 15px;
margin-top: 12px;
margin-left: 5px;}
#Headerhome, #HeaderSites, #HeaderApps {
background: #254661;
font-weight: normal;
color: #eeeeee;
box-sizing: border-box;
outline: 0;
line-height:50px;
text-decoration: none;
font-size: 100%;
list-style: none;
width:240px;
height:50px;
display: block;
cursor: pointer;
margin-top: 2px;
margin-left:-20px;
margin-right:0px;
padding-left:20px;
font-family:'Segoe UI';
}
.menuSelected {
border-left: 3px solid #26b3f7;
background: #18374f;
}
JavaScript
function selectMenu(toSelect) {
toSelect.addClass('menuSelected').siblings().removeClass('menuSelected');
toSelect.children().addClass('SiteIconHover');
toSelect.siblings().children().removeClass('SiteIconHover');
}
selectMenu($("#Headerhome"));
$("#SideNav").on('click', function(event) {
selectMenu($(event.target));
event.stopPropagation();
});