derivedMediaQuery

MediaQuerySample

@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())
            }
        }
    }
}