@OptIn(ExperimentalLayoutApi::class)
@Composable
fun ListDetailLayout(
    list: @Composable () -> Unit,
    detail: @Composable (() -> Unit)?
) {
    val density = LocalDensity.current
    val detailVisible by animateFloatAsState(
        targetValue = if (detail != null) 1f else 0f,
        label = "detail visible",
        animationSpec = tween(1000)
    )
    var consumedInsetsFirst by remember { mutableStateOf(PaddingValues()) }
    var consumedInsetsSecond by remember { mutableStateOf(PaddingValues()) }
    Layout(
        content = {
            Box(
                Modifier
                    .layoutId("first")
                    .consumeWindowInsets(consumedInsetsFirst)
            ) {
                list()
            }
            Box(
                Modifier
                    .layoutId("second")
                    .consumeWindowInsets(consumedInsetsSecond)
                ) {
                if (detail!=null) detail()
            }
        }
    ) { measurable, constraints ->
        val firstMeasurable = measurable.first { it.layoutId == "first" }
        val secondMeasurable = measurable.first { it.layoutId == "second" }
        val width = constraints.maxWidth
        val detailWidth = (width * detailVisible / 2f).toInt()
        val listWidth = width - detailWidth
        consumedInsetsFirst = PaddingValues(end = with(density) { detailWidth.toDp() })
        consumedInsetsSecond = PaddingValues(start = with(density) { listWidth.toDp() })
        val firstPlaceable = firstMeasurable.measure(constraints.copy(maxWidth = listWidth))
        val secondPlaceable = secondMeasurable.measure(constraints.copy(maxWidth = width / 2))
        layout(constraints.maxWidth, constraints.maxHeight) {
            firstPlaceable.place(0, 0, 0f)
            secondPlaceable.place(listWidth, 0, 0f)
        }
    }
}