Skip to content

Commit 391256b

Browse files
committed
ui(navigation): standardize bar styling and enhance item selection visuals
Remove custom floating card styling, dynamic window inset padding, and clipping modifiers from the bottom NavigationBar to restore standard layout behavior. Remove the explicit zeroed window insets from the NavigationRail as well. Reduce the opacity of the selected indicator color to 60% on both NavigationBarItem and NavigationRailItem components. Update NavigationBarItem labels to use bold font weight when selected.
1 parent d177957 commit 391256b

1 file changed

Lines changed: 35 additions & 21 deletions

File tree

‎shared/src/commonMain/kotlin/com/liftley/sync360/Sync360Root.kt‎

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
package com.liftley.sync360
22

33
import androidx.compose.foundation.layout.Row
4-
import androidx.compose.foundation.layout.WindowInsets
54
import androidx.compose.foundation.layout.consumeWindowInsets
65
import androidx.compose.foundation.layout.fillMaxHeight
76
import androidx.compose.foundation.layout.fillMaxSize
87
import androidx.compose.foundation.layout.padding
9-
import androidx.compose.foundation.layout.windowInsetsPadding
108
import androidx.compose.material3.CenterAlignedTopAppBar
119
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
1210
import androidx.compose.material3.Icon
1311
import androidx.compose.material3.MaterialTheme
1412
import androidx.compose.material3.NavigationBar
15-
import androidx.compose.material3.NavigationBarDefaults
1613
import androidx.compose.material3.NavigationBarItem
14+
import androidx.compose.material3.NavigationBarItemDefaults
1715
import androidx.compose.material3.NavigationRail
1816
import androidx.compose.material3.NavigationRailItem
17+
import androidx.compose.material3.NavigationRailItemDefaults
1918
import androidx.compose.material3.Scaffold
2019
import androidx.compose.material3.Text
2120
import androidx.compose.material3.TopAppBarDefaults
@@ -25,8 +24,8 @@ import androidx.compose.runtime.Composable
2524
import androidx.compose.runtime.LaunchedEffect
2625
import androidx.compose.runtime.getValue
2726
import androidx.compose.ui.Modifier
28-
import androidx.compose.ui.draw.clip
2927
import androidx.compose.ui.keepScreenOn
28+
import androidx.compose.ui.text.font.FontWeight
3029
import androidx.compose.ui.tooling.preview.Preview
3130
import androidx.compose.ui.unit.dp
3231
import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -86,26 +85,34 @@ fun Sync360Root() {
8685
is SendState.Failed -> "Could Not Send"
8786
}
8887

88+
val navigationBarColorWhenSelected = NavigationBarItemDefaults.colors().copy(
89+
selectedIndicatorColor = MaterialTheme.colorScheme.secondaryContainer.copy(
90+
alpha = 0.6f
91+
)
92+
)
93+
94+
val navigationRailColorWhenSelected = NavigationRailItemDefaults.colors().copy(
95+
selectedIndicatorColor = MaterialTheme.colorScheme.secondaryContainer.copy(
96+
alpha = 0.6f
97+
)
98+
)
99+
89100
Scaffold(
90101
bottomBar = {
91102
if (!useNavigationRail) {
92-
NavigationBar(
93-
modifier = Modifier
94-
// 1. Fetch system bar insets dynamically to protect the Android gesture area
95-
.windowInsetsPadding(NavigationBarDefaults.windowInsets)
96-
// 2. Add outer floating padding around the bar (converted from dp)
97-
.padding(horizontal = 32.dp, vertical = 16.dp)
98-
// 3. Clip the corners after padding to create the floating card shape
99-
.clip(MaterialTheme.shapes.extraExtraLarge),
100-
containerColor = MaterialTheme.colorScheme.surface,
101-
// 4. Disable internal inset consumption so our custom modifiers control the shape
102-
windowInsets = WindowInsets(0, 0, 0, 0)
103-
) {
103+
NavigationBar(containerColor = MaterialTheme.colorScheme.surface) {
104104
NavigationBarItem(
105+
colors = navigationBarColorWhenSelected,
105106
onClick = { navigationViewModel.navigateTo(NavScreen.ReceiveScreen) },
106107
selected = navigationViewModel.currentScreen() ==
107108
NavScreen.ReceiveScreen,
108-
label = { Text("Receive") },
109+
label = {
110+
Text(
111+
"Receive", fontWeight = if (navigationViewModel.currentScreen() ==
112+
NavScreen.ReceiveScreen
113+
) FontWeight.Bold else FontWeight.Normal
114+
)
115+
},
109116
icon = {
110117
Icon(
111118
imageVector = Download,
@@ -114,10 +121,17 @@ fun Sync360Root() {
114121
}
115122
)
116123
NavigationBarItem(
124+
colors = navigationBarColorWhenSelected,
117125
onClick = { navigationViewModel.navigateTo(NavScreen.SendScreen) },
118126
selected = navigationViewModel.currentScreen() ==
119127
NavScreen.SendScreen,
120-
label = { Text("Send") },
128+
label = {
129+
Text(
130+
"Send", fontWeight = if (navigationViewModel.currentScreen() ==
131+
NavScreen.SendScreen
132+
) FontWeight.Bold else FontWeight.Normal
133+
)
134+
},
121135
icon = {
122136
Icon(
123137
imageVector = Send,
@@ -164,11 +178,10 @@ fun Sync360Root() {
164178
if (useNavigationRail) {
165179
NavigationRail(
166180
modifier = Modifier.fillMaxHeight(),
167-
containerColor = MaterialTheme.colorScheme.surfaceContainer,
168-
// Scaffold has already supplied the system-bar padding.
169-
windowInsets = WindowInsets(0, 0, 0, 0)
181+
containerColor = MaterialTheme.colorScheme.surfaceContainer
170182
) {
171183
NavigationRailItem(
184+
colors = navigationRailColorWhenSelected,
172185
selected = currentScreen == NavScreen.ReceiveScreen,
173186
onClick = { navigationViewModel.navigateTo(NavScreen.ReceiveScreen) },
174187
icon = {
@@ -181,6 +194,7 @@ fun Sync360Root() {
181194
)
182195

183196
NavigationRailItem(
197+
colors = navigationRailColorWhenSelected,
184198
selected = currentScreen == NavScreen.SendScreen,
185199
onClick = { navigationViewModel.navigateTo(NavScreen.SendScreen) },
186200
icon = {

0 commit comments

Comments
 (0)