[Compose]Drawer Menu

👉🏻 Drawer Menu를 swift에서 구현하는 방법입니다
How to implement a Drawer Menu in Swift

👉🏻 Jetpack Compose에서는 Drawer Menu를 구현하기위해서 ModalNavigationDrawer를 사용합니다.
Jetpack Compose uses ModalNavigationDrawer to implement Drawer Menu.

✔️MainActivity.kt

package com.freelifemakers.drawermenu

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.freelifemakers.drawermenu.ui.theme.DrawerMenuTheme
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DrawerMenuTheme {
                DrawerMenuApp()
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DrawerMenuApp() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    // 메뉴 목록 / menu list
    val menuItems = listOf("Home", "Search", "Settings")
    var selectedMenu by remember { mutableStateOf(menuItems[0]) }

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet {
                Spacer(modifier = Modifier.height(24.dp))
                Text(
                    text = "Menu",
                    style = MaterialTheme.typography.titleLarge,
                    modifier = Modifier.padding(start = 16.dp, bottom = 16.dp)
                )
                menuItems.forEach { item ->
                    NavigationDrawerItem(
                        label = { Text(item) },
                        selected = item == selectedMenu,
                        onClick = {
                            selectedMenu = item
                            scope.launch { drawerState.close() }
                        },
                        modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                    )
                }
            }
        }
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text(selectedMenu) },
                    navigationIcon = {
                        IconButton(onClick = {
                            scope.launch { drawerState.open() }
                        }) {
                            Icon(Icons.Default.Menu, contentDescription = "Menu")
                        }
                    }
                )
            }
        ) { innerPadding ->
            Box(
                modifier = Modifier
                    .padding(innerPadding)
                    .fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Column{
                    //Text("메뉴테스트")
                    // 선택된 메뉴에 따라 다른 화면 표시
                    when (selectedMenu) {
                        "Home" -> HomeScreen()
                        "Search" -> SearchScreen()
                        "Settings" -> SettingsScreen()
                    }
                }
            }
        }
    }
}

@Composable
fun HomeScreen() {
    Text("홈 화면입니다./Home Screen")
}

@Composable
fun SearchScreen() {
    Text("검색 화면입니다./Search Screen")
}

@Composable
fun SettingsScreen() {
    Text("설정 화면입니다./Setting Screen")
}

@Preview(showBackground = true)
@Composable
fun DrawerMenuPreview() {
    DrawerMenuTheme {
        DrawerMenuApp()
    }
}

✔️ScreenShot