cloudSampleSolution - how to show/hide nav items

Questions
1

In the Servoy cloudSampleSolution I would like to change the below mainNavMenu loadMenuItems method so each navigation item will have a checkbox on its left. How can I do this?

function loadMenuItems() {
	/** @type {CustomType<servoyextra-sidenav.MenuItem>} */
	var menuItem;
	var menuItems = [];
	var menuSubItem;
	var menuSubItems = [];

	// HOME
	menuItem = new Object();
	menuItem.id = "homeDashboard";
	menuItem.text = "DASHBOARD"
	menuItem.iconStyleClass = "fa fa-th-large";
	menuItems.push(menuItem);

	// CUSTOMERS
	menuItem = new Object();
	menuItem.id = "customersTableView";
	menuItem.text = "CUSTOMERS"
	menuItem.iconStyleClass = "icon-contacts";
	menuItems.push(menuItem);

My end goal is to have a toggle button at the top of the nav list, that will allow users to hide or show table names based on whether they are checked. All suggestions are welcome.

Dean Westover
Choices Software, Inc.

2

Hi Dean,

What you describe is not directly possible with the sidenav component. It represents a simple view of menu items which can be nested and are clickable.
You can defintely show a checkbox icon, i.e.

menuItem.iconStyleClass = "fa fa-check";

But that is just decorating th emenu item and is not separately clickable from the item itself.
For this, you would need a custom component.

Best,
Sean