# Glass Blur Sidebar with Haze (NuvioTV ModernSidebarBlurPanel)

## Dependency

```kotlin
// build.gradle.kts
implementation("dev.chrisbanes.haze:haze-android:0.7.3")
```

## Architecture

Three-layer stack:
1. **Content area** → `.haze(state)` — source of the blur
2. **Sidebar panel** → `.hazeChild(state, shape, tint, blurRadius)` — the blurred overlay
3. **HazeState** → shared between both, created once via `remember { HazeState() }`

## Key Imports

```kotlin
import dev.chrisbanes.haze.HazeState
import dev.chrisbanes.haze.haze        // Modifier extension for source
import dev.chrisbanes.haze.hazeChild   // Modifier extension for blurred child
```

## Glass Sidebar Implementation

### Content Area (blur source)

```kotlin
Box(
    modifier = Modifier
        .fillMaxSize()
        .haze(state = sidebarHazeState)  // ← blur source
) {
    content()
}
```

### Sidebar Panel (blurred overlay)

```kotlin
// Only apply hazeChild when expanded (avoids rendering overhead)
val glassBackground = if (isExpanded && expandProgress > 0.5f) {
    Modifier.hazeChild(
        state = hazeState,
        shape = SidebarShape,
        tint = Color.Black.copy(alpha = 0.35f),
        blurRadius = (22f * expandProgress).dp,
        noiseFactor = 0.03f * expandProgress
    )
} else Modifier

Column(
    modifier = Modifier
        .width(width)
        .fillMaxHeight()
        .then(glassBackground)
        .graphicsLayer {
            shape = SidebarShape
            clip = true
            val p = expandProgress
            alpha = p.coerceIn(0f, 1f)
            val s = 0.97f + (0.03f * p)  // NuvioTV scale
            scaleX = s
            scaleY = s
            transformOrigin = TransformOrigin(0f, 0f)
        }
        .clip(SidebarShape)
        .background(verticalGradient)
        .border(1.dp, Color.White.copy(alpha = 0.14f), SidebarShape)
)
```

## NuvioTV Pill Item Style

### Shape
- `RoundedCornerShape(999.dp)` — full pill

### Colors
| State | Background | Border | Text | Icon Circle |
|-------|-----------|--------|------|-------------|
| Selected | White solid | White 0.25 | `#10151F` (dark) | `#E7E2EF` (light) |
| Focused | White 0.16 | White 0.40 | White | `#6A6A74` (grey) |
| Default | Transparent | Transparent | White 60% | `#6A6A74` (grey) |

### Accent Indicator Bar (Lumera pattern, kept as improvement)
```kotlin
val accentBarWidth by animateDpAsState(
    targetValue = if (isSelected) 4.dp else 0.dp,
    animationSpec = tween(200)
)
Box(
    modifier = Modifier
        .width(accentBarWidth)
        .height(32.dp)
        .background(themeSecondary, RoundedCornerShape(topEnd = 2.dp, bottomEnd = 2.dp))
)
```

## Navigation Behavior (preserved from Lumera)

- **LEFT on content** → opens sidebar, requests focus on selected item
- **RIGHT/BACK on sidebar** → closes sidebar, moves focus to content
- **Auto-collapse** → sidebar collapses when navigating to new screen
- **Expand** → sidebar expands on focus (76dp → 280dp)
- **Scale** → sidebar scales 0.97→1.0 during expand animation

## Status (NexStream v0.9.0+)

The `NetflixSideNavigation.kt` has been upgraded with:
- ✅ Haze glass blur (replaces gradient-only background)
- ✅ NuvioTV pill items (RoundedCornerShape 999.dp)
- ✅ White selection backgrounds
- ✅ Scale animation (0.97→1.0)
- ✅ Glass rim border (white 0.14 alpha)
- ✅ Lumera accent indicator bars (preserved)
- ✅ Auto-collapse, LEFT/RIGHT nav (preserved)

## Files

- `app/src/main/java/com/nexstream/app/ui/components/netflix/NetflixSideNavigation.kt`
- `app/build.gradle.kts` — haze dependency