Navigation controller in kotlin jetpack compose example

 To navigate one screen to another screen we can use navigation like below

1. MainActivity:-

@Composable
fun AppRoute() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "MainMenu") {
        composable(route = "MainMenu") {
            MainMenuScreen(navController)
        }
        composable (route = AppConstant.POST) {
            PostListScreen()
        }
        composable(route = AppConstant.ALBUM) {
            AlbumScreen()
        }
        composable(route = AppConstant.COMMENT) {
            CommentScreen()
        }
        composable(route = AppConstant.PHOTOS) {
            PhotoScreen()
        }
    }
}

2. MainMenuScreen class

@Composable
fun MainMenuScreen(navController: NavController) {
    val mainMenuViewModel: MainMenuViewModel = hiltViewModel()
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        contentPadding = PaddingValues(8.dp),
        verticalArrangement = Arrangement.SpaceAround,
    ) {
        items(mainMenuViewModel.getMainMenuData()) {
            MainMenuItem(menuName = it.menuName, navController)
        }

    }
}


@Composable
fun MainMenuItem(menuName: String, navController: NavController) {
    Box(
        modifier = Modifier
            .padding(10.dp)
            .size(140.dp)
            .clip(RoundedCornerShape(8.dp))
            .paint(painter = painterResource(id = R.drawable.bg1))
            .border(1.dp, Color.LightGray)
            .clickable {
                navController.navigate(menuName)
            },
        contentAlignment = Alignment.BottomCenter
    ) {
        Text(
            text = menuName,
            fontSize = 18.sp,
            color = Color.Black,
            modifier = Modifier.padding(0.dp, 20.dp),
            style = MaterialTheme.typography.bodyMedium
        )

    }
}

3. AppConstant
package com.example.jetpackcompose2.util

object AppConstant  {
   const val POST="Post"
   const val COMMENT="comments"
   const val ALBUM="albums"
   const val PHOTOS="photos"
}

4. inside hilt module

@Module
@InstallIn(SingletonComponent::class)
class MainMenuModule {
    @Singleton
    @Provides
    fun provideMenu(): List<MainMenuData> {
        return listOf(
            MainMenuData(AppConstant.POST),
            MainMenuData(AppConstant.PHOTOS),
            MainMenuData(AppConstant.ALBUM),
            MainMenuData(AppConstant.COMMENT)
        )

    }
}