Which one should I choose between Modal drawers and modal navigation drawer in Scaffold when I use Navigation Compose?

Question

I have read the article.

I know there are two ways to implement a modal navigation drawer, one is Modal drawers, and another is modal navigation drawer in Scaffold.

I hope to use Navigation Compose in my project, I found a sample project to learn.

At present, the author of the sample project use Code A to implement a modal navigation drawer.

I don't know if the Code B can do the same work, could you tell me ?

Code A

@Composable
fun TodoNavGraph(
    ...
) {
    NavHost(
       ...
    ) {
        composable(
            TodoDestinations.TASKS_ROUTE,
            arguments = listOf(... )
        ) { entry ->
            AppModalDrawer(...) {
                TasksScreen(
                    userMessage = entry.arguments?.getInt(USER_MESSAGE_ARG)!!,
                    ...
                )
            }
        }
        composable(TodoDestinations.STATISTICS_ROUTE) {
            AppModalDrawer(...) {
                StatisticsScreen(...)
            }
        }
        
    }
}

@Composable
fun AppModalDrawer(
    ...       
) {
    ModalDrawer(
        drawerState = drawerState,
        drawerContent = {
            AppDrawer( ...)
        }
    ) {
        content()
    }
}

@Composable
private fun AppDrawer(...){
   ...
}


@Composable
fun TasksScreen(
   ...
) {
    Scaffold(
       ...
    ) { 
        ...
    }
}

Code B

@Composable
fun TodoNavGraph(
    ...
) {
    NavHost(
       ...
    ) {
        composable(
            TodoDestinations.TASKS_ROUTE,
            arguments = listOf(... )
        ) { entry ->
              TasksScreen(
                    userMessage = entry.arguments?.getInt(USER_MESSAGE_ARG)!!,
                    ...,
                    AppDrawer(...)
              )            
        }
        composable(TodoDestinations.STATISTICS_ROUTE) {
             StatisticsScreen(..., AppDrawer(...) )
           
        }
        
    }
}



@Composable
fun TasksScreen(
   ...
   AppDrawer: @Composable () -> Unit
) {
    Scaffold(
        ...,
        drawerContent = { AppDrawer(...) }
    ) { 
        ...
    }
}


@Composable
private fun AppDrawer(... ){
   ...
}

Answer 1

For the answer of choosing between modal drawer and modal navigation drawer. My suggestion will be modal navigation drawer as scaffold has option for one and it makes our life little easy. But it depends on your use case too.

For the second answer, it's not the same. In "Code A" we are basically calling "fun AppDrawer()" from the "TodoNavGraph()" -

{ entry ->
            AppModalDrawer(...) { // here calling AppModalDrawer()
                TasksScreen(
                    userMessage = entry.arguments?.getInt(USER_MESSAGE_ARG)!!,
                    ...
                )
            }
        }

@Composable
fun AppModalDrawer(
    ...       
) {
    ModalDrawer(
        drawerState = drawerState,
        drawerContent = {
            AppDrawer( ...) // at last the fun AppDrawer()
        }
    ) {
        content()
    }
}

@Composable
private fun AppDrawer(...){
   ...
}

which in turns opens the "TaskScreen" from the "AppDrawer()" -

AppModalDrawer(...) {
                TasksScreen( // calling TaskScreen()
                    userMessage = entry.arguments?.getInt(USER_MESSAGE_ARG)!!,
                    ...
                )
            }

@Composable
fun TasksScreen(
   ...
) {
    Scaffold(
       ...
    ) { 
        ...
    }
}

While in the "Code B" the "TaskScreen" is called first in "TodoNavGraph()" which in turns calls the "AppDrawer()" -

{ entry ->
              TasksScreen(           // first TaskScreen()
                    userMessage = entry.arguments?.getInt(USER_MESSAGE_ARG)!!,
                    ...,
                    AppDrawer(...)    // then it calls the AppDrawer()
              )            
        }

@Composable
fun TasksScreen(
   ...
   AppDrawer: @Composable () -> Unit
) {
    Scaffold(
        ...,
        drawerContent = { AppDrawer(...) }
    ) { 
        ...
    }
}


@Composable
private fun AppDrawer(... ){
   ...
}

So the order is reversed and therefore the behaviour will be different in both the cases.

Hope it helps.