@momo-kits/native-kits 0.151.2-test.1 → 0.151.2-test.10

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/StackScreen.kt

@@ -7,6 +7,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.ScrollableState
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.aspectRatio
@@ -26,9 +27,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.Alignment
@@ -42,7 +43,6 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.min
 import androidx.compose.ui.zIndex
-import kotlinx.coroutines.flow.distinctUntilChanged
 import vn.momo.kits.components.InputSearch
 import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
@@ -52,16 +52,17 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.modifier.hideKeyboardOnTap
 import vn.momo.kits.navigation.component.FABPosition
 import vn.momo.kits.navigation.component.FloatingButton
+import vn.momo.kits.navigation.component.HEADER_HEIGHT
 import vn.momo.kits.navigation.component.Header
 import vn.momo.kits.navigation.component.HeaderBackground
 import vn.momo.kits.navigation.component.HeaderRight
 import vn.momo.kits.navigation.component.HeaderType
+import vn.momo.kits.navigation.component.InputSearchType
 import vn.momo.kits.platform.BackHandler
 import vn.momo.kits.platform.getAndroidBuildVersion
 
-const val HEADER_HEIGHT = 52
-
-enum class InputSearchType { None, Header, Animated }
+internal val LocalFooterHeightPx = staticCompositionLocalOf { mutableIntStateOf(0) }
+internal val LocalHeaderRightWidthPx = staticCompositionLocalOf { mutableIntStateOf(0) }
 
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
@@ -73,43 +74,36 @@ internal fun StackScreen(
 ) {
     val navigator = LocalNavigator.current
     val statusBar = AppStatusBar.current
+    val density = LocalDensity.current
     val navigation = remember { Navigation(id = id, bottomTabIndex = bottomTabIndex, initOptions = navigationOptions) }
 
     val options by navigation.currentOptions
 
-    val backgroundColor = options.backgroundColor ?: AppTheme.current.colors.background.default
-    val inputSearchType = getInputSearchType(options)
-
-    var footerHeight by remember { mutableStateOf(0) }
-    var headerRightWidth by remember { mutableStateOf(0) }
-
-    val limit = with(LocalDensity.current) {
+    val limit = with(density) {
         (statusBar).toPx() + HEADER_HEIGHT
     }.toInt()
 
     val (scrollState, scrollInProcess) = if (options.scrollData.scrollState is LazyListState)
-        (options.scrollData.scrollState as? LazyListState ?: rememberLazyListState()).proxyScrollState(limit)
+        (options.scrollData.scrollState as? LazyListState ?: rememberLazyListState()).proxyScrollState(limit, 15)
     else
-        (options.scrollData.scrollState as? ScrollState ?: rememberScrollState()).proxyLimitedScrollState(limit)
-
-    val scrollDp = with(LocalDensity.current) { scrollState.value.toDp() }
+        (options.scrollData.scrollState as? ScrollState ?: rememberScrollState()).proxyLimitedScrollState(limit, 15)
 
-    val isKeyboardVisible = isKeyboardVisible()
-    val bottomPadding = min(AppNavigationBar.current, if (isKeyboardVisible) 0.dp else 21.dp)
+    val footerHeightPx = remember { mutableIntStateOf(0) }
+    val headerRightWidthPx = remember { mutableIntStateOf(0) }
 
-    BackHandler(true){
-        navigator.pop()
-    }
+    BackHandler(true) { navigator.pop() }
 
     CompositionLocalProvider(
         StackScreenScrollableState provides options.scrollData.scrollState,
         LocalNavigation provides navigation,
         LocalScrollState provides scrollState,
-        LocalOptions provides options
+        LocalOptions provides options,
+        LocalFooterHeightPx provides footerHeightPx,
+        LocalHeaderRightWidthPx provides headerRightWidthPx
     ) {
         Box(Modifier
             .fillMaxSize()
-            .background(backgroundColor)
+            .background(options.backgroundColor ?: AppTheme.current.colors.background.default)
             .conditional(options.keyboardOptions.keyboardShouldPersistTaps) {
                 hideKeyboardOnTap()
             }
@@ -122,68 +116,87 @@ internal fun StackScreen(
             }
 
             Box(Modifier.zIndex(4f)) {
-                Header(
-                    onHeaderRightWidthMeasured = { headerRightWidth = it}
-                )
+                Header()
             }
 
             Column (Modifier.zIndex(5f)) {
-                SearchAnimated(
-                    inputSearchType = inputSearchType,
-                    isScrollInProgress = scrollInProcess,
-                    headerRightWidth = headerRightWidth
-                )
+                SearchAnimated(isScrollInProgress = scrollInProcess)
             }
 
             Column(Modifier.zIndex(2f).fillMaxSize()) {
-                Spacer(Modifier.height(if (options.headerType is HeaderType.DefaultOrExtended) AppStatusBar.current + HEADER_HEIGHT.dp else 0.dp))
-                if (inputSearchType == InputSearchType.Animated){
-                    val animatedTopPadding by animateDpAsState(
-                        targetValue = (HEADER_HEIGHT.dp - scrollDp).coerceIn(0.dp, HEADER_HEIGHT.dp),
-                        label = "AnimatedTopPadding"
-                    )
-                    Spacer(Modifier.height(animatedTopPadding))
-                }
-                Column (Modifier
-                    .fillMaxWidth()
-                    .weight(1f)
-                    .conditional(options.scrollData.scrollable && options.scrollData.scrollState is ScrollState) {
-                        verticalScroll(scrollState)
-                    }
-                ) {
-                    ScreenContent(content = content)
-                }
-                if (options.footerComponent != null){
-                    Footer(footerComponent = options.footerComponent, bottomPadding = bottomPadding, onHeightMeasured = { footerHeight = it })
-                }
+                MainContent(content = content)
             }
 
             Box(Modifier.zIndex(5f)){
-                val fabProps = options.floatingButtonProps ?: return@Box
-                val bottomPadding = fabProps.bottom ?:
-                    (Spacing.M + if (options.footerComponent != null) with(LocalDensity.current){ footerHeight.toDp() } else 0.dp)
-
-                FloatingButton(
-                    scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
-                    onClick = fabProps.onClick,
-                    containerColor = AppTheme.current.colors.primary,
-                    bottom = bottomPadding,
-                    icon = fabProps.icon,
-                    iconColor = fabProps.iconColor,
-                    text = fabProps.label,
-                    size = fabProps.size,
-                    position = fabProps.position ?: FABPosition.END,
-                )
+                FloatingContent()
             }
 
             Box(Modifier.zIndex(6f).fillMaxSize()){
                 if (bottomTabIndex != -1) return@Box
-                OverplayComponentRegistry.showOverlayComponent()
+                OverplayComponentRegistry.OverlayComponent()
             }
         }
     }
 }
 
+@Composable
+fun FloatingContent(){
+    val options = LocalOptions.current
+    val density = LocalDensity.current
+    val footerHeightPx = LocalFooterHeightPx.current
+    val scrollState = LocalScrollState.current
+
+    val fabProps = options.floatingButtonProps ?: return
+    val bottomPadding = fabProps.bottom ?:
+    (Spacing.M + if (options.footerComponent != null) with(density){ footerHeightPx.intValue.toDp() } else 0.dp)
+
+    FloatingButton(
+        scrollPosition = fabProps.scrollState?.value ?: scrollState.value,
+        onClick = fabProps.onClick,
+        containerColor = AppTheme.current.colors.primary,
+        bottom = bottomPadding,
+        icon = fabProps.icon,
+        iconColor = fabProps.iconColor,
+        text = fabProps.label,
+        size = fabProps.size,
+        position = fabProps.position ?: FABPosition.END,
+    )
+}
+
+@Composable
+fun ColumnScope.MainContent(content: @Composable ()-> Unit){
+    val options = LocalOptions.current
+    val inputSearchType = getInputSearchType(options)
+    val density = LocalDensity.current
+    val scrollState = LocalScrollState.current
+
+    Spacer(Modifier.height(if (options.headerType is HeaderType.DefaultOrExtended) AppStatusBar.current + HEADER_HEIGHT.dp else 0.dp))
+    if (inputSearchType == InputSearchType.Animated){
+        val scrollDp = with(density) { scrollState.value.toDp() }
+
+        val animatedTopPadding by animateDpAsState(
+            targetValue = (HEADER_HEIGHT.dp - scrollDp).coerceIn(0.dp, HEADER_HEIGHT.dp),
+            label = "AnimatedTopPadding"
+        )
+        Spacer(Modifier.height(animatedTopPadding))
+    }
+    Column (Modifier
+        .fillMaxWidth()
+        .weight(1f)
+        .conditional(options.scrollData.scrollable && options.scrollData.scrollState is ScrollState) {
+            verticalScroll(scrollState)
+        }
+    ) {
+        ScreenContent(content = content)
+    }
+
+    if (options.footerComponent != null){
+        val isKeyboardVisible = isKeyboardVisible()
+        val bottomPadding = min(AppNavigationBar.current, if (isKeyboardVisible) 0.dp else 21.dp)
+        Footer(footerComponent = options.footerComponent, bottomPadding = bottomPadding)
+    }
+}
+
 @Composable
 fun ScreenContent(content: @Composable () -> Unit){
     val scrollState = LocalScrollState.current
@@ -205,11 +218,19 @@ fun ScreenContent(content: @Composable () -> Unit){
 }
 
 @Composable
-fun Footer(footerComponent: @Composable (() -> Unit)?, onHeightMeasured: (Int) -> Unit, bottomPadding: Dp) {
+fun Footer(footerComponent: @Composable (() -> Unit)?, bottomPadding: Dp) {
     if (footerComponent == null) return
 
+    val footerHeightPx = LocalFooterHeightPx.current
+
+    val shadowBrush = remember {
+        Brush.verticalGradient(
+            colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
+        )
+    }
+
     Box(Modifier.onGloballyPositioned {
-        onHeightMeasured(it.size.height)
+        if (footerHeightPx.intValue != it.size.height) footerHeightPx.intValue = it.size.height
     }) {
         Box(Modifier
             .fillMaxWidth()
@@ -223,11 +244,7 @@ fun Footer(footerComponent: @Composable (() -> Unit)?, onHeightMeasured: (Int) -
             .fillMaxWidth()
             .height(6.dp)
             .offset(x = 0.dp, y = (-6).dp)
-            .background(
-                brush = Brush.verticalGradient(
-                    colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))
-                )
-            )
+            .background(shadowBrush)
         )
     }
 }
@@ -239,14 +256,18 @@ data class InputSearchLayoutParams(
 )
 @Composable
 fun SearchAnimated(
-    inputSearchType: InputSearchType,
-    isScrollInProgress: Boolean,
-    headerRightWidth: Int
+    isScrollInProgress: Boolean
 ) {
     val scrollState = LocalScrollState.current
     val options = LocalOptions.current
     val navigator = LocalNavigator.current
-    val scrollDp = with(LocalDensity.current) { scrollState.value.toDp() }
+    val density = LocalDensity.current
+
+    val scrollDp = with(density) { scrollState.value.toDp() }
+
+    val inputSearchType = getInputSearchType(options)
+    val headerRightWidthPx = LocalHeaderRightWidthPx.current
+    val headerRightWidthDp = with(density) { headerRightWidthPx.intValue.toDp() }
 
     if (inputSearchType == InputSearchType.None) return
     val inputSearchProps = (options.headerType as? HeaderType.DefaultOrExtended)?.inputSearchProps ?: return
@@ -256,8 +277,7 @@ fun SearchAnimated(
     val minStartPadding = Spacing.M
     val maxStartPadding = if (options.hiddenBack) Spacing.M else 52.dp
     val minEndPadding = Spacing.M
-    val maxEndPadding = with(LocalDensity.current){ headerRightWidth.toDp() } +
-            if (options.headerRight is HeaderRight.None) Spacing.M else Spacing.M * 2
+    val maxEndPadding = headerRightWidthDp + if (options.headerRight is HeaderRight.None) Spacing.M else Spacing.M * 2
 
     val targetColor = lerp(
         AppTheme.current.colors.background.surface,
@@ -268,7 +288,6 @@ fun SearchAnimated(
 
     val layoutParams = when (inputSearchType) {
         InputSearchType.Header -> {
-
             InputSearchLayoutParams(
                 topPadding = minTopPadding,
                 startPadding = maxStartPadding,
@@ -292,8 +311,11 @@ fun SearchAnimated(
                 label = "AnimatedEndPadding"
             )
 
-            val maxPadding = maxOf(maxEndPadding, maxStartPadding, maxTopPadding)
-            val snapScrollValue = with(LocalDensity.current) { maxPadding.toPx().toInt() }
+            val maxPadding = remember(maxTopPadding, maxStartPadding, maxEndPadding) {
+                maxOf(maxEndPadding, maxStartPadding, maxTopPadding)
+            }
+            val snapScrollValue = with(density) { maxPadding.toPx().toInt() }
+
             LaunchedEffect(isScrollInProgress && scrollState.value != 0 && scrollState.value != snapScrollValue) {
                 if (scrollDp < maxPadding) {
                     if (!isScrollInProgress) {
@@ -344,34 +366,32 @@ fun SearchAnimated(
 internal fun isKeyboardVisible(): Boolean {
     val ime = WindowInsets.ime
     val density = LocalDensity.current
-    val bottom = ime.getBottom(density)
-    return bottom > 0
+    return ime.getBottom(density) > 0
+}
+private fun quantize(value: Int, stepPx: Int): Int {
+    if (stepPx <= 1) return value
+    return (value / stepPx) * stepPx
 }
 
 @Composable
-fun LazyListState.proxyScrollState(thresholdPx: Int = 200): Pair<ScrollState, Boolean> {
+fun LazyListState.proxyScrollState(
+    thresholdPx: Int = 200,
+    stepPx: Int = 10
+): Pair<ScrollState, Boolean> {
     val scrollState = rememberScrollState()
     val locked = remember { mutableStateOf(false) }
 
-    LaunchedEffect(this, scrollState, thresholdPx) {
+    LaunchedEffect(this, scrollState, thresholdPx, stepPx) {
         snapshotFlow { firstVisibleItemIndex to firstVisibleItemScrollOffset }
-            .distinctUntilChanged()
             .collect { (index, offset) ->
-                val target = if (index == 0) offset else SCROLLED_PAST_FIRST_ITEM_THRESHOLD
-                val shouldLock = target > thresholdPx
+                val rawTarget = if (index == 0) offset else SCROLLED_PAST_FIRST_ITEM_THRESHOLD
+                val shouldLock = rawTarget > thresholdPx
                 if (locked.value != shouldLock) locked.value = shouldLock
 
-                when {
-                    shouldLock -> {
-                        if (scrollState.value != thresholdPx) {
-                            scrollState.scrollTo(thresholdPx)
-                        }
-                    }
-                    else -> {
-                        if (scrollState.value != target) {
-                            scrollState.scrollTo(target)
-                        }
-                    }
+                val desired = if (shouldLock) thresholdPx else quantize(rawTarget, stepPx)
+
+                if (scrollState.value != desired) {
+                    scrollState.scrollTo(desired.coerceAtLeast(0))
                 }
             }
     }
@@ -388,28 +408,23 @@ fun LazyListState.proxyScrollState(thresholdPx: Int = 200): Pair<ScrollState, Bo
 }
 
 @Composable
-fun ScrollState.proxyLimitedScrollState(thresholdPx: Int = 200): Pair<ScrollState, Boolean> {
+fun ScrollState.proxyLimitedScrollState(
+    thresholdPx: Int = 200,
+    stepPx: Int = 10
+): Pair<ScrollState, Boolean> {
     val proxy = rememberScrollState()
     val locked = remember { mutableStateOf(false) }
 
-    LaunchedEffect(this, proxy, thresholdPx) {
+    LaunchedEffect(this, proxy, thresholdPx, stepPx) {
         snapshotFlow { value }
-            .distinctUntilChanged()
-            .collect { target ->
-                val shouldLock = target > thresholdPx
+            .collect { rawTarget ->
+                val shouldLock = rawTarget > thresholdPx
                 if (locked.value != shouldLock) locked.value = shouldLock
 
-                when {
-                    shouldLock -> {
-                        if (proxy.value != thresholdPx) {
-                            proxy.scrollTo(thresholdPx)
-                        }
-                    }
-                    else -> {
-                        if (proxy.value != target) {
-                            proxy.scrollTo(target)
-                        }
-                    }
+                val desired = if (shouldLock) thresholdPx else quantize(rawTarget, stepPx)
+
+                if (proxy.value != desired) {
+                    proxy.scrollTo(desired.coerceAtLeast(0))
                 }
             }
     }
@@ -425,8 +440,6 @@ fun ScrollState.proxyLimitedScrollState(thresholdPx: Int = 200): Pair<ScrollStat
     return proxy to inProgress.value
 }
 
-
-
 private const val SCROLLED_PAST_FIRST_ITEM_THRESHOLD = 10_000
 
 internal val LocalScrollState = staticCompositionLocalOf<ScrollState> { error("No Scroll State provided") }

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/bottomtab/BottomTab.kt

@@ -23,15 +23,13 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import vn.momo.kits.const.AppNavigationBar
-import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.navigation.LocalNavigation
+import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.NavigationOptions
 import vn.momo.kits.navigation.StackScreen
 import vn.momo.kits.navigation.component.HeaderType
-import vn.momo.kits.platform.getPlatformName
-import vn.momo.kits.platform.getScreenDimensions
 import vn.momo.kits.platform.getScreenHeight
 
 private var bottomTabOptionItems : MutableList<NavigationOptions?> = mutableListOf()
@@ -52,9 +50,22 @@ fun BottomTab(
     floatingButton: BottomTabFloatingButton? = null
 ) {
     val navigation = LocalNavigation.current
+    val navigator = LocalNavigator.current
     val navController = rememberNavController()
 
-    bottomTabOptionItems = items.map { it.options }.toMutableList()
+    bottomTabOptionItems = items.mapIndexed { index, item ->
+        val options = item.options ?: NavigationOptions()
+        options.copy(
+            onBackHandler = {
+                if (index != 0) {
+                    navController.popBackStack()
+                } else {
+                    navigator.pop()
+                }
+            }
+        )
+    }.toMutableList()
+
 
     LaunchedEffect(Unit){
         navigation.setOptions(
@@ -103,13 +114,15 @@ fun BottomTab(
                                     )
                         }
                     ) {
-                        val option = getBottomTabOption(index)?.apply {
-                            if (index != 0){
-                                onBackHandler = {
+                        val option = getBottomTabOption(index)?.copy(
+                            onBackHandler = {
+                                if (index != 0) {
                                     navController.popBackStack()
+                                } else {
+                                    navigator.pop()
                                 }
                             }
-                        }
+                        )
 
                         StackScreen(
                             content = item.screen,

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/Header.kt

@@ -24,8 +24,6 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.AnimatedHeaderRatio
-import vn.momo.kits.application.HEADER_HEIGHT
 import vn.momo.kits.components.Icon
 import vn.momo.kits.components.InputSearchProps
 import vn.momo.kits.const.AppStatusBar
@@ -33,24 +31,26 @@ import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
 import vn.momo.kits.modifier.activeOpacityClickable
-import vn.momo.kits.navigation.InputSearchType
+import vn.momo.kits.navigation.LocalHeaderRightWidthPx
 import vn.momo.kits.navigation.LocalNavigator
 import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
 import vn.momo.kits.navigation.getInputSearchType
 
+const val HEADER_HEIGHT = 52
+enum class InputSearchType { None, Header, Animated }
+
 @Composable
-fun Header(
-    onHeaderRightWidthMeasured: (Int) -> Unit
-) {
+fun Header() {
     val options = LocalOptions.current
     val navigator = LocalNavigator.current
     val scrollState = LocalScrollState.current
+    val headerRightWidthPx = LocalHeaderRightWidthPx.current
     val inputSearchType = getInputSearchType(options)
 
     val opacityHeight = when (val header = options.headerType) {
         is HeaderType.Animated -> with(LocalDensity.current) { header.layoutOffSet.roundToPx() }
-        else -> vn.momo.kits.navigation.HEADER_HEIGHT
+        else -> HEADER_HEIGHT
     }
     val opacity by animateFloatAsState(
         targetValue = ((scrollState.value * 1f / opacityHeight * 1f)).coerceIn(0f, 1f),
@@ -75,7 +75,7 @@ fun Header(
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
             if(!options.hiddenBack) {
-                renderBackButton(
+                BackButton(
                     borderColor = headerColor.borderColor,
                     backgroundButton = headerColor.backgroundButton,
                     tintIconColor = headerColor.tintIconColor,
@@ -85,12 +85,14 @@ fun Header(
                 )
             }
 
-            renderHeaderContent(
+            HeaderContent(
                 options.headerTitle,
                 headerColor.tintIconColor
                     .copy(alpha = if (inputSearchType == InputSearchType.Animated) 1f - animatedAlpha else 1f)
             )
-            Box(Modifier.onGloballyPositioned { onHeaderRightWidthMeasured(it.size.width) }){
+            Box(Modifier.onGloballyPositioned {
+                if(headerRightWidthPx.intValue != it.size.width) headerRightWidthPx.intValue = it.size.width
+            }){
                 HeaderRight(options.headerRight, options.tintColor, headerColor)
             }
         }
@@ -99,7 +101,7 @@ fun Header(
 }
 
 @Composable
-fun renderBackButton(borderColor: Color, backgroundButton: Color, tintIconColor: Color, onBackHandler: () -> Unit){
+fun BackButton(borderColor: Color, backgroundButton: Color, tintIconColor: Color, onBackHandler: () -> Unit){
     Box(
         modifier = Modifier
             .size(28.dp)
@@ -118,7 +120,7 @@ fun renderBackButton(borderColor: Color, backgroundButton: Color, tintIconColor:
 }
 
 @Composable
-fun RowScope.renderHeaderContent(headerTitle: HeaderTitle, tintIconColor: Color){
+fun RowScope.HeaderContent(headerTitle: HeaderTitle, tintIconColor: Color){
     Box(
         Modifier.weight(1f).padding(horizontal = Spacing.M)
     ) {
@@ -126,16 +128,14 @@ fun RowScope.renderHeaderContent(headerTitle: HeaderTitle, tintIconColor: Color)
             is HeaderTitle.Default -> {
                 HeaderTitle(
                     title = headerTitle.title,
-                    color = tintIconColor
+                    color = tintIconColor,
+                    modifier = Modifier.fillMaxWidth(),
+                    textAlign = TextAlign.Start
                 )
             }
             is HeaderTitle.Journey -> {}
             is HeaderTitle.Location -> {}
-            is HeaderTitle.User -> {
-                HeaderUser(
-                    data = headerTitle
-                )
-            }
+            is HeaderTitle.User -> {}
         }
     }
 }
@@ -163,8 +163,9 @@ sealed class HeaderTitle {
         val title: String,
         val subTitle: String? = null,
         val image: List<String>? = null,
-        val dotColor: Color? = null,
-        val tintColor: Color? = null,
+        val dotColor: String? = null,
+        val verify: Boolean = false,
+        val tintColor: String? = null,
         val onPress: (() -> Unit)? = null,
         val icons: List<String> = emptyList(),
         val isLoading: Boolean = false

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderBackground.kt

@@ -14,7 +14,6 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
-import vn.momo.kits.application.HEADER_HEIGHT
 import vn.momo.kits.components.Image
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
@@ -22,6 +21,11 @@ import vn.momo.kits.modifier.conditional
 import vn.momo.kits.navigation.LocalOptions
 import vn.momo.kits.navigation.LocalScrollState
 
+enum class AnimatedHeaderRatio(val value: Float){
+    RATIO_16_9(16f / 9f),
+    RATIO_1_1(1f),
+    RATIO_3_2(3f / 2f)
+}
 
 @Composable
 fun HeaderBackground() {

package/compose/src/commonMain/kotlin/vn/momo/kits/navigation/component/HeaderTitle.kt

@@ -1,6 +1,5 @@
 package vn.momo.kits.navigation.component
 
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -14,12 +13,14 @@ import vn.momo.kits.const.Typography
 @Composable
 fun HeaderTitle(
     title: String = "",
+    modifier: Modifier = Modifier,
+    textAlign: TextAlign = TextAlign.Start,
     color: Color? = null,
 ) {
     Text(
-        modifier = Modifier.fillMaxWidth().zIndex(1f),
+        modifier = Modifier.then(modifier).zIndex(1f),
         text = title,
-        textAlign = TextAlign.Start,
+        textAlign = textAlign,
         style = Typography.actionSBold.copy(
             fontSize = 15.sp,
             lineHeight = 22.sp,

package/compose/src/commonMain/kotlin/vn/momo/kits/utils/Utils.kt

@@ -1,5 +1,9 @@
 package vn.momo.kits.utils
 
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.draw.drawBehind
@@ -8,6 +12,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import vn.momo.kits.const.AppStatusBar
 import kotlin.math.abs
 
 
@@ -72,3 +77,12 @@ fun formatNumberToMoney(number: Long, currency: String = "đ"): String {
 
     return result + currency
 }
+
+@Composable
+fun getAppStatusBarHeight(): Dp {
+    return if (AppStatusBar.current == 0.dp) {
+        WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
+    } else {
+        AppStatusBar.current
+    }
+}