ModalNavigationDrawer doesn't totally collapse in Jetpack Compose

Question

Here is the code that produces this strange behavior:

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        Column(
            modifier = Modifier.fillMaxSize()
        ) {
            items.forEach { item ->
                NavigationDrawerItem(
                    modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding),
                    icon = {
                        Icon(
                            imageVector = item.icon,
                            contentDescription = null
                        )
                    },
                    label = {
                        Text(
                            text = item.name
                        )
                    },
                    onClick = {},
                    selected = true
                )
            }
        }
    },
    content = {
        Scaffold(
            topBar = {},
            content = { padding ->
                Box(
                    modifier = Modifier.fillMaxSize().padding(padding)
                ) {
                    Box(
                        modifier = Modifier.fillMaxSize(),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(
                            text = "Profile"
                        )
                    }
                }
            }
        )
    }
)

I'm using:

implementation "androidx.compose.material3:material3:1.0.0-alpha16"

This exact code worked perfectly fine before updating from 1.0.0-alpha15.

How to solve this?

Answer 1

If you put the drawer contents into a ModalDrawerSheet it might help.

Thus:

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet {
            Column(
                modifier = Modifier.fillMaxSize()
    etc