Page 1 of 1
Customising the hamburger menu
Posted: Sat Jun 01, 2024 5:50 am
by 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
Re: Customising the hamburger menu
Posted: Mon Jun 03, 2024 9:29 am
by 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)
}