How can I simplify the code for a Mega Menu in Wix to populate categories filtered by buttons from one Main Menu?

I need help with a Wix website that I've been working on for some time now. I've spent the last few days trying to get an expandable Mega Menu to work on my site and I have it down to almost what I need, but I'm stuck and it's currently in a deal breaker state.

I have 4 content manager databases with all the information I need to populate my mega menu.

The first database is mainMenu and populates the buttons along the top of my website. Clicking on these buttons opens up a submenu for each category.

The second database is called subMenu, and opens as a separate menu with the subcategories names, filtered by the mainMenu button clicked. Clicking on a submenu button is what opens up the Mega Menu.

The third database is productsMenu and populates all the product categories that show up on the Mega Menu, filtered according to what subMenu button was clicked.

The fourth database is newMenu and only populates the images and text on the right hand side of the megamenu (this is more clearly shown in the screenshots below).

TL;DR: My Mega Menu currently works like this:

Click on the main menu button -> filtered sub menu expands -> click on sub menu button -> filtered mega menu expands.

What I actually want to do is:

Click on main menu item -> filtered mega menu expands, with specific data for that main menu category, using the submenu titles as headers for different columns.

I'm a total newbie and whenever I think of a possible solution I end up breaking the code.

Here's a link to where I got the original idea for it in case more background information is necessary: Mega Menu for Velo/Wix I tweaked this to fit my needs a bit more, until I got stuck at my current state.

This is what my site currently does. I clicked on CLOTHING and then WOMEN'S to get that megamenu to show up

This is what I would like this code to do. I want to click on CLOTHING and then have the different subcategories (from subMenu database) as column titles, and the specific categories to show up (from the productsMenu database).

This is my page code:

import { getMenus } from 'backend/data.jsw';

// ID: 5119D613F3A02481B7F825C8A883DE93

let menusData, repeaters;

let selectionState = {
    currMain: null,
    currSub: null,
};

const colors = {
    mainUnselected: 'white',
    subUnselected: 'black',
    selected: 'red'
}

$w.onReady(async function () {
    await iniPage();
});

async function iniPage() {
    try {
        const menus = await getMenus();
        repeaters = menus.menusNames.map(id => ({ menuId: id, repeaterSelector: $w('#' + id + 'Repeater') }));
        menusData = menus.menusData;
        $w('#mainMenuRepeater').data = menusData.mainMenu;
        connectDataToRepeatersItems();
        selectMenu('mainMenu');
    } catch (err) {
        console.error('error ', err);
    }
}

function connectDataToRepeatersItems() {

    repeaters.forEach(({ menuId, repeaterSelector }) => {
        repeaterSelector.onItemReady(($item, itemData) => {
            const $itemBtn = $item('#' + menuId + 'Button');
            if (itemData.name) $itemBtn.label = itemData.name;
            if (itemData.image) $item('#' + menuId + 'Image').src = itemData.image;
            if (itemData.link) $itemBtn.link = itemData.link;
            else $itemBtn.onClick(() => {
                resetColorForPrevSelection(menuId);
                if (menuId === 'mainMenu') {
                    selectionState.currMain = $itemBtn;
                    selectionState.currSub = null;
                } else {
                    selectionState.currSub = $itemBtn;
                }
                $itemBtn.style.color = colors.selected;
                selectMenu(menuId, itemData._id)
            });
        });
    });
}

function resetColorForPrevSelection(menuId) {
    if (menuId === 'mainMenu' && selectionState.currMain) {
        selectionState.currMain.style.color = colors.mainUnselected;
    } else if (selectionState.currSub) {
        selectionState.currSub.style.color = colors.subUnselected;
    }
}

function selectMenu(menu, clickedElementId) {
    let nestedMenus;
    if (menu === 'mainMenu') {
        nestedMenus = ['subMenu'];
        $w('#megaMenuStrip').collapse();
    } else if (menu === 'subMenu') {
        nestedMenus = ['productMenu', 'rangeMenu', 'newMenu'];
        $w('#megaMenuStrip').expand();
    }
    nestedMenus.forEach(nestedMenu => {
        $w('#' + nestedMenu + 'Repeater').data = filterRepeaterData(menu, nestedMenu, clickedElementId);
    });
}

function filterRepeaterData(clickedMenu, nestedMenu, elementId) {
    return menusData[nestedMenu].filter(item => item[clickedMenu] === elementId);
}

FYI: I also have a backend data.jsw defining the menu names to then use this data in a generic way across the rest of the site's code, and fetching the data for the menus from my stored database collections, to run on client side.

The code for data.jsw is this:

import wixData from 'wix-data';

const menusNames = ['mainMenu', 'subMenu', 'productMenu', 'newMenu'];

export async function getMenus() {

    const collectionsNames = menusNames;
    const promises = [];

    collectionsNames.forEach(collection => {
        promises.push(wixData.query(collection).find());
    });

    const resolvedData = await Promise.all(promises);
    const menusData = {
        'mainMenu': resolvedData[0].items,
        'subMenu': resolvedData[1].items,
        'productMenu': resolvedData[2].items,
        'newMenu': resolvedData[3].items
    };
    return {
        menusNames,
        menusData
    };
}