Problems with the Drawer on material3

Question

It's not recognizing the parameter and invocations related to the drawer

@Composable
fun PantallaPrincipal(userViewModel: UserViewModel) {

    val navController = rememberNavController()
    val scaffoldState = rememberScaffoldState(rememberDrawerState(initialValue = DrawerValue.Closed))
    val scope= rememberCoroutineScope()

    Scaffold(scaffoldState = scaffoldState,
        topBar= { TopBar(scope,scaffoldState=scaffoldState)},
        bottomBar= { BottomBar(navController=navController)},
        drawerContent = { Drawer(scope=scope,scaffoldState=scaffoldState,navController=navController)},
        floatingActionButton = {FloatingBottom(navController=navController)}
    ){
        Navigation(navController = navController, userViewModel = userViewModel)
    }
}

@Composable
fun DrawerItem (item: navigationDrawer, selected:Boolean, onclick:(navigationDrawer)->Unit) {
    val itemBackground=if(selected) Color.Gray else Color.Transparent

    Row(modifier = Modifier
        .fillMaxWidth()
        .height(45.dp)
        .background(itemBackground)
        .padding(10.dp)
        .clickable { onclick(item) },
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            imageVector = item.icono,
            contentDescription = item.texto,
            colorFilter = ColorFilter.tint(Color.Black),
            modifier = Modifier
                .height(35.dp)
                .width(35.dp)
        )
        Spacer(modifier = Modifier.width(7.dp))
        Text(text = item.texto,
            fontSize = 18.sp,
            color = Color.Black
        )
    }
}

@Composable
fun Drawer(scope: CoroutineScope, scaffoldState: ScaffoldState, navController: NavHostController) {

    val listItems = listOf<navigationDrawer>(navigationDrawer.Inicio, navigationDrawer.Favoritos, navigationDrawer.Perfil)
    val rutaActual = navController.currentBackStackEntry?.destination?.route

    Column(modifier = Modifier
        .background(Color.White)
    ){
        Image(imageVector = Icons.Default.Face,
            contentDescription = "logo",
            modifier = Modifier
                .background(Color.White)
                .height(100.dp)
                .fillMaxWidth()
                .padding(10.dp)
        )
        Spacer(modifier = Modifier
            .fillMaxWidth()
            .height(5.dp)
        )
        listItems.forEach{
            DrawerItem(item = it,
                selected = (rutaActual==it.ruta),
                onclick = {navController.navigate(it.ruta)
                    scope.launch {scaffoldState.drawerState.close()}
                })
        }
    }
}

Answer 1

Important: You must use scaffold as ModalNavigationDrawer content.

Material 3 Example - Navigation Drawer with scaffold in compose

val scope = rememberCoroutineScope()
val drawerState = rememberDrawerState(DrawerValue.Closed)
val items = listOf(Icons.Default.Close, Icons.Default.Clear, Icons.Default.Call)
val selectedItem = remember { mutableStateOf(items[0]) }

ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {

        ModalDrawerSheet {
            Spacer(Modifier.height(12.dp))
            items.forEach { item ->
                NavigationDrawerItem(
                    icon = { Icon(item, contentDescription = null) },
                    label = { Text(item.name) },
                    selected = item == selectedItem.value,
                    onClick = {
                        scope.launch { drawerState.close() }
                        selectedItem.value = item
                    },
                    modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                )
            }
        }
    

},
content = {

    Scaffold(

        topBar = { TopBar(preesOnDrawerIcon = { scope.launch { drawerState.open() } }) },

        bottomBar = {},

        snackbarHost = {},

        content = {},
        
    )
}
)


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBar(pressOnDrawer: () -> Unit){
...
}

Answer 2

In Material 3 it's called ModalNavigationDrawer. You can use it using a ModalDrawerSheet and ModalDrawerItems like in this example taken from the docs:

ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
    ModalDrawerSheet {
        Spacer(Modifier.height(12.dp))
        items.forEach { item ->
            NavigationDrawerItem(
                icon = { Icon(item, contentDescription = null) },
                label = { Text(item.name) },
                selected = item == selectedItem.value,
                onClick = {
                    scope.launch { drawerState.close() }
                    selectedItem.value = item
                },
                modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
            )
        }
    }
},