Hi @mylabonline thanks for posing the question…Ok so in my head this onclick literally will add the component to the page, so in my demo you notice I build the content of the menu before calling it from a button…then the button needs to set the attribute via set-udelement to
menuOpen = $true
to get the menu to actually open…I mean you could create multiple burger menus with DIFFERENT ids build the content of each burger OUTSIDE the button like just under the content of the page, then from the actual button just open the burger menu you wish to open…happy to knock up a demo of multiple burger menus, that open via different buttons on the page…I havent tried it yet, but got the feeling this is possible.
Also remember if you want content to display inside the menu, you need to include the in the -Links
scriptblock, the content script block is for the main content of the page on the right hand side…I’m back from walking my dog so will knock a demo together to show this in more detail…
Import-Module -Name UniversalDashboard
Import-Module -Name UniversalDashboard.UDBadgeLink
Import-Module -Name UniversalDashboard.UDBurger
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 10005 -Dashboard (
New-UDDashboard -Content {
##Create another menu to the main menu but hide the actual burger menu
New-UDBurger -Id "TEXT_MENU" -Effect slide -Links { New-UDHeading -Size 5 -Text "Menu Text" -Color "#fff"
New-UDRow
New-UDHeading -Size 6 -Color "#fff" -Text "See different menus on the same page" } -BurgerOpacity 0 -Right -Content { }
##Now creating the main burger menu and the content I want to be displayed on the page
New-UDBurger -Id "BURGER_MENU" -Effect scaleRotate -BurgerBackground "#fff" -Links {
New-UDBadgeLink -Text "Other thing" -TextColor "#fff" -Link "/other" -HoverText "Other thing page" -BadgeTextColor "#fff" -BadgeCount 23 -Icon home -MaxNumber 40
New-UDBadgeLink -Text "Some thing" -TextColor "#fff" -Link "/some" -HoverText "Some thing page" -BadgeTextColor "#fff" -BadgeCount 52 -Icon react -MaxNumber 40
New-UDBadgeLink -Text "Click thing" -TextColor "#fff" -Link "/click" -HoverText "Click thing page" -BadgeTextColor "#fff" -BadgeCount 7 -Icon rainbow -MaxNumber 40
} -Content {
New-UDHeading -size 3 -Text "Some random text"
New-UDRow
New-UDHeading -size 6 -Text "Some random text"
New-UDButton -Text "Open Menu" -OnClick {
Set-UDElement -Id "TEXT_MENU" -Attributes @{menuOpen = $true }
}
New-UDRow
New-UDImage -Url "https://miro.medium.com/max/1190/1*8QgPF5tXwo5NqhvXXncwSQ.png"
New-UDRow
New-UDHeading -size 6 -Text "Some More random text"
New-UDRow
New-UDHeading -size 6 -Text "Some More random text"
}
}
)
Which gives me this:-
Is this the sirt of thing you trying to achieve? I mean you can change the width of the menu to make it take up more space…but this was just me knocking something up to backup what I said above…if this still not floating your boat, let me know what you after, even if it’s a hand-sketch. but hoping this explains this component a bit better…?
Damn I did a burger width but not a menu width parameter…I will add this now and republish…
Ok so now there is a version 1.0.1 which now includes a -MenuWidth
parameter so you can do…
New-UDDashboard -Content {
New-UDBurger -Id "TEXT_MENU" -MenuWidth "90%" -Effect slide -Links {
New-UDHeading -Size 5 -Text "Menu Text" -Color "#fff"
New-UDRow
New-UDHeading -Size 6 -Color "#fff" -Text "See different menus on the same page"
} -BurgerOpacity 0 -Right -Content { }
New-UDBurger -Id "TEXT_MENU2" -MenuWidth "50%" -Effect bubble -Links { New-UDHeading -Size 1 -Text "Some Other Text" -Color "#000" } -MenuOuterColor "#ccc" -MenuInnerColor "#fff" -BurgerOpacity 0 -Content { }
New-UDBurger -Id "BURGER_MENU" -MenuWidth "300px" -Effect scaleRotate -BurgerBackground "#fff" -Links {
New-UDBadgeLink -Text "Other thing" -TextColor "#fff" -Link "/other" -HoverText "Other thing page" -BadgeTextColor "#fff" -BadgeCount 23 -Icon home -MaxNumber 40
New-UDBadgeLink -Text "Some thing" -TextColor "#fff" -Link "/some" -HoverText "Some thing page" -BadgeTextColor "#fff" -BadgeCount 52 -Icon react -MaxNumber 40
New-UDBadgeLink -Text "Click thing" -TextColor "#fff" -Link "/click" -HoverText "Click thing page" -BadgeTextColor "#fff" -BadgeCount 7 -Icon rainbow -MaxNumber 40
} -Content {
New-UDHeading -size 3 -Text "Some random text"
New-UDRow
New-UDHeading -size 6 -Text "Some random text"
New-UDButton -Text "Open Menu" -OnClick {
Set-UDElement -Id "TEXT_MENU" -Attributes @{menuOpen = $true }
}
New-UDRow
New-UDButton -Text "Open Second Menu" -OnClick {
Set-UDElement -Id "TEXT_MENU2" -Attributes @{menuOpen = $true }
}
New-UDImage -Url "https://miro.medium.com/max/1190/1*8QgPF5tXwo5NqhvXXncwSQ.png"
New-UDRow
New-UDHeading -size 6 -Text "Some More random text"
New-UDRow
New-UDHeading -size 6 -Text "Some More random text"
}
}
Hopefully this now ticks all the boxes
P.S Damn just seen I need another parameter for inner menu width as the bubble effect didn’t line up to well, so 1.0.1 has been published, and going to publish 1.0.2 in a bit hopefully.
So the latest and greatest version right now is:-
So the menu width was added in 1.0.1 then I added inner menu width in 1.0.2 so no large black overlay:-