Code if anyone is curious

setContent {
                Scaffold(bottomBar = {
                    Box(Modifier.height(56.dp).background(Color.Blue).fillMaxWidth()) {
                        Text(text = "BottomBar")
                    }
                }) {
                    val bottomSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
                    val scope = rememberCoroutineScope()
                    ModalBottomSheetLayout(sheetState = bottomSheetState, sheetContent = {
                        Column(Modifier.fillMaxSize().background(Color.Green)
                        ) {
                            Text(text = "BottomSheet")
                        }
                    }) {
                        Column(Modifier.fillMaxSize().background(Color.Red)
                        ) {
                            Text(text = "ScreenA")
                            Button(onClick = {
                                scope.launch {
                                    bottomSheetState.show()
                                }
                            }) {
                                Text(text = "Open Bottom Sheet")
                            }
                        }
                    }
                }
        }

Things I've tried: 1. zindex modifier 2. placing a modal bottom sheet inside of a modal dialog

Most likely the advice that someone here might recommend might be to pass in lambda to TabA that when button is clicked, I also trigger the lamda, and the lambda can hide the bottom sheet, There has to be an easier way to get a true modal. no? Reasons why I don't want to go the event route: 1. A modal dialog does not require me to hide the bottom bar just because I'm in tabA showing a modal 2. This will require me having to pass in an event into every tab and screen that I have which then requires the caller to remember to hide the bottom bar 3. I already have an app built with like 100 screens and like 20 alert dialog modals. I need to convert each dialog modal to a bottom sheet modal, but the concept of modality seems to be different between the two. Hence asking the question of maybe I'm just missing something simple here to make it a true modal 4. A modalBottomSheet destination using accompanist gets around this issue as well, but for my case the modal makes more sense to live with the Tab contents itself 5. Even if I use the lambda approach here, I have to still figure out a way to show the bottomBar after the bottomSheet is dismised. 6. I already have logic to hide/show the bottom bar based on compose-nav destinations

Maybe another way of phrasing it Can

content

in a

ScaffoldLayout

be drawn ontop of

bottomBar

in any way?

private fun ScaffoldLayout(
    isFabDocked: Boolean,
    fabPosition: FabPosition,
    topBar: @Composable () -> Unit,
    content: @Composable (PaddingValues) -> Unit,
    snackbar: @Composable () -> Unit,
    fab: @Composable () -> Unit,
    bottomBar: @Composable () -> Unit
) {