[HowTo] NavigationRail using Voyager

[jeffreyrajanofficial]

Hello, I'm currently working on developing a desktop application interface, and I'm looking to implement a navigation rail similar to the one described in the NavigationRail documentation. However, I'm facing some challenges in finding a suitable solution for this specific requirement. Kindly help me with an example.

[RecodeLiner]

So there's nothing specific:

@ExperimentalMaterial3Api
@Composable
fun mediumScreen() {
    val navigator = LocalNavigator.currentOrThrow
    Row(modifier = Modifier.fillMaxSize()) {
        NavigationRail {
            ScreenList.screens.forEach { item ->
                val selected = item.screen.key == navigator.lastItem.key
                NavigationRailItem(
                    selected = selected,
                    onClick = {
                        navigator.push(item.screen)
                    },
                    label = {
                        Text(
                            text = getString(item.name),
                            fontWeight = FontWeight.SemiBold,
                        )
                    },
                    icon = {
                        Icon(
                            imageVector = if (selected) {
                                item.filledIcon
                            } else {
                                item.outlinedIcon
                            },
                            contentDescription = "Icon",
                        )
                    },
                    alwaysShowLabel = false
                )
            }
        }
        Scaffold {
            Box(modifier = Modifier.padding(it)) {
                navigator.lastItem.Content()
            }
        }
    }
}

Very similar with the standard android solution

May be also useful:

@OptIn(ExperimentalMaterial3WindowSizeClassApi::class, ExperimentalMaterial3Api::class)
@Composable
internal fun setupUI() {
    val widthSizeClass = calculateWindowSizeClass().widthSizeClass
    Navigator(
        screen = MainScreen()
    ) {
        when (widthSizeClass) {
            WindowWidthSizeClass.Compact -> {
                navBar()
            }

            WindowWidthSizeClass.Medium -> {
                mediumScreen()
            }

            WindowWidthSizeClass.Expanded -> {
                expandedScreen()
            }
        }
    }
}