Nested Screen in Bottom Navigation

[pankaj1920]

this is my bottom navigation

class HomePage : Screen {
@composable
override fun Content() {
Surface {
TabNavigator(tab = HomeScreen) {
Scaffold(

                bottomBar = {
                    BottomNavigation {
                        TabNavigationItem(tab = HomeScreen)
                        TabNavigationItem(tab = BookmarkScreen)
                        TabNavigationItem(tab = ProfileScreen)
                    }
                }
            ) {
                Column(modifier = Modifier.padding(it)) {
                    CurrentTab()
                }
            }
        }
    }
}

}

@composable
fun RowScope.TabNavigationItem(tab: Tab) {
val tabNavigator = LocalTabNavigator.current
BottomNavigationItem(selected = tabNavigator.current == tab,
onClick = {
tabNavigator.current = tab
}, icon = {
Icon(painter = tab.options.icon!!, contentDescription = tab.options.title)
})
}

This is my HomeScreen

object HomeScreen :Tab{

override val options: TabOptions
    @Composable
    get() {
        val title ="Home"
        val icon = rememberVectorPainter(Icons.Default.Home)
        return remember {
            TabOptions(0u,"Home",icon)

        }
    }

@Composable
override fun Content() { 

      val navigator = LocalNavigator.currentOrThrow 

        RedButton(
                    text = rightBtnText,
                    onClick = {
                        navigator.push(ProductDetailScreen(id=2)
                    },
                    modifier = Modifier.weight(1f).height(40.dp)
                )    }

}

so when i navigate from HomeScreen to ProductDetail Screen bottom navigation is not visible. i want to make bottom navigation visible in ProductDetail Screen and if i navigate from ProdutDetailScreen to other Screen in that case also Bottom navigation show be visible and In bottom navigation home icon shoud be selected.

Is there any way to achive it