@momo-kits/native-kits 0.120.0-navigation.3 → 0.120.0-navigation.4

package/compose/src/commonMain/kotlin/vn/momo/kits/const/Theme.kt

@@ -170,4 +170,6 @@ val darkTheme = Theme(
 
 val AppTheme = staticCompositionLocalOf { defaultTheme }
 
-val AppStatusBar = staticCompositionLocalOf { 0.dp }
+val AppStatusBar = staticCompositionLocalOf { 0.dp }
+
+val AppNavigationBar = staticCompositionLocalOf { 0.dp }

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

@@ -30,6 +30,8 @@ import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import vn.momo.kits.application.HEADER_HEIGHT
 import vn.momo.kits.components.Divider
+import vn.momo.kits.const.AppNavigationBar
+import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Radius
 import vn.momo.kits.modifier.noFeedbackClickable
@@ -44,9 +46,9 @@ fun BottomSheet(
 ) {
     val navigator = LocalNavigator.current
 
-    val navigationBarHeight = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
-    val statusBarHeight = WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
-    val height = if(getPlatformName() == "iOS") getScreenDimensions().height.dp else getScreenDimensions().height.dp + statusBarHeight + navigationBarHeight
+    val height = if(getPlatformName() == "iOS")
+        getScreenDimensions().height.dp
+    else getScreenDimensions().height.dp + AppStatusBar.current + AppNavigationBar.current
     val screenHeight = with(LocalDensity.current) { height.toPx() }
     val sheetOffset = remember { Animatable(screenHeight) }
 

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

@@ -1,5 +1,6 @@
 package vn.momo.kits.navigation
 
+import androidx.compose.foundation.ScrollState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.mutableStateOf
@@ -12,9 +13,10 @@ import vn.momo.kits.navigation.header.HeaderType
 
 class Navigation(
     val id: Int = -1,
-    val bottomTabIndex: Int = -1
+    val bottomTabIndex: Int = -1,
+    val initOptions: NavigationOptions? = null
 ) {
-    private val _options = mutableStateOf(NavigationOptions())
+    private val _options = mutableStateOf(initOptions ?: NavigationOptions())
     val currentOptions: State<NavigationOptions> get() = _options
     val options: NavigationOptions get() = _options.value
 
@@ -24,7 +26,7 @@ class Navigation(
         headerTitle: HeaderTitle? = null,
         headerRight: HeaderRight? = null,
         headerType: HeaderType? = null,
-        scrollable: Boolean? = null,
+        scrollData: ScrollData? = null,
         backgroundColor: Color? = null,
         tintColor: Color? = null,
         footerComponent: (@Composable () -> Unit)? = null,
@@ -36,7 +38,7 @@ class Navigation(
                 headerTitle = headerTitle ?: options.headerTitle,
                 headerRight = headerRight ?: options.headerRight,
                 headerType = headerType ?: options.headerType,
-                scrollable = scrollable ?: options.scrollable,
+                scrollData = scrollData ?: options.scrollData,
                 backgroundColor = backgroundColor ?: options.backgroundColor,
                 tintColor = tintColor ?: options.tintColor,
                 footerComponent = footerComponent ?: options.footerComponent,
@@ -65,8 +67,13 @@ data class NavigationOptions(
     val headerTitle: HeaderTitle = HeaderTitle.Default("Stack"),
     val headerRight: HeaderRight = HeaderRight.Toolkit(),
     val headerType: HeaderType = HeaderType.Default(),
-    val scrollable: Boolean = true,
+    val scrollData: ScrollData = ScrollData(),
     val backgroundColor: Color? = null,
     val tintColor: Color? = null,
     val footerComponent: @Composable (() -> Unit)? = null,
+)
+
+data class ScrollData(
+    val scrollable: Boolean = true,
+    val scrollState: ScrollState? = null,
 )

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

@@ -1,6 +1,5 @@
 package vn.momo.kits.navigation
 
-import MeasureRenderTime
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.slideInHorizontally
 import androidx.compose.animation.slideInVertically
@@ -19,9 +18,9 @@ import androidx.navigation.compose.composable
 import androidx.navigation.compose.dialog
 import androidx.navigation.compose.rememberNavController
 import androidx.navigation.toRoute
+import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.platform.ConfigureDialog
-import vn.momo.kits.platform.getStatusBarHeight
 
 @Composable
 fun NavigationContainer(initialScreen: @Composable () -> Unit, initialScreenTitle: String?, options: NavigationOptions? = null){
@@ -32,12 +31,18 @@ fun NavigationContainer(initialScreen: @Composable () -> Unit, initialScreenTitl
     } else {
         AppStatusBar.current
     }
+    val navigationBarHeight = if (AppNavigationBar.current == 0.dp) {
+        WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
+    } else {
+        AppNavigationBar.current
+    }
 
     val startDestination = DynamicScreenRegistry.register(initialScreen, initialScreenTitle, options)
 
     CompositionLocalProvider(
         LocalNavigator provides navigator,
         AppStatusBar provides statusBarHeight,
+        AppNavigationBar provides navigationBarHeight,
     ) {
         NavHost(navController, startDestination = startDestination) {
             composable<DynamicScreenRoute>(
@@ -60,13 +65,12 @@ fun NavigationContainer(initialScreen: @Composable () -> Unit, initialScreenTitl
                 val screen = DynamicScreenRegistry.getScreen(route.id)
 
                 if (screen != null){
-                    MeasureRenderTime(route.title ?: "StackScreen${route.id}") {
-                        StackScreen(
-                            id = route.id,
-                            content = screen.content,
-                            navigationOptions = screen.options
-                        )
-                    }
+                    StackScreen(
+                        id = route.id,
+                        title = route.title,
+                        content = screen.content,
+                        navigationOptions = screen.options
+                    )
                 }
             }
 
@@ -90,13 +94,12 @@ fun NavigationContainer(initialScreen: @Composable () -> Unit, initialScreenTitl
                 val screen = DynamicScreenRegistry.getScreen(route.id)
 
                 if (screen != null){
-                    MeasureRenderTime(route.title ?: "StackScreen${route.id}") {
-                        StackScreen(
-                            id = route.id,
-                            content = screen.content,
-                            navigationOptions = screen.options
-                        )
-                    }
+                    StackScreen(
+                        id = route.id,
+                        title = route.title,
+                        content = screen.content,
+                        navigationOptions = screen.options
+                    )
                 }
             }
 
@@ -111,13 +114,9 @@ fun NavigationContainer(initialScreen: @Composable () -> Unit, initialScreenTitl
                 if (screen != null){
                     ConfigureDialog()
                     if (route.isBottomSheet){
-                        MeasureRenderTime(route.title ?: "BottomSheet${route.id}") {
-                            BottomSheet(screen.content, screen.onDismiss)
-                        }
+                        BottomSheet(screen.content, screen.onDismiss)
                     } else {
-                        MeasureRenderTime(route.title ?: "ModalScreen${route.id}") {
-                            ModalScreen(screen.content, screen.onDismiss)
-                        }
+                        ModalScreen(screen.content, screen.onDismiss)
                     }
                 }
             }

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

@@ -48,7 +48,7 @@ class Navigator(
 
     fun showBottomSheet(content: @Composable () -> Unit, title : String? = null, onDismiss: (() -> Unit)? = null){
         val route = DynamicScreenRegistry.registerModal(content, title, onDismiss)
-        navController.navigate(DynamicModalRoute(route.id, title, isBottomSheet = true))
+        navController.navigate(DynamicModalRoute(route.id, route.title, isBottomSheet = true))
     }
 }
 
@@ -57,16 +57,17 @@ val LocalNavigator = staticCompositionLocalOf<Navigator> {
 }
 
 @Serializable
-data class DynamicScreenRoute(val id: Int, val title: String?)
+data class DynamicScreenRoute(val id: Int, val title: String)
 
 @Serializable
-data class DynamicDialogRoute(val id: Int, val title: String?)
+data class DynamicDialogRoute(val id: Int, val title: String)
 
 @Serializable
-data class DynamicModalRoute(val id: Int, val title: String?, val isBottomSheet: Boolean = false)
+data class DynamicModalRoute(val id: Int, val title: String, val isBottomSheet: Boolean = false)
 
 data class DynamicScreen(
     val id: Int,
+    val title: String,
     val content: @Composable () -> Unit,
     val onDismiss: (() -> Unit)? = null,
     var options: NavigationOptions? = null
@@ -79,14 +80,17 @@ object DynamicScreenRegistry {
 
     fun register(content: @Composable () -> Unit, title: String?, options: NavigationOptions?): DynamicScreenRoute {
         val id = idCounter++
+        val screenTitle = title ?: "StackScreen$id"
         screens.add(
             DynamicScreen(
                 id = id,
+                title = screenTitle,
                 content = content,
                 options = options
             )
         )
-        return DynamicScreenRoute(id, title)
+
+        return DynamicScreenRoute(id, screenTitle)
     }
 
     fun registerModal(
@@ -95,8 +99,14 @@ object DynamicScreenRegistry {
         onDismiss: (() -> Unit)?
     ): DynamicModalRoute {
         val id = idCounter++
-        screens.add(DynamicScreen(id, content, onDismiss))
-        return DynamicModalRoute(id, title)
+        val modalTitle = title ?: "ModalScreen$id"
+        screens.add(DynamicScreen(
+            id = id,
+            title = modalTitle,
+            content = content,
+            onDismiss = onDismiss
+        ))
+        return DynamicModalRoute(id, modalTitle)
     }
 
     fun unregister() {

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

@@ -8,19 +8,17 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBars
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
@@ -32,13 +30,16 @@ import androidx.compose.ui.graphics.lerp
 import androidx.compose.ui.platform.LocalDensity
 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.delay
 import vn.momo.kits.components.InputSearch
+import vn.momo.kits.const.AppNavigationBar
 import vn.momo.kits.const.AppStatusBar
 import vn.momo.kits.const.AppTheme
 import vn.momo.kits.const.Colors
 import vn.momo.kits.const.Spacing
+import vn.momo.kits.modifier.conditional
 import vn.momo.kits.navigation.header.Header
 import vn.momo.kits.navigation.header.HeaderBackground
 import vn.momo.kits.navigation.header.HeaderRight
@@ -55,15 +56,16 @@ fun StackScreen(
     content: @Composable () -> Unit,
     navigationOptions: NavigationOptions? = null,
     id: Int = -1,
+    title: String = "",
     bottomTabIndex: Int = -1,
 ) {
     val navigator = LocalNavigator.current
-    val navigation = remember { Navigation(id = id, bottomTabIndex = bottomTabIndex) }
-    val scrollState = rememberScrollState()
+    val navigation = remember { Navigation(id = id, bottomTabIndex = bottomTabIndex, initOptions = navigationOptions) }
 
-    navigationOptions?.let { LaunchedEffect(Unit){ navigation.setOptions(navigationOptions) } }
     val options by navigation.currentOptions
 
+    val scrollState = options.scrollData.scrollState ?: rememberScrollState()
+
     val backgroundColor = options.backgroundColor ?: AppTheme.current.colors.background.default
     val inputSearchType = when (val headerType = options.headerType) {
         is HeaderType.DefaultOrExtended -> when {
@@ -120,7 +122,13 @@ fun StackScreen(
 
             Column(Modifier.zIndex(2f).fillMaxSize()) {
                 Spacer(Modifier.height(if (options.headerType is HeaderType.DefaultOrExtended) AppStatusBar.current + HEADER_HEIGHT.dp else 0.dp))
-                Column(Modifier.fillMaxWidth().weight(1f).verticalScroll(scrollState)){
+                Column (Modifier
+                    .fillMaxWidth()
+                    .weight(1f)
+                    .conditional(options.scrollData.scrollable) {
+                        verticalScroll(scrollState)
+                    }
+                ){
                     if (inputSearchType == InputSearchType.Animated) Spacer(Modifier.height(HEADER_HEIGHT.dp))
                     renderContent(
                         content = content,
@@ -130,7 +138,6 @@ fun StackScreen(
                 }
                 Footer(options.footerComponent)
             }
-
         }
     }
 }
@@ -138,7 +145,7 @@ fun StackScreen(
 @Composable
 fun renderContent(content: @Composable () -> Unit, scrollState: ScrollState, options: NavigationOptions){
     if (options.headerType is HeaderType.Animated){
-        val animatedHeader = options.headerType as HeaderType.Animated
+        val animatedHeader = options.headerType
         Box {
             Box(Modifier.fillMaxWidth().aspectRatio(animatedHeader.aspectRatio.value)){
                 animatedHeader.composable.invoke(scrollState.value)
@@ -155,13 +162,12 @@ fun renderContent(content: @Composable () -> Unit, scrollState: ScrollState, opt
 @Composable
 fun Footer(footerComponent: @Composable (() -> Unit)?) {
     if (footerComponent == null) return
-    val navigationBarHeight = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
 
     Box {
         Box(Modifier
             .fillMaxWidth()
             .background(AppTheme.current.colors.background.surface)
-            .padding(top = Spacing.S, start = Spacing.S, end = Spacing.S, bottom = navigationBarHeight + if(getPlatformName() == "iOS") (-4).dp else 4.dp)
+            .padding(top = Spacing.S, start = Spacing.M, end = Spacing.M, bottom = min(AppNavigationBar.current, 21.dp) + Spacing.S)
         ){
             footerComponent.invoke()
         }
@@ -197,7 +203,7 @@ fun renderSearchAnimated(scrollState: ScrollState, inputSearchType: InputSearchT
     val minEndPadding = Spacing.M
     val maxEndPadding = when (val headerRight = options.headerRight) {
         is HeaderRight.Toolkit -> if (headerRight.useShortcut) 114.dp else 78.dp
-        // TO DO
+        is HeaderRight.Custom -> headerRight.width + Spacing.M * 2
         else -> Spacing.M
     }
 
@@ -210,13 +216,14 @@ fun renderSearchAnimated(scrollState: ScrollState, inputSearchType: InputSearchT
             InputSearchLayoutParams(
                 topPadding = minTopPadding,
                 startPadding = maxStartPadding,
-                endPadding = minEndPadding,
+                endPadding = maxEndPadding,
                 backgroundColor = bgColor
             )
         }
 
         InputSearchType.Animated -> {
-            val scrollDp = with(LocalDensity.current) { scrollState.value.toDp() }
+            val density = LocalDensity.current
+            val scrollDp = with(density) { scrollState.value.toDp() }
 
             val animatedTopPadding by animateDpAsState(
                 targetValue = (maxTopPadding - scrollDp).coerceIn(minTopPadding, maxTopPadding),
@@ -240,6 +247,23 @@ fun renderSearchAnimated(scrollState: ScrollState, inputSearchType: InputSearchT
             )
             val animatedColor by animateColorAsState(targetValue = targetColor, label = "BackgroundColor")
 
+            val maxPadding = maxOf(maxEndPadding, maxStartPadding, maxTopPadding)
+            LaunchedEffect(scrollState.isScrollInProgress) {
+                if (scrollDp < maxPadding) {
+                    if (!scrollState.isScrollInProgress) {
+                        val midpoint = (maxTopPadding - minTopPadding) / 2
+                        val currentScrollDp = with(density) { scrollState.value.toDp() }
+
+                        if (currentScrollDp < midpoint) {
+                            scrollState.animateScrollTo(0)
+                        } else {
+                            val snapScrollValue = with(density) { maxPadding.toPx().toInt() }
+                            scrollState.animateScrollTo(snapScrollValue)
+                        }
+                    }
+                }
+            }
+
             InputSearchLayoutParams(
                 topPadding = animatedTopPadding,
                 startPadding = animatedStartPadding,

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

@@ -9,19 +9,23 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.systemBars
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.min
 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.NavigationOptions
 import vn.momo.kits.navigation.StackScreen
@@ -49,9 +53,6 @@ fun BottomTab(
     val navigation = LocalNavigation.current
     val navController = rememberNavController()
 
-    val navigationBarHeight = WindowInsets.systemBars.asPaddingValues().calculateBottomPadding()
-    val statusBarHeight = WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
-
     bottomTabOptionItems = items.map { it.options }.toMutableList()
 
     LaunchedEffect(Unit){
@@ -61,12 +62,12 @@ fun BottomTab(
     }
     val height = if(getPlatformName() == "iOS")
         getScreenDimensions().height.dp
-    else getScreenDimensions().height.dp + statusBarHeight + navigationBarHeight
+    else getScreenDimensions().height.dp + AppStatusBar.current + AppNavigationBar.current
 
-    Column(modifier = Modifier.fillMaxWidth().height(height)) {
+    Box(modifier = Modifier.fillMaxWidth().height(height), contentAlignment = Alignment.BottomCenter) {
         Box(modifier = Modifier
-            .fillMaxWidth()
-            .weight(1f)
+            .fillMaxSize()
+            .padding(bottom = BOTTOM_TAB_BAR_HEIGHT.dp + AppNavigationBar.current)
         ) {
             NavHost(
                 navController = navController,
@@ -115,25 +116,28 @@ fun BottomTab(
                         StackScreen(
                             content = item.screen,
                             navigationOptions = option,
-                            bottomTabIndex = index
+                            bottomTabIndex = index,
+                            title = "BottomTabItem$index"
                         )
                     }
                 }
             }
         }
-        BottomTabBar(
-            items = items,
-            floatingButton = floatingButton,
-            navController = navController,
-            onTabSelected = {
-                val currentRoute = navController.currentBackStackEntry?.destination?.route
-                val targetRoute = "option$it"
-                if (currentRoute != targetRoute){
-                    navController.navigate(targetRoute)
+        Column {
+            BottomTabBar(
+                items = items,
+                floatingButton = floatingButton,
+                navController = navController,
+                onTabSelected = {
+                    val currentRoute = navController.currentBackStackEntry?.destination?.route
+                    val targetRoute = "option$it"
+                    if (currentRoute != targetRoute){
+                        navController.navigate(targetRoute)
+                    }
                 }
-            }
-        )
-        Spacer(modifier = Modifier.fillMaxWidth().height(navigationBarHeight + if(getPlatformName() == "iOS") (-4).dp else 4.dp).background(AppTheme.current.colors.background.surface))
+            )
+            Spacer(modifier = Modifier.fillMaxWidth().height(min(AppNavigationBar.current, 21.dp) + Spacing.S).background(AppTheme.current.colors.background.surface))
+        }
     }
 }
 

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

@@ -43,6 +43,7 @@ import vn.momo.kits.modifier.noFeedbackClickable
 import vn.momo.kits.platform.getScreenDimensions
 
 val floatingButtonWidth = 75.dp
+const val BOTTOM_TAB_BAR_HEIGHT = 56
 
 @Composable
 fun BottomTabBar(
@@ -77,7 +78,7 @@ fun BottomTabBar(
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .height(56.dp)
+                .height(BOTTOM_TAB_BAR_HEIGHT.dp)
                 .background(AppTheme.current.colors.background.surface),
             horizontalArrangement = Arrangement.SpaceAround,
         ) {
@@ -91,7 +92,7 @@ fun BottomTabBar(
         }
 
         Box(modifier = Modifier
-            .offset(x = indicatorOffsetX, y = (-54).dp)
+            .offset(x = indicatorOffsetX, y = (-BOTTOM_TAB_BAR_HEIGHT + 2).dp)
             .height(2.dp)
             .width(44.dp)
             .background(
@@ -103,7 +104,7 @@ fun BottomTabBar(
         Box(modifier = Modifier
             .fillMaxWidth()
             .height(6.dp)
-            .offset(x = 0.dp, y = (-56).dp)
+            .offset(x = 0.dp, y = (-BOTTOM_TAB_BAR_HEIGHT).dp)
             .background(
                 brush = Brush.verticalGradient(
                     colors = listOf(Color.Transparent, Color.Black.copy(alpha = 0.05f))

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

@@ -72,10 +72,12 @@ fun Header(
                 )
             }
 
-            renderHeaderContent(options.headerTitle, headerColor.tintIconColor)
-            if (inputSearchType != InputSearchType.Header) {
-                HeaderRight(options.headerRight, options.tintColor, headerColor)
-            }
+            renderHeaderContent(
+                options.headerTitle,
+                headerColor.tintIconColor
+                    .copy(alpha = if (inputSearchType == InputSearchType.Animated) 1f - animatedAlpha else 1f)
+            )
+            HeaderRight(options.headerRight, options.tintColor, headerColor)
         }
         renderVerticalShadow(opacity)
     }

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

@@ -5,6 +5,8 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
@@ -17,6 +19,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import vn.momo.kits.application.DesignSystemWhiteList
 import vn.momo.kits.application.Spacing
@@ -35,7 +38,11 @@ fun HeaderRight(
 ) {
     when (headerRight) {
         is HeaderRight.None -> {}
-        is HeaderRight.Custom -> headerRight.content()
+        is HeaderRight.Custom -> {
+            Box(Modifier.fillMaxHeight().width(headerRight.width)){
+                headerRight.content()
+            }
+        }
         is HeaderRight.OnBoarding -> {}
         is HeaderRight.Toolkit -> {
             Toolkit(
@@ -148,7 +155,10 @@ fun NavigationButton(
 
 sealed interface HeaderRight {
     data object None : HeaderRight
-    data class Custom(val content: @Composable () -> Unit) : HeaderRight
+    data class Custom(
+        val width: Dp,
+        val content: @Composable () -> Unit
+    ) : HeaderRight
     data object OnBoarding : HeaderRight
     data class Toolkit(
         val useShortcut: Boolean = false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.120.0-navigation.3",
+  "version": "0.120.0-navigation.4",
   "private": false,
   "dependencies": {},
   "devDependencies": {},

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

@@ -1,27 +0,0 @@
-import androidx.compose.foundation.layout.Box
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.onGloballyPositioned
-import kotlinx.datetime.Clock
-
-
-@Composable
-fun MeasureRenderTime(
-    tag: String = "",
-    content: @Composable () -> Unit
-) {
-    val startTime = remember { Clock.System.now() }
-
-    Box(
-        modifier = Modifier.onGloballyPositioned {
-            val endTime = Clock.System.now()
-            val duration = (endTime - startTime).inWholeMilliseconds
-            println("TEST112 [$tag] rendered in $duration ms")
-        }
-    ) {
-        content()
-    }
-}
-
-