PM-19812: Navigation Rail design feedback (#4977)

This commit is contained in:
David Perez
2025-04-03 12:37:03 -05:00
committed by GitHub
parent 291c568583
commit 5d4df86bc9
2 changed files with 16 additions and 3 deletions

View File

@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.displayCutout
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.union
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.layout.windowInsetsPadding
@@ -18,9 +19,11 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.unit.dp
import com.x8bit.bitwarden.ui.platform.base.util.endDivider
import com.x8bit.bitwarden.ui.platform.base.util.toDp
import com.x8bit.bitwarden.ui.platform.components.model.NavigationItem
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
import kotlinx.collections.immutable.ImmutableList
@@ -37,10 +40,13 @@ fun BitwardenNavigationRail(
windowInsets: WindowInsets = NavigationRailDefaults.windowInsets
.union(WindowInsets.displayCutout.only(WindowInsetsSides.Start)),
) {
val density = LocalDensity.current
Surface(
color = BitwardenTheme.colorScheme.background.secondary,
contentColor = Color.Unspecified,
modifier = modifier.endDivider(),
modifier = modifier.endDivider(
paddingTop = WindowInsets.statusBars.getTop(density).toDp(density),
),
) {
Column(
modifier = Modifier
@@ -51,7 +57,7 @@ fun BitwardenNavigationRail(
.selectableGroup(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(
space = 4.dp,
space = 16.dp,
alignment = Alignment.CenterVertically,
),
) {

View File

@@ -39,6 +39,7 @@ import androidx.compose.ui.platform.testTag
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTagsAsResourceId
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import com.x8bit.bitwarden.ui.platform.base.util.toDp
import com.x8bit.bitwarden.ui.platform.components.model.BitwardenPullToRefreshState
import com.x8bit.bitwarden.ui.platform.components.model.ScaffoldNavigationData
@@ -193,7 +194,13 @@ private fun ScaffoldNavigationRail(
navigationData: ScaffoldNavigationData,
modifier: Modifier = Modifier,
) {
Box(modifier = modifier.fillMaxHeight()) {
// We set the z-index to 1f in order to make sure the content transitions
// animate in under the navigation rail.
Box(
modifier = modifier
.fillMaxHeight()
.zIndex(zIndex = 1f),
) {
var appBarWidthPx by remember { mutableIntStateOf(0) }
BitwardenNavigationRail(
navigationItems = navigationData.navigationItems,