feat: adds close button to list-and-detail pane sample. (#683)

* feat: adds close button to list-and-detail pane sample.

Author: telpirion

compose/snippets/src/main/java/com/example/compose/snippets/adaptivelayouts/SampleListDetailPaneScaffold.kt

@@ -25,7 +25,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.Text
 import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
@@ -34,13 +38,15 @@ import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
 import androidx.compose.material3.adaptive.layout.AnimatedPane
 import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
 import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffoldRole
+import androidx.compose.material3.adaptive.layout.PaneAdaptedValue
 import androidx.compose.material3.adaptive.layout.PaneScaffoldDirective
 import androidx.compose.material3.adaptive.navigation.BackNavigationBehavior
 import androidx.compose.material3.adaptive.navigation.NavigableListDetailPaneScaffold
 import androidx.compose.material3.adaptive.navigation.ThreePaneScaffoldPredictiveBackHandler
 import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
@@ -118,6 +124,7 @@ fun SampleNavigableListDetailPaneScaffoldFull() {
     // [START android_compose_adaptivelayouts_sample_list_detail_pane_scaffold_full]
     val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
     val scope = rememberCoroutineScope()
+    val backNavigationBehavior = BackNavigationBehavior.PopUntilScaffoldValueChange
 
     NavigableListDetailPaneScaffold(
         navigator = scaffoldNavigator,
@@ -140,7 +147,25 @@ fun SampleNavigableListDetailPaneScaffoldFull() {
             AnimatedPane {
                 // Show the detail pane content if selected item is available
                 scaffoldNavigator.currentDestination?.contentKey?.let {
-                    MyDetails(it)
+                    Column {
+                        // Allow users to dismiss the detail pane. Use back navigation to
+                        // hide an expanded detail pane.
+                        if (scaffoldNavigator.scaffoldValue[ListDetailPaneScaffoldRole.Detail] == PaneAdaptedValue.Expanded) {
+                            // Material design principles promote the usage of a right-aligned
+                            // close (X) button.
+                            IconButton(
+                                modifier =  Modifier.align(Alignment.End).padding(16.dp),
+                                onClick = {
+                                    scope.launch {
+                                        scaffoldNavigator.navigateBack(backNavigationBehavior)
+                                    }
+                                }
+                            ) {
+                                Icon(Icons.Default.Close, contentDescription = "Close")
+                            }
+                        }
+                        MyDetails(it)
+                    }
                 }
             }
         },
@@ -155,6 +180,7 @@ fun SampleListDetailPaneScaffoldWithPredictiveBackFull() {
     val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
     val customScaffoldDirective = customPaneScaffoldDirective(currentWindowAdaptiveInfo())
     val scope = rememberCoroutineScope()
+    val backNavigationBehavior = BackNavigationBehavior.PopUntilScaffoldValueChange
 
     ThreePaneScaffoldPredictiveBackHandler(
         navigator = scaffoldNavigator,
@@ -183,7 +209,25 @@ fun SampleListDetailPaneScaffoldWithPredictiveBackFull() {
             AnimatedPane {
                 // Show the detail pane content if selected item is available
                 scaffoldNavigator.currentDestination?.contentKey?.let {
-                    MyDetails(it)
+                    Column {
+                        // Allow users to dismiss the detail pane. Use back navigation to
+                        // hide an expanded detail pane.
+                        if (scaffoldNavigator.scaffoldValue[ListDetailPaneScaffoldRole.Detail] == PaneAdaptedValue.Expanded) {
+                            // Material design principles promote the usage of a right-aligned
+                            // close (X) button.
+                            IconButton(
+                                modifier =  Modifier.align(Alignment.End).padding(16.dp),
+                                onClick = {
+                                    scope.launch {
+                                        scaffoldNavigator.navigateBack(backNavigationBehavior)
+                                    }
+                                }
+                            ) {
+                                Icon(Icons.Default.Close, contentDescription = "Close")
+                            }
+                        }
+                        MyDetails(it)
+                    }
                 }
             }
         },