Jetpack compose - Set Inset padding based on Navigation bar direction

Question

For context, I have a UI like this.

.

I am making changes for Edge to Edge UI using WindowsInsets following the Android Developers official videos.
Insets: Compose edition

My use case is I want the content to be visible on the navigation bar when the navigation bar is at the bottom as the navigation bar color is set to transparent as per the official guidelines.

I have set the navigation bar padding for FloatingActionButton separately.

This UI works for me because I have additional padding at the bottom making all the content scrollable within the visible region. (above transparent nav bar)

But, when the screen is in landscape mode (or in other scenarios where navigation bar appears in the sides),

Required content is behind the navbar.

So, how do I apply WindowInset padding for the navigation bar only when the screen is in the sides?

Code for reference, (Only related code is added to keep it simple)

Scaffold(
    modifier = Modifier.fillMaxSize(),
    floatingActionButton = {
        FloatingActionButton(
            modifier = Modifier.windowInsetsPadding(WindowInsets.navigationBars),
        )
    },
) {
    LazyColumn(
        contentPadding = PaddingValues(
            bottom = 80.dp,
        ),
    ) {
        // List UI
    }
}

Answer 1

Realised I can add a simple orientation check and add padding conditionally.
Still looking for a better solution that is supported directly by WindowInsets or any other features.

Also, there may be scenarios where this may not be correct.

val orientation = LocalConfiguration.current.orientation
Scaffold(
    modifier = Modifier.fillMaxSize(),
    floatingActionButton = {
        FloatingActionButton(
            modifier = Modifier.windowInsetsPadding(WindowInsets.navigationBars),
        )
    },
) {
    LazyColumn(
        modifier = Modifier.then(
            if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
                Modifier.windowInsetsPadding(WindowInsets.navigationBars),
            } else {
                Modifier
            }
        ),
        contentPadding = PaddingValues(
            bottom = 80.dp,
        ),
    ) {
        // List UI
    }
}

Answer 2

With WindowSizeClass determine the size of the screen and display different Composables based on that. For example, if the screen is wide (landscape mode), you show LargeScreen else Portrait Screen:

@Composable
fun ScreenRoute(
    windowSizeClass: WindowSizeClass // from activity calculateWindowSizeClass(activity)
) {
    if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact) {
        Screen()
    } else {
        Screen(Modifier.windowInsetsPadding(WindowInsets.navigationBars))
    }
}

@Composable
fun Screen(modifier: Modifier = Modifier) {

}

Read more in this article

Note: it also let you create Composable screens for all screen sizes