Approach 2

App.kt

@Composable
@Preview
fun App(
    isDarkTheme: Boolean
) {
    NavigationExampleTheme(isDarkTheme) {
      Navigator(MainScreen(), key = "topNavigator") {
        SlideTransition(it)
      }
    }
}

HomeTab.kt

object HomeTab: Tab {

  override val key: ScreenKey
    get() = "HomeTab"

  @Composable
  override fun Content() {
    val mainNavigator = LocalNavigator.currentOrThrow.parent!!
    val navigator = LocalNavigator.currentOrThrow
    val homeViewModel = mainNavigator.getNavigatorScreenModel<HomeViewModel>()

    val homeState = homeViewModel.uiState.collectAsState().value

    Column(
      modifier = Modifier.fillMaxSize()
        .background(MaterialTheme.colorScheme.background)
        .padding(top = 64.dp, bottom = 80.dp)
    ) {
      
      // Products List
      Products(
        products = homeState.products,
        isLoading = homeState.isProductsLoading,
        onListItemClicked = {
          mainNavigator?.push(DetailScreen(it))
        }
      ) { isListEndReached ->
        if (isListEndReached) homeViewModel.getProducts()
      }

    }
  }

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

MainScreen.kt

class MainScreen : Screen {
  override val key: ScreenKey
    get() = "Main"

  @OptIn(ExperimentalMaterial3Api::class, InternalVoyagerApi::class)
  @Composable
  override fun Content() {

    TabNavigator(
      tab = HomeTab,
      key = "mainTab"
    ) {
      Scaffold(
        content = {
          CurrentTab()
        },
        bottomBar = {
          NavigationBar {
            TabNavigationItem(HomeTab)
            TabNavigationItem(SearchTab)
            TabNavigationItem(CartTab)
            TabNavigationItem(LikedTab)
            TabNavigationItem(ProfileTab)
          }
        },
        topBar = {
          TopAppBar(it.current.options.title)
        }
      )
    }
  }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBar(
  title: String
) {
  CenterAlignedTopAppBar(
    title = {
      Text(
        title,
        maxLines = 1,
        overflow = TextOverflow.Ellipsis
      )
    },
    modifier = Modifier.shadow(2.dp),
    colors = TopAppBarDefaults.topAppBarColors(
      containerColor = MaterialTheme.colorScheme.surface,
      titleContentColor = MaterialTheme.colorScheme.onSurface,
    )
  )
}

@Composable
private fun RowScope.TabNavigationItem(tab: Tab) {
  val tabNavigator = LocalTabNavigator.current
  NavigationBarItem(
    selected = tabNavigator.current == tab,
    onClick = { tabNavigator.current = tab },
    icon = { Icon(painter = tab.options.icon!!, contentDescription = tab.options.title) },
    label = {
      Text(tab.options.title, maxLines = 1, overflow = TextOverflow.Ellipsis)
    }
  )
}