CODEWITHSUNDEEP
androidmaterial-designandroid-jetpack-composematerial-components-androidandroid-jetpack-compose-material3
Gabor
Gabor

Reputation: 7572

Drawer usage in Compose Material3

Is there a way to have the menu overlap the header and footer here?

I am using androidx.compose.material3.Scaffold and NavigationDrawer.

It seems like the Scaffold's drawer slot is removed - https://android-review.googlesource.com/c/platform/frameworks/support/+/1896804 so the instructions at https://developer.android.com/jetpack/compose/layouts/material?hl=hu#drawers no longer apply.

enter image description here

Upvotes: 12

Views: 7412

Answers (2)

Sathish Gadde
Sathish Gadde

Reputation: 1623

Create navigation drawer in Material design 3 with Jetpack compose example using ModalNavigationDrawer :

@Preview
@Composable
fun ModalNavigationDrawerSample() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    // icons to mimic drawer destinations
    val items = listOf(Icons.Default.Favorite, Icons.Default.Face, Icons.Default.Email)
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 = {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = if (drawerState.isClosed) ">>> Swipe >>>" else "<<< Swipe <<<")
            Spacer(Modifier.height(20.dp))
            Button(onClick = { scope.launch { drawerState.open() } }) {
                Text("Click to open")
            }
        }
    }
)
}

enter image description here

Upvotes: 4

Florian Reisinger
Florian Reisinger

Reputation: 3088

Please have a look at ModalNavigationDrawer, which provides the drawer. You can use your Scaffold as a content of the ModalNavigationDrawer.

It seems like this has been split up into multiple components....

Upvotes: 13

Related Questions