Hello, I replicate `TopBar` using a `Box` as I nee...

# compose

[nuhkoca]

Hello, I replicate TopBar using a Box as I needed Scroll-To-Fade animation but icon click is not working as efficient as TopBar. In Compose’s TopBar, touch target area is working well for navigation and action items as long as you touch within the boundaries of the blue square. Therefore, IconButton successfully delegates click action to Icon component but in my custom TopBar, click behavior is not working as in Compose’s TopBar. if I only touch within the boundaries of the red square, I am seeing ripple. How do I fix that? Thank you.

[nuhkoca]

Code:

@Composable
private fun BoxScope.FadingToolbar(
    scrollState: ScrollState,
    onBackPressed: () -> Unit,
    onSharePressed: () -> Unit
) {
    val isPageTitleScrolled = scrollState.value >= TitleOffsetInPx
    val topBarElevation = if (scrollState.value >= HeroOffsetInPx) AppBarDefaults.TopAppBarElevation else 0.dp
    val elevation by animateDpAsState(targetValue = topBarElevation)
    val tint = animateColorAsState(
        targetValue = if (isPageTitleScrolled) {
            TRTheme.colors.appForeground3
        } else {
            TRTheme.colors.nonDynamicWhite
        }
    )

    Box(
        modifier = Modifier
            .shadow(elevation)
            .alpha(max(0.0f, scrollState.value / TitleOffsetInPx))
            .fillMaxWidth()
            .background(TRTheme.colors.appBackground1Elevated)
            .align(Alignment.TopCenter)
            .height(AppBarHeight)
    )
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = TRTheme.spacing.medium)
            .height(AppBarHeight),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(TRTheme.spacing.double)
    ) {
        TRIconButton(onClick = onBackPressed) {
            TRIcon(iconResId = TRTheme.icons.arrowBackS, tint = tint.value)
        }
        Box(modifier = Modifier.weight(1f)) {
            FadingTitle(visible = isPageTitleScrolled)
        }
        TRIconButton(onClick = onSharePressed) {
            TRIcon(iconResId = TRTheme.icons.shareS, tint = tint.value)
        }
    }
}

[nuhkoca]

passing pointerInput(Unit) {} for the parent Row seems to have done the trick.

Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = TRTheme.spacing.medium)
            .height(AppBarHeight)
            .pointerInput(Unit) {},
        ...
    )