AppBar / Drawer, Show-UDToast icon

Hi, I have a couple of different things to ask about, I don’t know if these should be different topics or not, if so, please let me know.

First, I am trying to add a permanent AppBar / Drawer to my dashboard.
I tried with using the Drawer, and -Navigation $Navigation -NavigationLayout permanent, which adds the bar like I want.
When I then tried to exclude different items in the bar based on $Roles, it doesn’t work, as $Roles seems to be populated first after New-UDPage has run.
I then switched to AppBar, which works with $Roles, but I can not make it permanent, without it creating a new header.
Is there some way to work with $Roles when using -Navigation $Navigation -NavigationLayout permanent, or is there some way to make the AppBar permanent?

Some example code:
Appbar:

function New-AppBar {
    param($Title)
    $Drawer = New-UDDrawer -Children {
        New-UDList -Children {
            New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect "/" }
            if ($Roles -eq "Reader") {
                New-UDListItem -Label "User" -OnClick { Invoke-UDRedirect "/User" }
            }
        }
    }
    New-UDAppBar -Position fixed -Children { 
        New-UDTypography -Text $Title -Variant h6
    } -Drawer $Drawer
}
New-UDPage -Name "Test" -Url "/User" -Role "Reader" -Content {
    New-AppBar -Title "User"
}

Drawer:

$Navigation = @(
    New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect "/" }
    if ($Roles -eq "Reader") {
        New-UDListItem -Label "User" -OnClick { Invoke-UDRedirect "/User" }
    }
)
New-UDPage -Name "Test" -Url "/User" -Role "Reader" -Navigation $Navigation -NavigationLayout permanent -Content {
}

Secondly I am wondering if “-Icon” is broken for Show-UDToast?
I can not make any icon visible, neither with just
Show-UDToast -Icon "ad"
nor
Show-UDToast -Icon (New-UDIcon -Icon "ad")

Product: PowerShell Universal
Version: 1.4.6
Dashboard Framework: 3.1.6

When I then tried to exclude different items in the bar based on $Roles , it doesn’t work, as $Roles seems to be populated first after New-UDPage has run.

We need to fix this. It shouldn’t work that way. I’ll take a look at what we can do there. The problem is we have to adjust the page to make a permanent bar so adding it using the New-AppBar method isn’t going to work.

Secondly I am wondering if “-Icon” is broken for Show-UDToast?

Unfortunately, this looks like a bug as well. I’ll get both of these added to our backlog to be resolved.

Ah, then I wasn’t crazy.
Thanks for your answer @adam!

1 Like

Hi @adam

Im starting my conversion to v3 and a little stuck here… It appears to customise the top nav bar you need to use New-AppBar command and add content in (images etc), this runs from inside the New-UdPage which causes issues as i cannot find a way to then fix the drawer (side nav) and stop it going to a hamburger. If i use the drawer inside the dashboard code, then at the end of New-UdPage add ‘-NavigationLayout permanent -Navigation $Navigation’ i have a fixed bar, but i cannot customise the Appbar anymore…

I tried playing with CSS, but adding z-index 9999 to the appbar inside the page, but i guess this doesnt work as the main appbar from the dashboard is also set to 9999.

  1. Is there a way to make the side nav permanent, but also allow the top bar to be customised with icons and images etc?
  2. Is there a way to use the New-UdDashboard -Stylesheets to do this? i cant seem to find any documentation on this -stylesheets parameter and what i do add to that is not working.

I did also try this thread: Pinning the App Bar , this did allow me to have a fixed bar with custom navbar, but the formatting is all over the place, even when using UdContainer.

Thanks.

Hi @neo this may or maynot be of use to you, but I did just release this:-


If you scroll near the bottom you will see a Navbar I created, this in theory should be able to hold anything in it. I hope this can be of some help?

I also worked out the CSS stuff, so now i have a way to do this, actually fairly easily but @psDevUK your plugin is a huge enhancement on my current method, I honestly dont think your timing could be better here! I will certainly give that a go!

1 Like

Hi @neo glad to hear this component will come into use for you :slight_smile: if you adjust the -BottomBoundary parameter this should prevent it from being sticky, so will not scroll with the page. As I added a -Content parameter you should be able to basically stick anything inside this navbar. I just tested with my badgelink component as I wanted to emulate the newer UD3+ navbar with fanicier links and badges in it.
On my blog I just wanted to demo the proof of concept that this does work, I am still yet to implement this on my work dashboards…

Hi @neo - I’m trying to do the same thing, using the permanent navigation but customise the app bar (or add a new appbar over the top). Just wondering if you’d be happy to share the CSS you’ve used to accomplish this?

Cheers!
Steve.

Hey, yeah sure, i have a PS1 file i call for the header, then in that has the code:

New-UDAppBar -Id “ElementAppBar” -Position fixed -Children {

}

Dashboard start:
New-UDDashboard -Title ‘blah’ -Pages $Pages -Stylesheets “/StyleSheet.css”

Then in StyleSheet.css file i have:
#ElementAppBar {
z-index:9999;
height:95px;
background-color: white;
}

Hope this helps!

Hi all,

This was fixed for me in an updated a while ago.
Today I create a list of items for the navigation bar, and then use the -loadnavigation parameter with New-UDPage:

$NavigationBar = {
    New-UDListItem -Label "Home" -OnClick { Invoke-UDRedirect "/" }
    if ($Roles -eq "Reader") {
        New-UDListItem -Label "TestGroup" -Children {
            New-UDListItem -Label "Test" -OnClick { Invoke-UDRedirect "/Test }
        }
    }
}

New-UDPage -Name "Test) -Url “/Test” -Role “Reader” -NavigationLayout permanent -LoadNavigation $NavigationBar -Content {
#WebPage
}

This creates a permanent expanded navigation bar on the left side, which, for example, can show items based on $Roles.

Thanks @alexsmid and @neo - I worked out a similar solution, see: Menus and pages - #3 by pharnos

Basically what you did, @neo but I’ve hidden the appbar that -NavigationLayout / -LoadNavigation creates, and shown my custom appbar…

In the $Navigation script block that is loaded for each page I set an Id of ‘CustomisedAppBar’

$Navigation = {
    New-UDAppBar -Id 'CustomisedAppBar' -DisableThemeToggle -Children {
...
...

On my New-UDDashboard I’ve added -Stylesheets @("/assets/style_changes.css"

New-UDDashboard -Title "Dashboard Nav Test" -Theme $Theme -Pages $Pages -Stylesheets @("/assets/style_changes.css")

In this css file I’ve hidden the header.MuiAppBar-root element.class and made visible only my New-UDAppBar with the Id of ‘CustomisedAppBar’

header.MuiAppBar-root {
	visibility: hidden !important;
}
#CustomisedAppBar {
    visibility: visible !important;
}

Setting the z-index may be a better solution though! Thanks!

That is a lot cleaner than my version! seems there are many ways to skin this cat!