Skip to content

Commit ab7e32a

Browse files
jakerosemanjakeroseman
committed
Basic navigation drawer examples
1 parent 68fef6e commit ab7e32a

File tree

3 files changed

+188
-1
lines changed

3 files changed

+188
-1
lines changed

‎compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import com.example.compose.snippets.components.DialogExamples
4242
import com.example.compose.snippets.components.DividerExamples
4343
import com.example.compose.snippets.components.FloatingActionButtonExamples
4444
import com.example.compose.snippets.components.MenusExamples
45+
import com.example.compose.snippets.components.NavigationDrawerExamples
4546
import com.example.compose.snippets.components.PartialBottomSheet
4647
import com.example.compose.snippets.components.ProgressIndicatorExamples
4748
import com.example.compose.snippets.components.ScaffoldExample
@@ -113,6 +114,7 @@ class SnippetsActivity : ComponentActivity() {
113114
TopComponentsDestination.DatePickerExamples -> DatePickerExamples()
114115
TopComponentsDestination.CarouselExamples -> CarouselExamples()
115116
TopComponentsDestination.MenusExample -> MenusExamples()
117+
TopComponentsDestination.NavigationDrawerExamples -> NavigationDrawerExamples()
116118
}
117119
}
118120
}

‎compose/snippets/src/main/java/com/example/compose/snippets/components/NavigationDrawer.kt‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
package com.example.compose.snippets.components
2+
3+
import androidx.compose.animation.AnimatedVisibility
4+
import androidx.compose.foundation.layout.Column
5+
import androidx.compose.foundation.layout.ColumnScope
6+
import androidx.compose.foundation.layout.fillMaxSize
7+
import androidx.compose.foundation.layout.fillMaxWidth
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.material.icons.Icons
10+
import androidx.compose.material.icons.filled.KeyboardArrowDown
11+
import androidx.compose.material.icons.filled.KeyboardArrowUp
12+
import androidx.compose.material3.Button
13+
import androidx.compose.material3.HorizontalDivider
14+
import androidx.compose.material3.Icon
15+
import androidx.compose.material3.ModalDrawerSheet
16+
import androidx.compose.material3.ModalNavigationDrawer
17+
import androidx.compose.material3.NavigationDrawerItem
18+
import androidx.compose.material3.Text
19+
import androidx.compose.runtime.Composable
20+
import androidx.compose.runtime.getValue
21+
import androidx.compose.runtime.mutableStateOf
22+
import androidx.compose.runtime.remember
23+
import androidx.compose.runtime.saveable.rememberSaveable
24+
import androidx.compose.runtime.setValue
25+
import androidx.compose.ui.Modifier
26+
import androidx.compose.ui.text.style.TextAlign
27+
import androidx.compose.ui.tooling.preview.Preview
28+
import androidx.compose.ui.unit.dp
29+
30+
enum class ExampleStrings(val description: String){
31+
SIMPLE("simple navigation drawer example"),
32+
NESTED("navigation drawer with nested items")
33+
}
34+
35+
@Composable
36+
fun NavigationDrawerExamples(){
37+
var currentExample by remember { mutableStateOf<ExampleStrings?>(null) }
38+
39+
if (currentExample == null){
40+
Column(){
41+
Text(
42+
text = "Select which example you'd like to see.",
43+
textAlign = TextAlign.Center,
44+
modifier = Modifier
45+
.fillMaxWidth()
46+
.padding(16.dp)
47+
)
48+
49+
Button(onClick = {currentExample = ExampleStrings.SIMPLE}){
50+
Text("Simple navigation drawer.")
51+
}
52+
Button(onClick = {currentExample = ExampleStrings.NESTED}){
53+
Text("Navigation drawer with nested items.")
54+
}
55+
}
56+
57+
return
58+
}
59+
60+
Column(modifier = Modifier.fillMaxSize()){
61+
Text(
62+
text = "Swipe from left to open the ${currentExample!!.description}.",
63+
textAlign = TextAlign.Center,
64+
modifier = Modifier
65+
.fillMaxWidth()
66+
.padding(16.dp)
67+
)
68+
}
69+
70+
when (currentExample){
71+
null,
72+
ExampleStrings.SIMPLE -> SimpleNavigationDrawerExample()
73+
ExampleStrings.NESTED -> NestedNavigationDrawerExample()
74+
}
75+
}
76+
77+
@Preview
78+
@Composable
79+
private fun NavigationDrawerExamplesPreview(){
80+
NavigationDrawerExamples()
81+
}
82+
83+
// [START android_compose_components_navigationdrawergroupitem]
84+
@Composable
85+
fun NavigationDrawerGroupItem(
86+
label: @Composable () -> Unit,
87+
content: @Composable ColumnScope.() -> Unit,
88+
) {
89+
var isExpanded by rememberSaveable { mutableStateOf(false) }
90+
91+
NavigationDrawerItem(
92+
label = label,
93+
selected = isExpanded,
94+
onClick = { isExpanded = !isExpanded },
95+
icon = {
96+
Icon(
97+
imageVector = if (isExpanded) Icons.Default.KeyboardArrowUp else Icons.Default.KeyboardArrowDown,
98+
contentDescription = if (isExpanded) "Collapse" else "Expand"
99+
)
100+
}
101+
)
102+
AnimatedVisibility(visible = isExpanded) {
103+
Column(modifier = Modifier.padding(start = 16.dp)) {
104+
content()
105+
}
106+
}
107+
}
108+
// [END android_compose_components_navigationdrawergroupitem]
109+
110+
// [START android_compose_components_simplenavigationdrawerexample]
111+
@Composable
112+
fun SimpleNavigationDrawerExample() {
113+
ModalNavigationDrawer(
114+
drawerContent = {
115+
ModalDrawerSheet {
116+
NavigationDrawerItem(
117+
label = { Text(text = "Item 1") },
118+
selected = false,
119+
onClick = { /* Do something... */ }
120+
)
121+
NavigationDrawerItem(
122+
label = { Text(text = "Item 2") },
123+
selected = false,
124+
onClick = { /* Do something... */ }
125+
)
126+
}
127+
}
128+
) {
129+
// Screen content
130+
}
131+
}
132+
// [END android_compose_components_simplenavigationdrawerexample]
133+
134+
// [START android_compose_components_nestednavigationdrawerexample]
135+
@Composable
136+
fun NestedNavigationDrawerExample() {
137+
ModalNavigationDrawer(
138+
drawerContent = {
139+
ModalDrawerSheet {
140+
Text("Drawer Title", modifier = Modifier.padding(16.dp))
141+
HorizontalDivider()
142+
NavigationDrawerItem(
143+
label = { Text(text = "Drawer Item") },
144+
selected = false,
145+
onClick = { /* Do something... */ }
146+
)
147+
NavigationDrawerGroupItem(
148+
label = { Text("Drawer Group Item") },
149+
content = {
150+
NavigationDrawerItem(
151+
label = { Text(text = "Drawer Item") },
152+
selected = false,
153+
onClick = { /* Do something... */ }
154+
)
155+
NavigationDrawerGroupItem(
156+
label = { Text("Nested Group Item") },
157+
content = {
158+
NavigationDrawerItem(
159+
label = { Text(text = "Inner Drawer Item") },
160+
selected = false,
161+
onClick = { /* Do something... */ }
162+
)
163+
NavigationDrawerItem(
164+
label = { Text(text = "Inner Drawer Item") },
165+
selected = false,
166+
onClick = { /* Do something... */ }
167+
)
168+
}
169+
)
170+
NavigationDrawerItem(
171+
label = { Text(text = "Drawer Item") },
172+
selected = false,
173+
onClick = { /* Do something... */ }
174+
)
175+
}
176+
)
177+
}
178+
}
179+
) {
180+
// Screen content
181+
}
182+
}
183+
// [END android_compose_components_nestednavigationdrawerexample]
184+

‎compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,6 @@ enum class TopComponentsDestination(val route: String, val title: String) {
4545
TimePickerExamples("timePickerExamples", "Time Pickers"),
4646
DatePickerExamples("datePickerExamples", "Date Pickers"),
4747
CarouselExamples("carouselExamples", "Carousel"),
48-
MenusExample("menusExamples", "Menus")
48+
MenusExample("menusExamples", "Menus"),
49+
NavigationDrawerExamples("navigationDrawerExamples", "Navigation drawer")
4950
}

0 commit comments

Comments
 (0)