# NavigationRailWrapper Pattern

Conditional navigation rail renderer for NexStream — swaps between `NexSidebar` (classic) and `CircularRailNavigation` (experimental) based on user preference.

## Pattern

```kotlin
@Composable
fun NavigationRailWrapper(
    navController: NavController,          // REQUIRED — no LocalNavController
    selectedRoute: String,
    sidebarItems: List<NexSidebarItem>,
    circularItems: List<CircularNavItem>,
    content: @Composable () -> Unit,
    viewModel: SettingsViewModel = hiltViewModel(),
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    val useCircular = uiState.navigationStyle == "CIRCULAR_EXPERIMENTAL"

    var sidebarExpanded by remember { mutableStateOf(false) }
    var contentHasFocus by remember { mutableStateOf(true) }
    val sidebarFocusRequester = remember { FocusRequester() }

    Row(modifier = Modifier.fillMaxSize()) {
        if (useCircular) {
            CircularRailNavigation(
                items = circularItems,
                selectedRoute = selectedRoute,
                isExpanded = sidebarExpanded,
                onExpandedChange = { if (contentHasFocus) sidebarExpanded = it },
                onNavigate = { route -> sidebarNavigate(navController, route) },
                onNavigateToContent = { sidebarExpanded = false; contentHasFocus = true },
                modifier = Modifier.width(64.dp),
            )
        } else {
            NexSidebar(
                items = sidebarItems,
                selectedRoute = selectedRoute,
                isExpanded = sidebarExpanded,
                onExpandedChange = { if (contentHasFocus) sidebarExpanded = it },
                focusRequester = sidebarFocusRequester,
                onNavigate = { route -> sidebarNavigate(navController, route) },
                onNavigateToContent = { sidebarExpanded = false; contentHasFocus = true },
            )
        }

        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxHeight()
                .onFocusChanged { f -> contentHasFocus = f.isFocused || f.hasFocus }
        ) {
            content()
        }
    }
}
```

## Usage
```kotlin
val sidebarItems = remember { listOf(NexSidebarItem(...)) }
val circularItems = remember { buildCircularItems(sidebarItems) }

NavigationRailWrapper(
    navController = navController,
    selectedRoute = "home",
    sidebarItems = sidebarItems,
    circularItems = circularItems,
    content = { /* main content */ }
)
```

## Screens Using This Pattern
- `NetflixHomeScreen` — classic + circular rail
- `NetflixSearchScreen` — classic + circular rail (with virtual keyboard)
- `CatalogBrowserScreen` — classic + circular rail (via `navController` param)
- `MoviesScreen` → `CatalogBrowserScreen` → `NavigationRailWrapper`
- `TvShowsScreen` → `CatalogBrowserScreen` → `NavigationRailWrapper`
- `MyListScreen` → `CatalogBrowserScreen` → `NavigationRailWrapper`

## Pitfalls
- `navController` is REQUIRED parameter — no default (no `LocalNavController` in this Compose version)
- `sidebarNavigate` import: `com.nexstream.app.ui.components.netflix.sidebarNavigate`
- `Modifier.weight()` requires `androidx.compose.foundation.layout.weight`
- `contentHasFocus` prevents sidebar from expanding when content has focus
- `buildCircularItems()` converts `List<NexSidebarItem>` → `List<CircularNavItem>`