I’m working with the SupportingPaneScaffold and don’t have the desired behaviour when displaying the Extra Pane for an expanded width screen.

The behaviour I experience will replace the Supporting Pane with the Extra Pane so that the Main Pane and Extra Pane is displayed, but I would like the Main Pane to be removed to display the Supporting Pane with the Extra Pane.
I thought the latter was the default behaviour, but it seems to be the former.

This is some sample code.

val navigator = rememberSupportingPaneScaffoldNavigator()

SupportingPaneScaffold(
        modifier = modifier,
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            AnimatedPane {
                Box(contentAlignment = Alignment.Center) {
                    Text(text = "Main Pane")
                }
            }
        },
        supportingPane = {
            AnimatedPane {
                Box(contentAlignment = Alignment.Center) {
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        Text(text = "Supporting Pane")
                        Button(onClick = { navigator.navigateTo(SupportingPaneScaffoldRole.Extra) }) {
                            Text(text = "Display Extra Pane")
                        }
                    }
                }
            }
        },
        extraPane = {
            AnimatedPane {
                Box(contentAlignment = Alignment.Center) {
                    Text(text = "Extra Pane")
                }
            }
        }
    )

Instead of

navigator.navigateTo(SupportingPaneScaffoldRole.Extra)

I can do

navigator.navigateTo(SupportingPaneScaffoldRole.Extra)
navigator.navigateTo(SupportingPaneScaffoldRole.Supporting)

and this gives the behaviour I want; however, when it comes to my BackHandler, I need to do something similar to remove the Extra Pane and display the Main Pane with the Supporting Pane

    BackHandler(navigator.canNavigateBack()) {
        navigator.navigateBack()

        if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
            navigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
        }
        if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Main] == PaneAdaptedValue.Hidden) {
            navigator.navigateTo(SupportingPaneScaffoldRole.Main)
        }
    }

But this causes another problem where additional back actions no longer have any affect and the app remains open.
So my solution for this would be

    BackHandler(navigator.scaffoldValue[SupportingPaneScaffoldRole.Extra] == PaneAdaptedValue.Expanded) {
        navigator.navigateBack()

        if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) {
            navigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
        }
        if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Main] == PaneAdaptedValue.Hidden) {
            navigator.navigateTo(SupportingPaneScaffoldRole.Main)
        }
    }

But I don’t have confidence in any of this implementation given all the workarounds, and the current state will invite additional workarounds when supporting the behaviour for compact and medium width screen.

How do I replace with Main Pane with the Supporting Pane when displaying the Extra Pane?