Customising the hamburger menu

[nickrth]

Hi there,
I was wondering if there might be a way to add more items into the main Hamburger menu, to jump straight to forms I've created. So that my users have a way of getting from any screen to any screen.
Basically I want to list the screens in here, with a link direct to the right form ID.
Keen for any advice.
Thanks.

Screenshot 2024-06-01 at 1.46.30 PM.png

[kev1n]

Hi,

The latest Github commit includes a function named nuOnOptionsListLoadedGlobal().
When declared in Setup->Header, this function is called once when the options list is displayed, allowing you to add additional options as needed.

2024-06-03_093134.png

Example:

Code: Select all

function addOptionItem(title, iconClass, action) {
    const optionsListBox = document.getElementById('nuOptionsListBox');

    // Calculate new item's top position
    const currentItems = optionsListBox.querySelectorAll('.nuOptionList, .nuOptionsItem-divider');
    const id = currentItems.length;
    const lastItem = currentItems[currentItems.length - 1];
    const lastItemTop = parseInt(lastItem.style.top);
    const newItemTop = lastItemTop + 20;

    if (title === '') {
        // Create new divider element
        const newDivider = document.createElement('hr');
        newDivider.className = 'nuOptionsItem-divider';
        newDivider.style.cssText = `position: absolute; text-align: left; height: 0px; top: ${newItemTop - 4}px; left: 0px; width: 202px;`;

        // Append new divider to the options list box
        optionsListBox.appendChild(newDivider);
    } else {
        // Create new icon element
        const newIcon = document.createElement('i');
        newIcon.id = `nuOptionList${id}`;
        newIcon.className = `fa ${iconClass} nuOptionList`;
        newIcon.style.cssText = `position: absolute; text-align: left; width: 15px; height: 15px; top: ${newItemTop}px; left: 9px;`;

        // Create new text element
        const newText = document.createElement('div');
        newText.id = `nuOptionText${id}`;
        newText.className = 'nuOptionsItem';
        newText.setAttribute('onclick', action);
        newText.setAttribute('data-nu-option-title', title);
        newText.style.cssText = `position: absolute; text-align: left; height: 15px; top: ${newItemTop - 4}px; left: 30px; width: 133px; padding: 3px;`;
        newText.innerText = title;

        // Append new elements to the options list box
        optionsListBox.appendChild(newIcon);
        optionsListBox.appendChild(newText);
    }

    // Increase height of the options list box
    const currentHeight = parseInt(optionsListBox.style.height);
    const newHeight = currentHeight + 20;
    optionsListBox.style.height = `${newHeight}px`;
}

function nuOnOptionsListLoadedGlobal() {
    // add a new delimiter
    addOptionItem('');
    // add a new option
    addOptionItem('Open Form', 'fa-caret-right', "nuForm('nutranslate', '', '', '', '0');"); // replace 'nutranslate' with a form Id (e.g. 6ac594150f25e50)
}