Menu auto highlight not working when using Menu plugin with URLParam

#1

Hello,

I have an issue when using Menu plugin with URLParam plugin.

In my app, I can create multiples Kanbans and I have a sidebar like this :

let sidebar = {
			cols:[
				{
					view: "sidebar",
					id:"sidebar",
					template:function(obj, common){
						if (common.collapsed)
							return module.badge(common, obj) + common.icon(obj, common);
						return module.badge(common, obj) + common.arrow(obj, common)+common.icon(obj, common) +"<span>"+obj.value+"</span>";
					},
					data: menuDatas,
				},
				{ $subview:true}
			]};

And menuDatas :

{
	"1": {
		"value": "Kanbans",
		"icon": "mdi mdi-format-list-checks",
		"data": [
			{
				"value": "Type of Kanbans 1 ",
				"data": [
					{
						"value": "Kanban 2",
						"id": "kanban/2",
						"badge": 1,
						"icon": "wxi-columns"
					}
				],
				"badge": 1
			},
			{
				"value": "Kanban 1",
				"id": "kanban/1",
				"badge": 1,
				"icon": "wxi-columns"
			},
			{
				"value": "Kanban 4",
				"id": "kanban/4",
				"badge": 0,
				"icon": "wxi-columns"
			}
		],
		"badge": 2
	}
}

In my kanban view, I use the UrlParam plugin :

	init(_$view, _$) {
		super.init(_$view, _$);
		this.use(plugins.UrlParam, ["id"]);
	}

Everythink works fine if I click on the menu. However, if I change the url manually, the menu doesn’t highlights the corresponding item.

Looking in the JetApp code, I see that the Menu plugin use the segment :

  const segment = frame.getUrl()[1];
            if (segment) {
                name = segment.page;
            }

with frame.getUrl() returning :

Array(3) [ {…}, {…}, {…} ]
​
0: Object { page: "top", params: {}, isNew: false, … }
​
1: Object { page: "kanban", params: {}, isNew: false, … }
​
2: Object { page: "2", params: {}, isNew: true }
​

Then the name is only “kanban” without the Id and the sidebar cannot find the correct item.

I will code a custom menu plugin to overcome this problem. But maybe I’m missing a cleaner way to achieve my goal. Does anyone have an idea ?

#2

In my custom menu plugin, I changed this part

 view.on(app, `app:route`, function () {
        let name = "";
        if (config.param) {
            name = view.getParam(config.param, true);
        }
        else {
            const segment = frame.getUrl()[1];
            if (segment) {
                name = segment.page;
            }
        }
        if (name) {
            silent = true;
            if (ui.setValue && ui.getValue() !== name) {
                ui.setValue(name);
            }
            else if (ui.select && ui.exists(name) && ui.getSelectedId() !== name) {
                ui.select(name);
            }
            silent = false;
        }
    });

from the JetApp Menu plugin by :

	view.on(app, "app:route", function () {
			let name = "";
			if (config.param) {
				name = view.getParam(config.param, true);
			}
			else {
				for (let i = 1; i < frame.getUrl().length; i++) {
					let segment = frame.getUrl()[i];
					name = name + ((name === "") ? "" : "/" )+ segment.page;
				}
			}
		
			if (name) {
				silent = true;
				if (ui.setValue && ui.getValue() !== name) {
					ui.setValue(name);
				}
				else if (ui.select && ui.exists(name) && ui.getSelectedId() !== name) {
					ui.select(name);
					
					//to open the parent
					if(ui.getItem(name).$parent) {
						ui.open(ui.getItem(name).$parent);
					}
				}
				silent = false;
			}
		})

It’s work fine.