Drawer placement with AppBar

[wakeke]

We are trying to add some ekstra items to the AppBar (Avatar, etc) and the only way we could get this to work is if we use New-UDDrawer and New-UDAppBar but the we cannot get the Drawer to be permanent like when we use NavigationLayour permanent on New-UDPage (the drawer overwrites the AppBar and site content).

Is it instead possible to add New-UDAvatar (and other elements) to New-UDDashboard or New-UDPage as elements in the AppBar?

Here is an example of the issue:

New-UDPage -Blank -Name "Test" -Content {
    $Drawer = New-UDDrawer -Children {
        New-UDList -Children {
            New-UDListItem -Label "Home"
            New-UDListItem -Label "Stuff"
            New-UDListItem -Label "More Stuff"
        }
    } -Variant permanent

    New-UDAppBar -Position relative -Children {
        New-UDTypography -Text "Test" -Variant h6 -Align center
        New-UDElement -Tag 'div' -Attributes @{style = @{
                'margin-left'='auto'
                'margin-right'='0'
            }
        } -Content {
            New-UDAvatar -Id 'avatar' -Image $UserThumbnail -Alt $CorpUser
        }
    } -DisableThemeToggle - -Drawer $Drawer

    New-UDTypography -Text "Test" -Variant h5
} -Url 'test' -Title 'test'

And here is how we would like the drawer to be located. But we cannot add the avatar.

$Navigation = {
    New-UDList -Children {
        New-UDListItem -Label "Home"
        New-UDListItem -Label "Stuff"
        New-UDListItem -Label "More Stuff"
    }
}

New-UDPage -Name "Test" -Url 'test3' -DefaultHomePage -Content {
    
    New-UDTypography -Text "Home" -Variant h5

} -NavigationLayout permanent -LoadNavigation $Navigation

Product: PowerShell Universal
Version: 2.4

[insomniacc]

Did anyone get an answer to this?
I’m currently running 2.6.0 (nightly) with the latest UD framework.
I noticed too that when you use the default appbar (i.e dont specify one) you’ll get an auto generated nav menu, page name, and avatar / logout on the right.
If I then go ahead and use new-udappbar, I can generate my own nav menu with the drawer, I can add an image, pagename etc, but there’s no way to add in the avatar and logout that was displaying previously.
@adam Is there a method to do this currently?
If not it would be good to have switches on new-udappbar to use the default drawer and to show/hide the avatar/logout option.
Alternativly, is there a method to logout a user
Really the main use for new-udappbar for me, is simply adding an image and changing the title / nav menu if required for specific pages.

Default:

Using new-udappbar:

EDIT: Just tried the logout function on the default bar and it actually is throwing a 404 for me anyway:

**https://servername/login?ReturnUrl=/tom/Test-Page-2**
HTTP ERROR 404

I’ll likely hide this since I’m using OIDC and not forms or anything else. But the auto generated nav menu would still be useful.

[adam]

We need to hide the logout for OIDC since we don’t support the logout endpoint. I didn’t realize that was visible for that login type.

As for New-UDAppBar, I haven’t been fond of how that was first implemented since it just replaces the default app bar, as you’ve seen. I think you can just use -Logo and -Title to of New-UDPage to adjust what is in the default nav bar. I’ve started to add additional features to New-UDPage and New-UDDashboard to update the default navbar without having to use New-UDAppBar.

[insomniacc]

No problem! Ah, -logo will probably be exactly what I need thanks, I’m all in favour of keeping it simple

[djanszen]

Hey Adam. Is it still in the plans to add more features to the default nav bar without having to use New-UDAppBar? I am wanting to add a dynamic scriptblock to display a new-udlink if there are > 0 error messages in my sql table. Would prefer to use the default if possible.

[adam]

Yep. This is coming in 2.8.0.

$Pages = New-UDPage -Name 'Test' -Content {
    New-UDTypography -Text "Hello, World!"

    New-UDButton -Text "Learn more about Universal Dashboard" -OnClick {
        Invoke-UDRedirect https://docs.ironmansoftware.com
    }
} -HeaderContent {
    New-UDBUtton -Text 'Users' -Icon (New-UDIcon -Icon Users)
    New-UDIcon -Icon Book -Style @{
        marginRight = '10px'
    }
    New-UDLink -Text 'Learn More' -Style @{
        color = 'white'
    }
}

New-UDDashboard -Title "Hello, World!" -Page $Pages

[djanszen]

YES YES YES =] =]

BTW, I sort of achieved what I wanted with New-UDBadgeLink custom component and then some css to move it over to the right side of the page. However, it will still be very nice to put in the default page app navbar.