# Sidebar Visual Affordance Standards

## Problem

User reported: "I can't see icons or anything" on the sidebar. Investigation revealed:
- Default icon color was `#6D6D6D` (medium gray on dark background) — ~3.5:1 contrast ratio, barely visible
- No background highlight on focus — only a 10sp shimmer label as visual feedback
- No selected-state indicator — the active screen's icon turned white but with no background difference

## Fix Applied June 2026

### Constants
```kotlin
private val IconColorDefault = Color.White.copy(alpha = 0.55f)  // was #6D6D6D
private val IconColorFocused = Color.White
private val IconColorSelected = Color.White
private val FocusBarColor = Color(0xFFE50914)   // Netflix red left bar
private val FocusBarWidth = 3.dp
```

### NavIcon structure before
```kotlin
Column {
    Icon(...)
    AnimatedVisibility(focused) { Label(shimmer) }
}
```

### NavIcon structure after
```kotlin
Box(
    .background(bgColor)          // animated via animateColorAsState
    .drawBehind {                  // left accent bar for selected
        if (selected) drawRect(FocusBarColor, topLeft, Size(barWidth, height))
    }
    .focusable(true)
    .clickable(...)
    .semantics(...)
) {
    Column {
        Icon(...)
        AnimatedVisibility(focused) { Label(shimmer) }
    }
}
```

### Color animation
```kotlin
val iconTint by animateColorAsState(
    targetValue = when {
        focused -> Color.White
        selected -> Color.White
        else -> Color.White.copy(alpha = 0.55f)
    }, tween(180), label = "iconTint"
)

val bgColor by animateColorAsState(
    targetValue = when {
        focused -> Color.White.copy(alpha = 0.12f)
        selected -> Color.White.copy(alpha = 0.06f)
        else -> Color.Transparent
    }, tween(180), label = "navBg"
)
```

## Design Rationale

- **Default brightness 0.55**: Matches Apple TV/Google TV sidebar icon treatment. Visible but unobtrusive.
- **Left accent bar**: Standard across Netflix, Disney+, and Google TV. Red (#E50914) matches Unspooled's accent color. Only shown for the selected item, not all focused items.
- **Focus background**: 12% white overlay on focus gives a "glowing" feel without overwhelming the sidebar's glass aesthetic. 6% for selected (non-focused) provides a subtle persistence cue.
- **180ms animation**: Snappy enough to feel responsive, slow enough to avoid flicker during rapid D-pad navigation.

## Imports Required
```kotlin
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.geometry.Size
// Size is used as unqualified alias inside drawBehind DrawScope
```