Nav menu similar to MS Teams

[ghost]

I am trying to design a similar navigation menu to the one in Microsoft Teams. The sidebar should always be visible, even on mobile devices. I also want to include a secondary navigation bar (similar to the Planner sidebar in the screenshot) that is fully collapsible. Additionally, I would like to implement a drop shadow effect between the AppBar, NavBar, and the page content. Can anyone please guide me or provide a sample of how this can be done in Blazor?

Side Menu Visible

Side Menu Collapsed

Thanks

[vnbaaij]

Have you seen https://www.fluentui-blazor.net/AppBar?

It supports OnClick event to hook in whatever code you'd want/like. The shadows can most probably be added with standard CSS rules.

[ghost]

Yes I have seen the AppBar component but for the secondary (Fully collapsible menu) is there any component? or NavMenu component support fully collapsible view?

[vnbaaij]

Maybe you an use https://preview.fluentui-blazor.net/Splitter#collapsesplitter and then switch panel 1 and 2 with CSS. (not tested that)

[SpenceDahl]

Can the orientation of the AppBar be changed? Alternatively, is there a component similar to FluentAppBarItem that can be used in a toolbar?

[vnbaaij]

Can the orientation of the AppBar be changed?

No, it is designed to be displayed vertically

Alternatively, is there a component similar to FluentAppBarItem that can be used in a toolbar?
No, but you can definitely define your own components for that.

[RobDene]

NavMenu has the "Hamburger" menu to shrink as standard - would that not work for you ?