I have this side bar menu using nebular :
sidebarMenuItems: [
{
icon: "home-outline",
title: "Home",
link: "/app/home",
},
{
icon: "attach-2-outline",
title: "Documents",
children: [
{
title: "Requests",
link:
"/app/documents-management/" +
DocumentsOperationEnum.REQUESTS.toLowerCase(),
},
{
title: "History",
link:
"/app/documents-management/" +
DocumentsOperationEnum.HISTORY.toLowerCase(),
}
]
}
]
when I click the home item the background color changes thanks to this code :
a.active {
height: 40px;
padding: 12px 26px !important;
background: linear-gradient(90deg, #038C81 35%, var(--text-primary-color)100%);
.menu-icon {
margin: 0px !important;
width: 24px;
height: 24px;
font-size: 24px;
vertical-align: middle;
color: aliceblue;
}
.menu-title {
margin-left: 20px;
color: aliceblue;
background: linear-gradient(90deg, #038C81 35%, var(--text-primary-color)100%);
}
}
However this change only happens to the home, request and history items. The document item's color doesn't change since it's a toggle one. I want the document item's color to change too when clicked. any way to help me do that ??