Navigation drawers provide ergonomic access to destinations in an app.
SampleNavigationDrawer
@Composable
fun SampleNavigationDrawer() {
var selectedIndex by remember { mutableIntStateOf(0) }
val items =
listOf(
"Home" to Icons.Default.Home,
"Settings" to Icons.Default.Settings,
"Favourites" to Icons.Default.Favorite,
)
NavigationDrawer(
drawerContent = {
Column(
Modifier.background(Color.Gray).fillMaxHeight().padding(12.dp).selectableGroup(),
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.spacedBy(10.dp),
) {
items.forEachIndexed { index, item ->
val (text, icon) = item
NavigationDrawerItem(
selected = selectedIndex == index,
onClick = { selectedIndex = index },
leadingContent = { Icon(imageVector = icon, contentDescription = null) },
) {
Text(text)
}
}
}
}
) {
Button(modifier = Modifier.height(100.dp).fillMaxWidth(), onClick = {}) { Text("BUTTON") }
}
}