diff --git a/composeApp/src/wasmJsMain/kotlin/com/wespot/web/WeSpotService.kt b/composeApp/src/wasmJsMain/kotlin/com/wespot/web/WeSpotService.kt index ba67e40..6e424bd 100644 --- a/composeApp/src/wasmJsMain/kotlin/com/wespot/web/WeSpotService.kt +++ b/composeApp/src/wasmJsMain/kotlin/com/wespot/web/WeSpotService.kt @@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.NavigationBar @@ -16,6 +17,7 @@ import androidx.compose.material3.Text import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp import com.wespot.web.about.AboutScreen import com.wespot.web.designsystem.component.WSTopBar import com.wespot.web.designsystem.theme.StaticTypography @@ -77,17 +79,22 @@ fun HomeTopNavigationTab( selectedIndex: Int, onSelected: (Int) -> Unit, ) { - NavigationBar(containerColor = WeSpotThemeManager.colors.naviColor) { - Row( - horizontalArrangement = Arrangement.SpaceAround, - verticalAlignment = Alignment.CenterVertically, - ) { - TopNavigationTabState.entries.forEachIndexed { index, state -> - TabItem( - title = state.title, - selected = selectedIndex == index, - onClick = { onSelected(index) }, - ) + Box( + modifier = Modifier.fillMaxWidth(), + contentAlignment = Alignment.Center, + ) { + NavigationBar(containerColor = WeSpotThemeManager.colors.backgroundColor) { + Row( + horizontalArrangement = Arrangement.spacedBy(20.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + TopNavigationTabState.entries.forEachIndexed { index, state -> + TabItem( + title = state.title, + selected = selectedIndex == index, + onClick = { onSelected(index) }, + ) + } } } }