feat: improve navigator bottom sheet design

* Added icons
* Aligned to the left

Co-authored-by: Edward205 <52004020+Edward205@users.noreply.github.com>
This commit is contained in:
Acclorite 2025-12-27 14:02:50 +02:00
parent 959a193e52
commit 7f234a0ba1
No known key found for this signature in database
GPG key ID: 6E54C611F6EE8593
2 changed files with 30 additions and 15 deletions

View file

@ -6,10 +6,13 @@
package ua.acclorite.book_story.ui.navigator
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.outlined.Info
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
@ -32,25 +35,28 @@ fun NavigatorBottomSheet() {
onDismissRequest = { navigatorBottomSheetChannel.trySend(false) },
sheetGesturesEnabled = true
) {
LazyColumn(modifier = Modifier.fillMaxWidth()) {
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
item {
NavigatorBottomSheetItem(
title = stringResource(id = R.string.about_screen),
imageVector = Icons.Outlined.Info,
primary = false,
position = Position.TOP
position = Position.SOLO
) {
navigator.push(AboutScreen)
navigatorBottomSheetChannel.trySend(false)
}
}
item {
Spacer(Modifier.height(18.dp))
}
item {
NavigatorBottomSheetItem(
title = stringResource(id = R.string.settings_screen),
imageVector = Icons.Default.Settings,
primary = true,
position = Position.SOLO
) {
@ -58,10 +64,6 @@ fun NavigatorBottomSheet() {
navigatorBottomSheetChannel.trySend(false)
}
}
item {
Spacer(modifier = Modifier.height(8.dp))
}
}
}
}

View file

@ -8,18 +8,22 @@ package ua.acclorite.book_story.ui.navigator
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.dp
import ua.acclorite.book_story.ui.common.components.common.StyledText
import ua.acclorite.book_story.ui.common.model.Position
@ -27,6 +31,7 @@ import ua.acclorite.book_story.ui.common.model.Position
@Composable
fun NavigatorBottomSheetItem(
title: String,
imageVector: ImageVector,
primary: Boolean,
position: Position,
onClick: () -> Unit
@ -58,7 +63,7 @@ fun NavigatorBottomSheetItem(
}
}
Box(
Row(
modifier = Modifier
.padding(paddingValues)
.fillMaxWidth()
@ -72,8 +77,16 @@ fun NavigatorBottomSheetItem(
onClick()
}
.padding(horizontal = 18.dp, vertical = 18.dp),
contentAlignment = Alignment.Center
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(18.dp)
) {
Icon(
imageVector = imageVector,
contentDescription = null,
modifier = Modifier.size(24.dp),
tint = if (primary) MaterialTheme.colorScheme.onPrimaryContainer
else MaterialTheme.colorScheme.onSurface
)
StyledText(
text = title,
style = MaterialTheme.typography.labelLarge.copy(