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