CSS .active updates in JS

[alasdairs]

Hiya,
I'm relatively new to servoy and javascript and am wondering whether anyone has experience with CSS/less. I've recently been working on a project and am wondering how to update the style of an element using CSS without using the properties.less. It's for a sidenav, and every time I figure out a potential solution theres another issue with the program.
I think I need to remove all 'active' classes from all the elements of the nav, and add an active class to the one that has just been clicked but I just can't figure out how to do it.

Here is my CSS at the moment:

Code: Select all

.menu-item,
.menu-item:after,
.menu-item:before {
    transition: all .5s;
}

/* Hover Effect */
.menu-item:hover {
    color: #FFF; /* Change the color on hover */
    background: #464646;
}

/* Active Item Styling */
.menu-item.active {
    background: #363636;
}

/* Underline Stroke for Menu Items */
.menu-item {
    position: relative;
}

.menu-item:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%; /* Initial width of the underline */
    content: ".";
    color: transparent;
    background: #FFF;
    height: 1px;
}

.menu-item:hover:after {
    width: 100%; /* Underline expands on hover */
}

.menu-item.active:after {
    width: 100%; /* Underline is meant to remain full for active items */
}

Thanks!

[alasdairs]

Nevermind, just figured out how it's done.

[rafig]

Nevermind, just figured out how it's done.

Might be useful to post what you figured out

[alasdairs]

Yeah sorry, have done a lot of modification since. Now my navigator extends the svyNavigationUX$Sidenav form and I've overwritten the 'onMenuItemSelected(menuItemId, event)' method from that.
Here is the code:

Code: Select all

function onMenuItemSelected(menuItemId, event) {
   currentMenuItem = menuItemId;
   
   var menuItems = loadMenuItems();
   
   function updateMenuItems(items) {
       for (var i = 0; i < items.length; i++) {
           if (items[i].id === menuItemId) {
               items[i].styleClass = "menu-item active";
           } else {
               items[i].styleClass = "menu-item";
           }
           if (items[i].menuItems && items[i].menuItems.length > 0) {
                updateMenuItems(items[i].menuItems);
            }
       }
   }
    updateMenuItems(menuItems);
    elements.sidenav.setRootMenuItems(menuItems);
   
   
    updateSidenav(menuItemId);
}

Then just set .active css for the .menu-items
Not sure whether this is a good solution, I just rewrote it from one of my older projects in react.