Navigation item

• Layout: Supports both collapsed (icon only) and expanded (icon + text) states.
• Selection State: Visually indicates when it’s the currently active navigation item.
• Density: Offers a dense mode for a more compact appearance.
• Theming: Uses SpatialTheme and SideNavItemDefaults for background and foreground colors based on selection state.

• Composable: SpatialSideNavItem
• Key Parameters:
  • icon: @Composable () -> Unit: The icon representing the navigation destination (required).
  • onClick: () -> Unit: Callback invoked when the item is clicked to trigger navigation.
  • primaryLabel: String: The main text label for the item (visible when not collapsed).
  • secondaryLabel: String? = null: Optional secondary text label (visible when not collapsed and not dense).
  • selected: Boolean = false: Indicates if this item is the currently active/selected navigation destination. Controls visual styling.
  • collapsed: Boolean = false: If true, only the icon is shown in a compact square/circular layout. If false, the icon and labels are shown.
  • dense: Boolean = false: If true, uses smaller vertical padding and shape, suitable for more compact lists. Overrides secondaryLabel visibility.
  • showExpandedIcon: Boolean = true: If true (and not collapsed), the icon is shown alongside the text. If false, only the text is shown when expanded.
  • modifier: Modifier = Modifier
  • interactionSource: MutableInteractionSource: For interaction state handling.

import com.meta.spatial.uiset.navigation.SpatialSideNavItem
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Icon
import androidx.compose.runtime.*
import com.meta.spatial.uiset.theme.icons.SpatialIcons
import com.meta.spatial.uiset.theme.icons.regular.* // Import desired icons

// Example state management for selected item
var selectedIndex by remember { mutableIntStateOf(0) }
val navItems = listOf(
    "Home" to SpatialIcons.Regular.Home,
    "Explore" to SpatialIcons.Regular.Explore,
    "Library" to SpatialIcons.Regular.Library,
    "Settings" to SpatialIcons.Regular.Settings
)

Column {
    navItems.forEachIndexed { index, (label, iconVector) ->
        SpatialSideNavItem(
            primaryLabel = label,
            icon = { Icon(iconVector, contentDescription = label) },
            selected = selectedIndex == index,
            onClick = { selectedIndex = index },
            // Try changing these:
            // collapsed = true,
            // dense = true,
        )
        if (index < navItems.size - 1) {
            Spacer(Modifier.height(8.dp)) // Spacing between items
        }
    }
}

• Collapsed: When collapsed = true, the item renders as a small square/circle (depending on dense) containing only the icon. This is useful for navigation rails that expand on hover or click.
• Dense: When dense = true, the item uses less vertical space and a more rounded shape, suitable for fitting more items vertically. The secondaryLabel is ignored in dense mode.