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,
@@ -137,10 +144,28 @@ fun SampleNavigableListDetailPaneScaffoldFull() {
             }
         },
         detailPane = {
-            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")
+                    }
+                }
+                AnimatedPane {
+                    // Show the detail pane content if selected item is available
+                    scaffoldNavigator.currentDestination?.contentKey?.let {
+                        MyDetails(it)
+                    }
                 }
             }
         },