BottomSheet visible under transparent navigation control bar when in collapsed state

So my app uses one background for all screens and I add it only once in my top level App composable fun like this

AppTheme {
        val appState = rememberAppState()
        AppGradientBackground {
            AppDrawer(
                ...
            ) {
                Scaffold(
                    bottomBar = {...
                ) { innerPadding ->
                    AppNavGraph(
                        startDestination = ...,
                        navController = appState.navController,
                        openDrawer = { appState.coroutineScope.launch { appState.drawerState.open() } },
                        modifier = Modifier
                            .padding(innerPadding)
                            .consumeWindowInsets(innerPadding)
                    )
                }
            }
        }
    }

Activity:

override fun onCreate(savedInstanceState: Bundle?) {
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Turn off the decor fitting system windows, which allows us to handle insets,
    // including IME animations
    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        MyApp()
    }
}

All screens use transparent background so the background defined in App composable would be available for all screens

But I guess because of it now I have an issue with BottomSheet:

I expect it to be hidden at all in collapsed mode

How can I fix it?

val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
    bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
)

BottomSheetScaffold(
        backgroundColor = Color.Transparent,
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Box(
                Modifier
                    .clipToBounds()
                    .fillMaxWidth()
                    .background(Color(0XFF0F9D58))
            ) {
                Column(
                    Modifier.fillMaxWidth(),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(text = "Bottom sheet!", fontSize = 20.sp, color = Color.White)
                }
            }
        },
        sheetPeekHeight = 0.dp
    ) {
       Scaffold( // main content of the screen
           contentWindowInsets = WindowInsets(0, 0, 0, 0),
           topBar = {
               AppTopAppBar(
                   title = "Some screen",
                   ...
               )
           }
       ) { innerPadding -> ...
    }

in expanded mode it looks like this

It's almost right, but I don't see any screen dim (it's still blue as in in collapsed mode), also there is visible blue screen under navigation bar, I would expect it be green when Bottom Sheet is visible.

Also I can't hide dialog when I tap somewhere else, for now I can hide/show on button click only

It seems quite difficult to understand how to setup it correctly with Jetpack Compose

Update

Fixed missing screen dim by switching to ModalBottomSheetLayout instead:

ModalBottomSheetLayout(
    sheetBackgroundColor = Color(0XFF0F9D58),
    sheetState = bottomSheetScaffoldState,
    sheetContent = {

But still the content of sheet is visible under navigation bar when sheet in hidden state

Update 2

Fixed visibility of sheet content in hidden status by adding contentWindowInsets = WindowInsets(0, 0, 0, 0), to top level Scaffold in App composable, based on Google sample app: https://github.com/android/nowinandroid/blob/main/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt#L127

Now it it's fixed for hidden state but now content of BottomSheet appears under navigation bottom bar in visible state, just need to add some system navigation inset/padding

Fixed sheet content visible under navigation bars in hidden status by adding contentWindowInsets = WindowInsets(0, 0, 0, 0) to top level Scaffold in App composable, which also fixes dim effect for status bar as well (so the whole screen should be dimmed), based on Google sample app https://github.com/android/nowinandroid/blob/main/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt#L127

ModalBottomSheetLayout(
        sheetBackgroundColor = Color(0XFF0F9D58),
        sheetState = bottomSheetScaffoldState,
        sheetContent = {
            Column(
                Modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "Bottom sheet!", fontSize = 20.sp, color = Color.White)
                Spacer(modifier = Modifier.navigationBarsPadding())
            }
        },
    ) {

Now it looks normal in visible state:

And when hidden: