Navigation with "tabbed" children elements?

[DonUD]

Product: PowerShell Universal
Version: 1.5.15

Dear All

Is it possible to create a Navigation Manu with “tabbed” children similar to the PSU admin console?
I show you what I mean…
The admin console navigation looks like that as you know:

…and this is exactly what I would like to achieve…

This is what a Navigation could potentially look like as of now. I managed to get a better visualization using smaller icons but it’s not exactly what I want.

As you can see everything is alligned to the left and it’s not tabbed like the admin console. In addition even the text has the same size like the main navigation element which is not ideal in my opinion.

Can this be adjusted? Or would it be a feature request?

Thanks for the clarification and have a very good day!

Kind regards,
Don

[pharnos]

Great idea - I’m only new to getting into tweaking the CSS styles inside PSU but here’s something I’ve come up with, I like the look of it…

New-UDStyle -Style '
	div.MuiListItemIcon-root {		
   		min-width: 35px;
	}
' -Content {
	New-UDListItem -Label 'Home' -Icon (New-UDIcon -Icon flask -Size lg -Color $cache:logoDarkBlue) -OnClick {
		Invoke-UDRedirect -Url '/Home'
	}
	New-UDListItem -Label 'Test' -Icon (New-UDIcon -Icon vial -Size lg -Color $cache:logoDarkBlue) -OnClick {
		Invoke-UDRedirect -Url '/Test'
	}
	If( $Roles -contains $cache:DashboardSuperUserPSURoleName) {
		New-UDListItem -Label 'SuperUser' -Icon (New-UDIcon -Icon edit -Size lg -Color $cache:logoDarkBlue) -OnClick {
			Invoke-UDRedirect -Url '/Test'
		}
	}
	New-UDListItem -Label 'Insert Subs' -Icon (New-UDIcon -Icon edit -Size lg -Color $cache:logoDarkBlue) -OnClick {
		Invoke-UDRedirect -Url '/InsertSubs'
	}
	New-UDListItem -Label 'NSM Processing' -Icon (New-UDIcon -Icon road -Size lg -Color $cache:logoDarkBlue)  -Children {
		
		New-UDStyle -Style '
			div.MuiListItemIcon-root{		
				padding-left: 30px;
			}
		' -Content {
			New-UDListItem -SubTitle 'RuralPost & RouteSmart' -Icon (New-UDIcon -Icon caret_right -Size lg -Color $cache:logoDarkBlue) -OnClick {
				Invoke-UDRedirect -Url '/RoutesAndRounds'
			}
			New-UDListItem -SubTitle 'RouteSmart' -Icon (New-UDIcon -Icon caret_right -Size lg -Color $cache:logoDarkBlue) -OnClick {
				Invoke-UDRedirect -Url '/RouteSmart'
			}
			New-UDListItem -SubTitle 'RuralPostWRC' -Icon (New-UDIcon -Icon caret_right -Size lg -Color $cache:logoDarkBlue) -OnClick {
				Invoke-UDRedirect -Url '/RuralPostWRC'
			}
		}

	}
	New-UDListItem -Label 'Regional' -Icon (New-UDIcon -Icon road -Size lg -Color $cache:logoDarkBlue)  -Children {
		
		New-UDStyle -Style '
			div.MuiListItemIcon-root{		
				padding-left: 30px;
			}
		' -Content {
			New-UDListItem -SubTitle 'Ad hoc Roundcards' -Icon (New-UDIcon -Icon caret_right -Size lg -Color $cache:logoDarkBlue) -OnClick {
				Invoke-UDRedirect -Url '/GetRoundcards'
			}
			New-UDListItem -SubTitle 'Runner message Maintenance' -Icon (New-UDIcon -Icon caret_right -Size lg -Color $cache:logoDarkBlue) -OnClick {
				Invoke-UDRedirect -Url '/GetRoundcards'
			}
		}
		
	}
	New-UDListItem -Label 'Partner Processing' -Icon (New-UDIcon -Icon handshake -Size lg -Color $cache:logoDarkBlue) -OnClick {
		Invoke-UDRedirect -Url '/Test'
	}
	New-UDListItem -Label 'FTP Servers' -Icon (New-UDIcon -Icon exchange_alt -Size lg -Color $cache:logoDarkBlue) -OnClick {
		Invoke-UDRedirect -Url '/FTPServers'
	}
	New-UDListItem -Label 'tree' -Icon (New-UDIcon -Icon exchange_alt -Size lg -Color $cache:logoDarkBlue) -OnClick {
		Invoke-UDRedirect -Url '/Tree'
	}
}

[DonUD]

Hey pharnos!

Wow, thank you very much! Actually this is exactly what I was looking for! Thanks a lot for sharing your code!

Since you seem to well understand how CSS work, do you have an idea if it is also tweakable to insert a “guide line” like the white line in my mockup? I think it would be nice to have this visible for expanded Items, so that you see where the sub menu ends… I know, it’s nothing functional… But in my opinion it makes it nicer.

Thanks again,
Don

[rbleattler]

@DonUD

I Believe you’d do that by doing something like:

New-UDStyle -Style '
			div.MuiListItem{		
				padding-left: 30px;
				border-left-style: Solid;
				border-left-color: Gray;
			}
'

NOTE: I haven’t tested this, so I’m not exactly sure of the div class that needs to be modified, but I believe this is close

[DonUD]

Hey rbleattler!
Thanks to you as well! Indeed I think you’re very close but it doesn’t work. As you’re saying the class is probably wrong because it does nothing there.
However if, just for testing, I put your code inside the MuiListItemIcon-root, then this is the result:

So any Idea about the right class?
And btw. Is there a good documentation / website with hints on how to do such CSS modifications? Just asking, maybe somebody here knows a good source…

Thanks to all of you for the great help!

Best regards,
Don

[DonUD]

UPDATE:
I managed to get it sort of working using the class .MuiList-root.

However the line is then added at the very left part of the submenu as you can see (red border line).

I didn’t find a way to set sort of a “padding” for that border line.
Maybe somebody else has a good idea?

Thanks,
Don

[pharnos]

Heya @DonUD - try this out. Again, I’m just a noob to this so it might be really bad coding but it seems to work

For each menu “sub-section”, add this to the New-UDStyle -Style :

box-shadow: inset 28px -12px 0 0 white, inset 30px 0 0 0 red;

This in effect is adding 2 borders/solid shadows to the left; the first is white and 28px thick (with 12px from the bottom too), then the next is red and 30px thick which kinda sits below the white border shadow so appears to be a red 2px left border shadow (vertical line) that only applies to the menu “sub-section”. Just change the px values and colours to match spacing and theme.

Oh, and I found you don’t have to target the class selector in this case (when using New-UDStyle and setting the content to the children list items for the menu list), which makes it a bit cleaner - so the total CSS -Style section in the New-UDStyle is now just: {padding-left: 30px; box-shadow: inset 28px -12px 0 0 white, inset 30px 0 0 0 red;}

as below…

New-UDListItem -Label 'NSM Processing' -Icon (New-UDIcon -Icon road -Size lg -Color $cache:logoDarkBlue)  -Children {
			
		New-UDStyle -Style '
			{		
				padding-left: 30px;
				box-shadow: inset 28px -12px 0 0 white, inset 30px 0 0 0 red;
			}
		' -Content {
			New-UDListItem -SubTitle 'RuralPost & RouteSmart' -Icon (New-UDIcon -Icon caret_right -Size lg -Color $cache:logoDarkBlue) -OnClick {
				Invoke-UDRedirect -Url '/RoutesAndRounds'
			}
			New-UDListItem -SubTitle 'RouteSmart' -Icon (New-UDIcon -Icon caret_right -Size lg -Color $cache:logoDarkBlue) -OnClick {
				Invoke-UDRedirect -Url '/RouteSmart'
			}
			New-UDListItem -SubTitle 'RuralPostWRC' -Icon (New-UDIcon -Icon caret_right -Size lg -Color $cache:logoDarkBlue) -OnClick {
				Invoke-UDRedirect -Url '/RuralPostWRC'
			}
		}

	}
	New-UDListItem -Label 'Regi...

Cheers,
Steve.

[DonUD]

Hey Steve!

First of all, a big THANK YOU for supporting me with this customization thing.
And sorry for not coming back with feedback earlier but I had a busy work day yesterday and it was not possible to test earlier…

Indeed it does work as you said… BUT…
…if you have a dark theme like us then unfortunately it “breaks” it a little bit. I show you what I mean:

Now we should find a way to somehow apply a different UDStyle based on the active theme…
I haven’t played around with this thing yet… therefore I don’t know if there is a variable or so that holds the current theme but this would certainly make it to work with an “if / else”.
…or probably the most clean solution would be if the CSS can handle it directly… but as said CSS is all new for me…

Thanks again and wish you and everybody else reading this post a wonderful weekend!

Kind regards,
Don

[pharnos]

Easy fix, don’t use dark mode

Is there a default variable that can be referenced to tell if the site is currently in dark mode or not? Then you could just adjust the inset border shadow’s colours to suit, ya know like:

if ($env:darkmode) {
    $childMenuInsetBorderColour1 = DarkGray
} else {
    $childMenuInsetBorderColour1 = White
}

(I have no idea if such a variable exists though, I’m just making up $env:darkmode)

[DonUD]

OK I tried to search for a possibility to check for the theme and i think there’s no such variable. At lest I haven’t found anythin regarding that.

What I whink is probably the way to implement it in a clean way is to use the Material UI theming options:

Default Theme - Material-UI

However I haven’t found a way on how to include the padding and box-shadow yet, since the syntax seems to be slightly different.
Maybe I’m totaly wrong and you have to work with CSS in any case… And if that’s the final answer then I don’t see how to achieve this styling with both light and dark modes if there’s no possibility to check for the current used setting…?

Cheers,
Don