Patterns from production · Navigation

Site switcher

Use openvibe-shared/site-switcher.js and the shared navbar trigger.

Site switcherLive demo

Try the controls to see the rule.

The rule

Open the shared site switcher from the single site navbar. Keep its focus, placement, and close behavior consistent across every page.

Tokens used

  • size.tap44px
  • motion.duration.base260ms
  • motion.easing.standardcubic-bezier(.2,.7,.2,1)
  • space.md12px

Native spec · generated from this pattern and the shared token registry

SwiftUI
struct OvSiteSwitcher: View {
    let status: String
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    var body: some View {
        HStack(spacing: OvScale.spaceMd) {
            Text(status).font(.body)
        }
        .frame(minHeight: OvScale.sizeTap)
        .animation(reduceMotion ? .none : .easeOut(duration: OvScale.motionDurationBase), value: status)
    }
}
// Tokens: size.tap=44px, motion.duration.base=260ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), space.md=12px
Compose
@Composable
fun OvSiteSwitcher(status: String, reduceMotion: Boolean) {
    Row(
        modifier = Modifier.defaultMinSize(minHeight = OvScale.SizeTap),
        horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceMd),
    ) {
        Text(status, style = MaterialTheme.typography.bodyMedium)
    }
    // Apply motion only when !reduceMotion.
}
// Tokens: size.tap=44px, motion.duration.base=260ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), space.md=12px