feat: improve navigator bottom sheet design

* Added icons
* Aligned to the left

Co-authored-by: Edward205 <52004020+Edward205@users.noreply.github.com>

app/src/main/java/ua/acclorite/book_story/ui/navigator/NavigatorBottomSheet.kt

@@ -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))
-            }
         }
     }
 }

app/src/main/java/ua/acclorite/book_story/ui/navigator/NavigatorBottomSheetItem.kt

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