Component Request - burger menu as used like Modal

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 :slight_smile:

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:-
1 Like