derivedMediaQuery

MediaQuerySample

@Sampled
@Composable
fun MediaQuerySample() {
    Box(Modifier.fillMaxSize().padding(top = 100.dp)) {
        val showDualPane by derivedMediaQuery { windowWidth >= 600.dp }
        val showNavigationRail by derivedMediaQuery {
            windowWidth >= 500.dp && viewingDistance != ViewingDistance.Near
        }

        Column(Modifier.fillMaxSize()) {
            Row(Modifier.weight(1f).fillMaxWidth()) {
                if (showNavigationRail) {
                    // Show navigation rail
                    Box(Modifier.width(150.dp).background(Color.Red).fillMaxHeight())
                }

                // Actual content
                Box(Modifier.weight(1f).background(Color.Yellow).fillMaxHeight())

                if (showDualPane) {
                    // Split screen into 2 panes for additional content
                    Box(Modifier.weight(1f).background(Color.Cyan).fillMaxHeight())
                }
            }

            if (!showNavigationRail && !showDualPane) {
                // Show bottom navigation
                Box(Modifier.background(Color.Blue).height(80.dp).fillMaxWidth())
            }
        }
    }
}