Add Images into Side Nav

[timd19]

On the Materialize website https://materializecss.com/sidenav.html

Would be nice to add the image and user information at the top (click demo).

[adamdriscoll]

This issue now has a bounty: https://www.bountysource.com/issues/72155079-add-images-into-side-nav

The cmdlet for this can be found here: https://github.com/ironmansoftware/universal-dashboard/blob/master/src/UniversalDashboard/Cmdlets/NewSideNavCommand.cs

The JSX side of it is here: https://github.com/ironmansoftware/universal-dashboard/blob/master/src/UniversalDashboard.Materialize/Components/ud-navigation.jsx

[blurpiflurp]

So something like this?

With options to add an e-mail/background.

$Navigation = New-UDSideNav -Content {
    New-UDSideNavItem -Text "My First Page" -PageName "Page Name" -Image "https://cdn.pixabay.com/photo/2014/04/03/10/32/user-310807_960_720.png"
    New-UDSideNavItem -Subheader -Text "Subheader"
    New-UDSideNavItem -Text "My Second Page" -PageName "Page Name 2" -Image "https://cdn.pixabay.com/photo/2017/01/20/17/26/operating-system-1995434_960_720.png"
    New-UDSideNavItem -Divider
    New-UDSideNavItem -Text "Google" -Url 'https://www.google.com' -Icon Users
} -Fixed

[awickham10]

Is -Text required? I have a use case where I would like a logo in the top left and this would work as long as the -Text parameter is not required.

[blurpiflurp]

I don't know actually. Not really but it might be set to as a mandatory field atm...
However this addition would need some css ninja to make it nice since its not really aligned at all and I have no interest to learn that but I've seen what @psDevUK did with the azure theme and maybe he could look at that...

[psDevUK]

I’m no css ninja but would be an honour to help out in anyway possible. Just let me know if you got your own fork page or where I can get this from. Thanks

Amazing work by the way for solving this conundrum

[psDevUK]

Yo @oitptobbe if you upload this to your github then let me know. I will do my best to make it look pretty then PR it back to you?

[blurpiflurp]

@psDevUK Yes I will upload the code tomorrow if I can. Might be delayed until Saturday depending on if I can get another issue solved or if I give up.

Iirc the issue is that when we add a image to said sidebar I also add the id “user-view” because otherwise the circle tag for the image doesn’t work.

I’m guessing that a offset for user-view will fix the whole issue but...

[psDevUK]

@oitptobbe aka obi wan kenobi whenever you ready I will be very interested to see this. Well done again

[blurpiflurp]

Was checking what I had broken because it would not collapse... Then I noticed I had a -fixed parameter on new-udsidenav...

Not sure why but now the elements are aligned it looks like. I'll submit a PR for this anyways.

If you want to play around @psDevUK then go ahead. Its in my fork now.

Import-Module c:\users\fr1200\source\repos\universal-dashboard\src\output\UniversalDashboard.Community.psd1
$Page1 = New-UDPage -Name "Page Name" -Content { New-UDCard -Id 'page-1' }
$Page2 = New-UDPage -Name "Page Name 2" -Content { New-UDCard -Id 'page-2'}

$Navigation = New-UDSideNav -Content {
    New-UDSideNavItem -Text "My First Page" -PageName "Page Name" -Image "https://cdn.pixabay.com/photo/2014/04/03/10/32/user-310807_960_720.png" -background "https://materializecss.com/images/office.jpg"
    New-UDSideNavItem -Subheader -Text "Subheader"
    New-UDSideNavItem -Text "My Second Page" -PageName "Page Name 2" -Image "https://cdn.pixabay.com/photo/2017/01/20/17/26/operating-system-1995434_960_720.png"
    New-UDSideNavItem -Divider
    New-UDSideNavItem -Text "Google" -Url 'https://www.google.com' -Icon Users
} -Fixed


$dash = New-UDDashboard -Title "Navigation" -Pages @($Page1, $Page2) -Navigation $Navigation

Get-UDDashboard|Stop-UDDashboard
Start-UDDashboard -port 8000 -Dashboard $dash -Name 'dash' -AutoReload

And this is without the text for the first navitem.

It also works now without a background image.

[adamdriscoll]

@oitptobbe - Can you click claim on here? https://www.bountysource.com/issues/72155079-add-images-into-side-nav