Merge pull request #804 from AJIEKCX/child-panels-windowsizeclass-doc

Add an example of using window size classes with ChildPanelsMode

docs/extensions/compose.md

@@ -294,12 +294,37 @@ The default `HorizontalChildPanelsLayout` layout places child components (panels
 - If the `mode` is `DUAL`, the Main panel is always displayed on the left side, and then the Details and the Extra panels are displayed in a stack on the right side (next to the Main panel).
 - If the `mode` is `TRIPLE`, all panels are displayed horizontally side by side.
 
+You can use window size classes from the `material3-window-size-class` package to determine which `ChildPanelsMode` should be used.
+
+```kotlin title="WindowSizeClass example"
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass.Companion.Expanded
+import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
+import com.arkivanov.decompose.router.panels.ChildPanelsMode
+import com.arkivanov.decompose.router.panels.ChildPanelsMode.SINGLE
+import com.arkivanov.decompose.router.panels.ChildPanelsMode.DUAL
+
+@Composable
+fun ChildPanelsModeChangedEffect(onModeChanged: (ChildPanelsMode) -> Unit) {
+    val windowSize = calculateWindowSizeClass()
+    val mode = if (windowSize.widthSizeClass < Expanded) SINGLE else DUAL
+
+    DisposableEffect(mode) {
+        onModeChanged(mode)
+        onDispose {}
+    }
+}
+```
+
 ```kotlin title="Basic example"
 import androidx.compose.runtime.Composable
 import com.arkivanov.decompose.extensions.compose.experimental.panels.ChildPanels
+import com.arkivanov.decompose.router.panels.ChildPanelsMode
 
 @Composable
 fun PanelsContent(component: PanelsComponent) {
+    ChildPanelsModeChangedEffect(component::setMode)
+
     ChildPanels(
         panels = component.panels,
         mainChild = { MainContent(it.instance) },
@@ -327,9 +352,12 @@ import com.arkivanov.decompose.extensions.compose.experimental.stack.animation.f
 import com.arkivanov.decompose.extensions.compose.experimental.stack.animation.plus
 import com.arkivanov.decompose.extensions.compose.experimental.stack.animation.scale
 import com.arkivanov.decompose.extensions.compose.stack.animation.predictiveback.materialPredictiveBackAnimatable
+import com.arkivanov.decompose.router.panels.ChildPanelsMode
 
 @Composable
 fun PanelsContent(component: PanelsComponent) {
+    ChildPanelsModeChangedEffect(component::setMode)
+
     ChildPanels(
         panels = component.panels,
         mainChild = { MainContent(it.instance) },