Style to currently selected page in navigation menu

[kgamble]

I am not sure this is possible, but I figured I would ask in public so anyone else could answer, but my guess is that if anyone knows it will be @victordcq lol

Is it possible to create a style that bases itself off of the current URL in some way? I know through some googling there used to be an @document selector in CSS that would enable you to make style classes based off the document title. However it doesn't seem that's still there anymore.

I am trying to automatically apply a style class to a menu item if you are on its target page.

A few other solutions that don't solve the problem today, but could in the longer term:

1. A binding on the page url, that climbs the menu trees items and updates it that way, but that feels like a hacky workaround not a clean solution.
2. A feature request to add something like an "on target" style property to each menu item

I appreciate any ideas!

[kgamble]

Incase there isn't a clean CSS solution (which would be ideal), here is a solution #1

Done on a custom property on the menu itself:

Expression Structure Binding:

The code on the transform:

def searchChildItems(item):
	containsTarget = False
	if item.get('target') == value.pagePath:
		item['style']["classes"] = "mySelectedPageStyleClass"
		containsTarget = True
	else:
		item['style']["classes"] = ""
	
	for childItem in item.get('items'):
		childContains = searchChildItems(childItem)
		if childContains:
			item['style']["classes"] = "myParentToSelectedPageStyleClass"
			containsTarget = childContains
		else:
			item['style']["classes"] = ""
	
	return containsTarget
	
for item in self.props.items:
		searchChildItems(item)
	
return value

[nminchin]

I just create a binding on each tab style it's a bit crap cause every time you move a tab around or delete them you have to rebind most of them as the index changes.........

[kgamble]

Yeah I am trying to avoid this, as its a super-pain

[nminchin]

Yeah... Its a pain for all bindings on arrays bindings should move with the index they're bound to, I have a feautr request already

[WillMT10]

I went a similar route but used an event instead of a transform and also incorporated recursion so that there could be a variable depth of child items in the menu:

[Perspective] Highlight current view in Menu Bar

I don’t have this in a production system yet, but wanted to throw it out there in case it helps anyone. Instead of binding to every item in the Horizontal Menu and Menu Tree, I wrote a couple scripts that rely on the menu onItemClicked event and the event.path property within that event. The event.path is a list of item indexes that leads to the selected item. First I created a custom session property for holding the current selected path (this is my main menu, so it’s always visible and it c…

[kgamble]

@WillMT10

incorporated recursion so that there could be a variable depth of child items in the menu:

Probably wasn't clear in initial post, but that was expected to be a recursive transform just like your project function. Yours is better documented though!

[WillMT10]

Oh, you're right. Missed that!

[victordcq]

You could kinda use :target selector i suppose, and give your button an id
But i'm not sure if you can modify enough stuff in perspective to make that work

edit: yeah its not working great

[pascal.fragnoud]

@kgamble

I am trying to automatically apply a style class to a menu item if you are on its target page.

I went a somewhat different route to achieve that, but it might be due to some design choices.
Every time navigate is called, I also send a message called page_changed. I need this to update docks (no alterDock function available at the time).
The menu also catches this message and stores in a custom property what page (sent in the payload) is currently displayed. Every item in the menu can then use that to switch its style class.

[nminchin]

Instead of on navigate, could you out this on an on change event on the session prop that store the page id? This would be more robust in terms of always catching a change of page

[pascal.fragnoud]

It also makes sending some of my payloads more difficult.
I was also trying to stay out of session props.

I'll take a look though, maybe I can figure something out with this.