expanded_header.kt

@Composable
fun ExpandedHeader(modifier: Modifier = Modifier) {
    //To simulate Header Content
    SubcomposeLayout(modifier) { constraints ->

        val headerPlaceable = subcompose("header") {
            Column(modifier = modifier.background(Color.Cyan)) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color.Red)
                        .height(250.dp),
                    contentAlignment = Alignment.BottomStart
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.texture_image),
                        contentDescription = "Header Image",
                        contentScale = ContentScale.Crop,
                    )

                    Box(
                        modifier = Modifier
                            .padding(16.dp)
                            .size(56.dp)
                            .background(Color.White)
                    ) {
                        Image(
                            painter = painterResource(id = R.drawable.logo),
                            contentDescription = "Logo Image",
                            contentScale = ContentScale.Crop,
                        )
                    }
                }
                HeaderContent()
                Divider(color = Color.LightGray, modifier = Modifier.height(16.dp))
            }
        }.first().measure(constraints)

        val navBarPlaceable = subcompose("navBar") {
            NavBar()
        }.first().measure(constraints)

        connection.maxHeight = headerPlaceable.height.toFloat()
        connection.minHeight = navBarPlaceable.height.toFloat()

        val space = IntSize(
            constraints.maxWidth,
            headerPlaceable.height + connection.headerOffset.roundToInt()
        )
        layout(space.width, space.height) {
            headerPlaceable.place(0, connection.headerOffset.roundToInt())
            navBarPlaceable.place(
                Alignment.TopCenter.align(
                    IntSize(navBarPlaceable.width, navBarPlaceable.height),
                    space,
                    layoutDirection
                )
            )
        }
    }
}


@Composable
fun NavBar() {
    var alphaValue by remember { mutableFloatStateOf(0f) }

    alphaValue = (3 * (1f - connection.progress)).coerceIn(0f, 1f)

    //To Simulate Navigation BAR
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp)
            .border(
                width = 1.dp, color = Color.Gray.copy(alpha = alphaValue)
            )
            .background(Color.White.copy(alpha = alphaValue))
    ) {
        Row(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            IconButton(onClick = { /* TODO: Handle back action */ }) {
                Icon(
                    imageVector = Icons.Default.ArrowBack,
                    contentDescription = "Back",
                    tint = Color.Black.copy(alpha = alphaValue)
                )
            }

            Text(
                modifier = Modifier.weight(1f),
                text = "Navigation Bar",
                color = Color.Black.copy(alpha = alphaValue)
            )

            IconButton(onClick = { /* TODO: Handle search action */ }) {
                Icon(
                    imageVector = Icons.Default.Menu,
                    contentDescription = "Search",
                    tint = Color.Black.copy(alpha = alphaValue)
                )
            }
        }
    }
}

@Composable
fun HeaderContent() {
    HeaderItem(
        Modifier
            .padding(8.dp)
            .fillMaxWidth()
            .border(
                width = 1.dp, color = Color.Gray, shape = RoundedCornerShape(2.dp)
            )
            .padding(8.dp),
        "Header content item 1",
    )



    HeaderItem(
        Modifier
            .padding(8.dp)
            .fillMaxWidth()
            .border(
                width = 1.dp, color = Color.Gray, shape = RoundedCornerShape(2.dp)
            )
            .padding(8.dp),
        "Header content item 2",
    )
}