Multiple NavMenus collapsing to top left and top right respectively

[nhwilly]

I see lots of apps these days with two menus.

One is top left and expands from left to right and the other is top right and expands right to left. Pretty common. I was using this in MudBlazor.

I can't figure out how to do that here.

Has someone worked this out? Is it just CSS, etc?

Right now, it's the only thing that's keeping me from adoption the package.

TIA

[dvoituron]

You can use the dir="rlt" attribute, but I don't think that will be enough in your case.
Which property are you using with MudBlazor NavMenu to do this?

[nhwilly]

They have an AppBar, which is a bit like a header with room for icon buttons on either side. I combined each icon with it's own Drawer which slides in and out and contains a NavMenu. Navigating closes the drawer. When closed, no icons for navigation are shown.

But there is no distinction between small and large displays (there could be I suppose).

And as it turns out, I really like FluentUi's approach better. On the desktop, the little icons are helpful and better UX, I think. Everything appears below the header.

I managed to create a Fluent project with the two menus and a callback that closed one when the other was open, but when the display is small, the menu button moves from the left to the top right and appears in the header - which makes sense. For the life of me I can't make it appear on the top left and the button for the right drawer appear on the top right.

I would try to roll my own solution, but the way auth pages are handled throws me. Will all the controls still work when the pages are statically rendered?

All my user related things were going to be on the right while all my business function things would be on the left.

Anyway, thanks for the rapid response.