Javascript

let ref = location.href.split("/").pop()

// wait until DOM loaded
window.addEventListener("DOMContentLoaded", init())
function init() {
    if (ref === "") {
        location.href = "home"
    }
    select()
}

//select menu item
function select() {
    let main = document.querySelectorAll('#mainlist li');
    let sub = document.querySelectorAll('#sublist li');

    // Remove the 'selected' class from all main and sub menu items
    main.forEach(item => item.classList.remove('selected'));
    sub.forEach(item => item.classList.remove('selected'));

    // Get the last part of the current URL
    let sub_id = "sub_" + location.href.split("/").pop(); //unique id so they don't interfere with main menu id

    if (sub_id) {
        let item = document.querySelector(`#${sub_id}`);
        if (sub_id) {
            item?.classList.add('selected');
        }
    }

    //get correspondent main menu from page body dataset
    let main_id = document.body.dataset.main

    // Add the 'selected' class to the corresponding main menu item
    if (main_id) {
        let item = document.querySelector(`#${main_id}`);
        if (item) {
            item?.classList.add('selected');
        }
    }
}