{"id":2710,"date":"2025-11-11T16:51:46","date_gmt":"2025-11-11T07:51:46","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=2710"},"modified":"2025-11-22T10:00:16","modified_gmt":"2025-11-22T01:00:16","slug":"composedrawer-menu","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/11\/11\/composedrawer-menu\/","title":{"rendered":"[Compose]Drawer Menu"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb Drawer Menu\ub97c swift\uc5d0\uc11c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4<br>How to implement a Drawer Menu in Swift<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb Jetpack Compose\uc5d0\uc11c\ub294 Drawer Menu\ub97c \uad6c\ud604\ud558\uae30\uc704\ud574\uc11c ModalNavigationDrawer\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<br>Jetpack Compose uses ModalNavigationDrawer to implement Drawer Menu.<\/p>\n\n\n\n<p>\u2714\ufe0fMainActivity.kt<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>package com.freelifemakers.drawermenu\n\nimport android.os.Bundle\nimport androidx.activity.ComponentActivity\nimport androidx.activity.compose.setContent\nimport androidx.activity.enableEdgeToEdge\nimport androidx.compose.foundation.layout.*\nimport androidx.compose.material.icons.Icons\nimport androidx.compose.material.icons.filled.Menu\nimport androidx.compose.material3.*\nimport androidx.compose.runtime.*\nimport androidx.compose.ui.Alignment\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.tooling.preview.Preview\nimport androidx.compose.ui.unit.dp\nimport com.freelifemakers.drawermenu.ui.theme.DrawerMenuTheme\nimport kotlinx.coroutines.launch\n\nclass MainActivity : ComponentActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        enableEdgeToEdge()\n        setContent {\n            DrawerMenuTheme {\n                DrawerMenuApp()\n            }\n        }\n    }\n}\n\n@OptIn(ExperimentalMaterial3Api::class)\n@Composable\nfun DrawerMenuApp() {\n    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)\n    val scope = rememberCoroutineScope()\n\n    \/\/ \uba54\ub274 \ubaa9\ub85d \/ menu list\n    val menuItems = listOf(\"Home\", \"Search\", \"Settings\")\n    var selectedMenu by remember { mutableStateOf(menuItems&#91;0]) }\n\n    ModalNavigationDrawer(\n        drawerState = drawerState,\n        drawerContent = {\n            ModalDrawerSheet {\n                Spacer(modifier = Modifier.height(24.dp))\n                Text(\n                    text = \"Menu\",\n                    style = MaterialTheme.typography.titleLarge,\n                    modifier = Modifier.padding(start = 16.dp, bottom = 16.dp)\n                )\n                menuItems.forEach { item -&gt;\n                    NavigationDrawerItem(\n                        label = { Text(item) },\n                        selected = item == selectedMenu,\n                        onClick = {\n                            selectedMenu = item\n                            scope.launch { drawerState.close() }\n                        },\n                        modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)\n                    )\n                }\n            }\n        }\n    ) {\n        Scaffold(\n            topBar = {\n                TopAppBar(\n                    title = { Text(selectedMenu) },\n                    navigationIcon = {\n                        IconButton(onClick = {\n                            scope.launch { drawerState.open() }\n                        }) {\n                            Icon(Icons.Default.Menu, contentDescription = \"Menu\")\n                        }\n                    }\n                )\n            }\n        ) { innerPadding -&gt;\n            Box(\n                modifier = Modifier\n                    .padding(innerPadding)\n                    .fillMaxSize(),\n                contentAlignment = Alignment.Center\n            ) {\n                Column{\n                    \/\/Text(\"\uba54\ub274\ud14c\uc2a4\ud2b8\")\n                    \/\/ \uc120\ud0dd\ub41c \uba54\ub274\uc5d0 \ub530\ub77c \ub2e4\ub978 \ud654\uba74 \ud45c\uc2dc\n                    when (selectedMenu) {\n                        \"Home\" -&gt; HomeScreen()\n                        \"Search\" -&gt; SearchScreen()\n                        \"Settings\" -&gt; SettingsScreen()\n                    }\n                }\n            }\n        }\n    }\n}\n\n@Composable\nfun HomeScreen() {\n    Text(\"\ud648 \ud654\uba74\uc785\ub2c8\ub2e4.\/Home Screen\")\n}\n\n@Composable\nfun SearchScreen() {\n    Text(\"\uac80\uc0c9 \ud654\uba74\uc785\ub2c8\ub2e4.\/Search Screen\")\n}\n\n@Composable\nfun SettingsScreen() {\n    Text(\"\uc124\uc815 \ud654\uba74\uc785\ub2c8\ub2e4.\/Setting Screen\")\n}\n\n@Preview(showBackground = true)\n@Composable\nfun DrawerMenuPreview() {\n    DrawerMenuTheme {\n        DrawerMenuApp()\n    }\n}\n<\/code><\/pre>\n\n\n\n<p>\u2714\ufe0fScreenShot<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"464\" height=\"1024\" data-id=\"2714\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-drawer-464x1024.png\" alt=\"\" class=\"wp-image-2714\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-drawer-464x1024.png 464w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-drawer-136x300.png 136w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-drawer-696x1536.png 696w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-drawer.png 700w\" sizes=\"auto, (max-width: 464px) 100vw, 464px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"463\" height=\"1024\" data-id=\"2715\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-home-463x1024.png\" alt=\"\" class=\"wp-image-2715\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-home-463x1024.png 463w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-home-136x300.png 136w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-home-694x1536.png 694w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/compose-home.png 698w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"[Kotlin compose ,Swift] DrawerMenu\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/KNNgpK_lSZ0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49\ud83c\udffb Drawer Menu\ub97c swift\uc5d0\uc11c \uad6c\ud604\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4How to implement a Drawer Menu in Swift \ud83d\udc49\ud83c\udffb Jetpack Compose\uc5d0\uc11c\ub294 Drawer Menu\ub97c \uad6c\ud604\ud558\uae30\uc704\ud574\uc11c ModalNavigationDrawer\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.Jetpack Compose uses ModalNavigationDrawer to implement Drawer Menu. \u2714\ufe0fMainActivity.kt \u2714\ufe0fScreenShot<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,1],"tags":[],"class_list":["post-2710","post","type-post","status-publish","format-standard","hentry","category-kotlin","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=2710"}],"version-history":[{"count":6,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2710\/revisions"}],"predecessor-version":[{"id":2777,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2710\/revisions\/2777"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=2710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=2710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}