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

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/navigation/BitwardenNavigationRail.kt

@@ -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,
             ),
         ) {

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/scaffold/BitwardenScaffold.kt

@@ -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,