Layout Design Question

[BGriffy78]

Hello.

I am experimenting with FluentUI, and really like the idea of building a desktop or webapp with it. I am struggling with recreating a layout I have in a standard Material app though...

I'm trying to create a three-panel layout for a quote builder application (picture of desired layout below):

1. Left Panel: A navigation rail/side-menu(?) with choices like Quote Details, Services/Products, etc. (think of it as a form selector)
2. Middle Panel: A dynamic form area that changes based on the selected navigation item (e.g. form for Quote Details, etc)
3. Right Panel: A static document preview that stays visible regardless of which navigation item is selected and doesnt have to reload when the active form is changed.

How can I achieve this design using FluentUI using its NavigationView top-level layout widget? I can create a sample app and get the menu and form page changing, but I dont know how to get the static/fixed preview on the right side.

Thank you.

BG

[Hopy-Jaden]

I believe your design is achievable by using the fluent UI library:

1. Use NavigationAppBar() in navigation view to achieve the top app bar
2. Use NavigationPane() in navigation view to achieve (1) Left Panel
3. In the NavigationBody, Use ListTile.selectable in ListView to achieve (2) Middle Panel
4. As the variable of selectedIndex of the list view changes, return the corresponding widget from your static List[selectedIndex], to achieve (3) Right Panel

You can see more info from the example app about each widget mentioned here.

[BGriffy78]

Thank you for your suggestion. I will give it a try and report back.

[BGriffy78]

This helped. Thank you.