Component Request - burger menu as used like Modal

Universal Dashboard UD Development
1

Hey Everyone,

Looking to see if someone wants or has the need to build a sidenav/menu using something similar to this - https://github.com/negomi/react-burger-menu

What I envision is to use this menu on the opposite side of the UD Nav but use it like a Modal - so when a button is clicked (add users) the right side menu slides out and allows for input text, selects etc…

I am having a rough time with Modals - they are not very customizable, and they don’t live in their own element, so one modal will replace the next, not a lot of flexibility with CSS etc…

I think having a sliding out modal/menu would be a great feature.

What do you think?

2

Hey @mylabonline this particular component hit my component radar a while back…but just didn’t really know how I could bind it properly… :confused: so I moved onto my next component which was on my radar at the time…This does look super-cool…might have to re-look into it, or post some questions on this thread for how to do the things I don’t fully understand :crazy_face:

1 Like
3

I also found this

Gives the back/forward and multi-layer.

4

Hi @mylabonline

Honestly, i’ve been wanting to implement the “blades” (believe thats the name the designers gave it) from Azure’s admin panel.
This would kinda-ish do the same thing, with less neatness.

But for your usecase… i’d say go with either me or psdevuk’s new modules for now:
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDWindow
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDResizeWindow

Either that or @psDevUK wanna give it a go?

5

Thanks @BoSen29 - my use case is actually the blades type feature like seen in the Azure portal, you nailed it! That’s where my idea for this request came from

As for the the new Window modules, they look great, but don’t fit this use case for me.

6

Yo @BoSen29 not to sure how to go about implementing the menu, as you in essance would be replacing a core bit of UD that is automatically done…I’m not too sure on it…plus found out today I missed a lot of options in those google charts I just released, so I kind of got to rebuild and republish 5 components…happy for a team-up always up for learning something new :fist:

7

if you wanna i can take a look in this in a couple of hours

2 Likes
8

The react master hath spoken!
Looking forward to seeing this in gif-format in the morning :slight_smile:

2 Likes
9

Hey guys.

Bubbling this backup. Did anyone complete this component?

10

As I felt a big need for a feature like this - I ended up using (for now :wink: ) the Modal Bottom Sheet and modified the theme to make the modal align to the side instead of coming up from the bottom.

In my CSS Theme I had to modify the .modal.bottom-sheet to override the bottom positioning of the modal, also needed to align it to the right.

'.modal.bottom-sheet' = @{
        'top' = '7% !important'
        'bottom' = 'unset !important'
        'margin' = 'unset !important'
        'width' = '20% !important'
        'max-height' = 'unset !important'
        'border-radius' = 'unset !important'
        'left' = 'unset !important'
        'height' = '100% !important'
        'animation' = 'slidein 1s backwards !important'
    }

As for the slide-in animation I created a @keyframe that provides the transform to create the slide effect.

'@keyframes slidein' = @{
        '0%' = @{ '-webkit-transform' = 'translateX(800px)' }
        '100%' = @{ '-webkit-transform' = 'translateX(0)' }
      }
4 Likes
11

@mylabonline is that demo animation built using universal dashboard? Looks awesome, I’m just starting out and wanting to build a utilities site for my colleagues - how did you set the persistent menu bar on the left side? Is it a UDList?

12

Hey @pharnos

For the navigation on the left side, this is achieved using New-UDSideNav with the -Fixed switch

Then I modify the look/feel by updating my themes file to include some sidenav customizations

'.sidenav' = @{
        'background-color' = "#201F1F"
        'margin-top'       = "66px"
        'height'           = "90%"
        'width'           = "88px !important"
        'border-radius'    = "0px"
        'box-shadow'       = "none"
        'z-index'          = "0"
    }

From the CSS above, using the width will shorten your sidenav, also make sure you use !important in some of your styles, as the UD theme will overwrite your customization without this.

As a newcomer to UD, I would recommend your browser developer tools to become your new best friend. This will help you identify what you want/can customize, you can also update the css live in the browser so you know what your end result will look like. once you have the customizations in the browser, copy/paste into your UD theme.

As you can see below, I updated the color of the sidenav to red using developer tools to see your customization/updates in realtime.

UD is soooo customizable, and I find I can quickly enter a rabbit hole with it. My theme.ps1 file is now over 1000 lines :slight_smile:

image

image
image130×733 10 KB

3 Likes
13

Mate, you’re a champion, thank you for that (udsidenav! duh! of course haha). And then I run into the problem that I’m using v3 and not v2, “in v3: Instead of using New-UDSideNav, you will now use a combination of New-UDAppbar and New-UDDrawer.” I’ll suss something out :slight_smile:

I can definitely see myself spending some serious hours building dashboards! Being able to transfer a lot of the code from previous PowerShell scripts is so good.

The page in your animation looks fantastic - I may have to pick your brains for how you kinda scaffolded all that together :slight_smile:

1 Like
14

Hi @mylabonline well I was running out of components to build. I recently released a sticky top navbar component, however last night as I also really like the look of this, I gave building this a go. So although it only lists a few dependencies the list is actually this long:-
browserify-optional
classnames
eve
prop-types
snapsvg-cjs
react-burger-menu
ast-transform
ast-types
browser-resolve
snapsvg
through
esprima
escodegen
tslib
resolve
is-core-module
path-parse
estraverse
esutils
esprima
optionator
source-map
has
function-bind
prelude-ls
deep-is
word-wrap
type-check
levn
fast-levenshtein
type-check
fastest-levenshtein

Anyways it built man! I got this to work :grin: so the only thing for me to really finish is make a ton of parameters to style the menu that pops out and a ton of other parameters…Only thing I am stuck on at the moment is producing the link list within the menu, but I got an idea of how to fix that, anyways thought I should update this post to say hopefully this burger menu will be on the marketplace real soon

1 Like
15

Hey @psDevUK that’s awesome! looking forward to using this component.

I have been spending my UD time lately moving to PU which is a learning experience all on its own, I feel like I’m new to UD :wink:

Great work as always!

2 Likes
16

Hello @mylabonline well I was at work today, but when I got home I thought of a way to solve the hyperlink issue in the menu, so here is a full working demo which I have also added all the props necessary to customize this, including a -Right switch parameter for menu placement, anyways please see demo below :slight_smile:

burger
burger1313×671 1.76 MB

1 Like
17

That looks amazing! looking forward to implementing this in my new PU.

Is the menu linked to the 3-line nav button? or can you link it to an onclick event for a button?

1 Like
18

Thanks man, originally I did only have this built to handle the one effect but figured how I could add it dynamically, so all the effects are available as a validated set list, all included.
Without CSS styling being applied there is no burger button…I have set parameters for the burger button color, hover color, position, alignment etc…but as for your question, I know it’s possible from the demo website, just thinking should just be a case of set-udelement to set the menu open I will have a tinker to make sure this also works from pressing a button to open the menu…then I just need to write a blog for using it, then will publish it to the powershell gallery which will sync it to the market place. I am not at work Monday so hopefully publish then if not before :slight_smile:

1 Like
19

Boom I just published my blog about this component:-


and I stuck this on the powershell gallery, so it will appear on the marketplace soon, but if you cannot wait till then you can find the powershell gallery link here:-

It does state on the npmjs page it works in FIREFOX and CHROME ok…I have not tested this in a live environment yet. Other than doing a demo to prove it works as expected if you get me.
The -Links parameter is the same as the -Content parameter so this side menu should be able to handle input fields etc…you might need to tweak the CSS display to get it to display correctly one under the other. But would be nice to see what you do with it :grin:
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDBurger
1 Like
20

I just got it downloaded into PU, but for the life of me, I cannot get the onClick event to popup the menu. I took your code snip from your blog, removed the content and pasted it into a UDButton - OnClick and nothing happens.

New-UDButton -Text 'Load' -OnClick {
        New-UDBurger -Id "BURGER_MENU" -Effect scaleRotate -Right -BurgerBackground "#fff" -Content {
            New-UDTypography -Text "Home Page"
        }
      }