Navigation item

• Layout: collapsed renders the icon alone, centered in a square row. The expanded row shows the icon, the primary label, and an optional secondary label.
• Density: dense uses the 40 dp row height and the button shape. The standard row is 56 dp and uses the menu shape.
• Selection: selected marks the current destination and switches the row to the selected colors.
• Icon control: showExpandedIcon drops the icon from an expanded row, which leaves a text-only destination.
• Theming: Colors come from SideNavItemDefaults, and row heights, icon size, padding, and spacing come from UiSetTheme.dimensions.navigation.
• Accessibility: A collapsed row stays at least a 48 dp target, matching the Android design requirements.

import androidx.compose.foundation.layout.Column
import metavrx.uiset.compose.Icon
import metavrx.uiset.compose.navigation.SideNavItem
import metavrx.uiset.compose.theme.icons.Icons

val destinations = listOf(
    "Home" to Icons.Regular.Home,
    "Library" to Icons.Regular.Library,
    "Store" to Icons.Regular.Store,
    "Settings" to Icons.Regular.Settings,
)
var selectedIndex by remember { mutableIntStateOf(0) }

Column {
    destinations.forEachIndexed { index, (label, icon) ->
        SideNavItem(
            icon = { Icon(icon, contentDescription = null) },
            onClick = { selectedIndex = index },
            primaryLabel = label,
            selected = index == selectedIndex,
        )
    }
}

SideNavItem(
    icon = { Icon(Icons.Regular.Library, contentDescription = "Library") },
    onClick = { /* ... */ },
    primaryLabel = "Library",
    collapsed = true,
    dense = true,
)

• icon: @Composable () -> Unit: The destination icon, and the only content of a collapsed row.
• onClick: () -> Unit: Invoked when the destination is chosen.
• primaryLabel: String: The destination name.
• secondaryLabel: String? = null: Supporting text below the primary label.
• collapsed: Boolean = false: Renders the icon-only form.
• dense: Boolean = false: Uses the shorter row height and the button shape.
• showExpandedIcon: Boolean = true: Set to false for a text-only expanded row.
• selected: Boolean = false: Marks the current destination.
• enabled: Boolean = true: Controls interactivity.
• colors: SideNavItemColors: Selected, unselected, and disabled colors. Defaults come from SideNavItemDefaults.
• dimensions: NavigationDimensions: Row heights, icon size, padding, and spacing.
• modifier: Modifier = Modifier: Applied to the full interaction target.