Navigation Drawer in Compose Multiplatform

Jetpack Compose Multiplatform is transforming the way developers create cross-platform applications, offering a unified Kotlin-based approach to building dynamic and responsive UIs. Among the essential components of modern apps, the navigation drawer stands out as a powerful tool for organizing and accessing app features efficiently. This guide explores how to implement a sleek and functional navigation drawer in Compose Multiplatform, complete with a top app bar, a header, and clickable navigation items. Whether you’re targeting Android, iOS this approach ensures a seamless user experience across all platforms.

1. Entry Point with @Preview

The App function sets up the app’s theme and previews the HomeScreen:

@Composable
@Preview
fun App() {
    MaterialTheme {
        HomeScreen()
    }
}

2. Home Screen with Scaffold

This is the main screen, combining the top app bar, navigation drawer, and content

@Composable
fun HomeScreen() {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    val navItems = listOf(
        "Search" to Icons.Default.Search,
        "Refresh" to Icons.Default.Refresh,
        "Favorites" to Icons.Default.Favorite,
        "Settings" to Icons.Default.Settings,
        "About" to Icons.Default.Info
    )
    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text(text = "Dictionary") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            if (!scaffoldState.drawerState.isOpen) {
                                scaffoldState.drawerState.open()
                            }
                        }
                    }) {
                        Icon(Icons.Default.Menu, contentDescription = "Menu")
                    }
                }
            )
        },
        drawerContent = {
            DrawerContent(navItems) { selectedItem ->…