Разработан каркас приложения

composeApp/src/commonMain/kotlin/ru/csasq/beeapp/App.kt

@@ -1,35 +1,157 @@
 package ru.csasq.beeapp
 
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material3.Icon
-import androidx.compose.material.Text
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Snackbar
+import androidx.compose.material3.SnackbarHost
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.*
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.navigation.NavDestination.Companion.hierarchy
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.currentBackStackEntryAsState
+import androidx.navigation.compose.rememberNavController
 import org.jetbrains.compose.resources.painterResource
-import org.jetbrains.compose.ui.tooling.preview.Preview
 
 import bee_app_frontend.composeapp.generated.resources.Res
-import bee_app_frontend.composeapp.generated.resources.compose_multiplatform
+import bee_app_frontend.composeapp.generated.resources.round_accessible_forward_24
+import bee_app_frontend.composeapp.generated.resources.round_elderly_24
+import bee_app_frontend.composeapp.generated.resources.round_sports_kabaddi_24
+import org.jetbrains.compose.resources.DrawableResource
+import ru.csasq.beeapp.ui.theme.darkScheme
 
+sealed class Screen(
+    val route: String,
+    val title: String,
+    val icon: DrawableResource,
+) {
+    data object Dashboard : Screen(
+        route = "author-requests",
+        title = "Запросы авторов",
+        icon = Res.drawable.round_elderly_24,
+    )
+    data object Scenarios : Screen(
+        route = "customer-requests",
+        title = "Запросы пользователей",
+        icon = Res.drawable.round_sports_kabaddi_24,
+    )
+    data object Chats : Screen(
+        route = "signatures",
+        title = "Подписи",
+        icon = Res.drawable.round_accessible_forward_24,
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-@Preview
 fun App() {
-    MaterialTheme {
+    MaterialTheme(
-        var showContent by remember { mutableStateOf(false) }
+        colorScheme = darkScheme,
-        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+    ) {
-            Button(onClick = { showContent = !showContent }) {
+        val navController = rememberNavController()
-                Text("Click me!")
+        val progressIndicatorState = remember {
-            }
+            mutableStateOf(false)
-            AnimatedVisibility(showContent) {
+        }
-                val greeting = remember { Greeting().greet() }
+        val snackbarHostState = SnackbarHostState()
-                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
+        val floatingActionButtonState = remember {
-                    Image(painterResource(Res.drawable.compose_multiplatform), null)
+            mutableStateOf<(@Composable () -> Unit)?>(null)
-                    Text("Compose: $greeting")
+        }
+
+        Scaffold(
+            topBar = {
+                Column {
+                    TopAppBar(
+                        title = {
+                            Text(
+                                text = "Пчелки «Жу-жу-жу!»",
+                                overflow = TextOverflow.Ellipsis,
+                                softWrap = false,
+                            )
+                        },
+                    )
+                    when {
+                        progressIndicatorState.value -> LinearProgressIndicator(
+                            modifier = Modifier
+                                .fillMaxWidth(),
+                        )
+                    }
+                }
+            },
+            bottomBar = {
+                NavigationBar {
+                    val navBackStackEntry = navController.currentBackStackEntryAsState()
+                    val items = listOf(
+                        Screen.Dashboard,
+                        Screen.Scenarios,
+                        Screen.Chats,
+                    )
+                    items.forEach { screen ->
+                        NavigationBarItem(
+                            icon = {
+                                Icon(
+                                    painter = painterResource(screen.icon),
+                                    contentDescription = null,
+                                )
+                            },
+                            label = {
+                                Text(
+                                    text = screen.title,
+                                    textAlign = TextAlign.Center,
+                                )
+                            },
+                            selected = navBackStackEntry.value?.destination?.hierarchy?.any {
+                                it.route == screen.route
+                            } == true,
+                            onClick = {
+                                floatingActionButtonState.value = null
+                                navController.navigate(screen.route)
+                            },
+                        )
+                    }
+                }
+            },
+            snackbarHost = {
+                SnackbarHost(
+                    hostState = snackbarHostState,
+                ) { snackbarData ->
+                    Snackbar(
+                        snackbarData = snackbarData,
+//                        containerColor = MaterialTheme.colorScheme.errorContainer,
+//                        contentColor = MaterialTheme.colorScheme.error,
+//                        actionColor = MaterialTheme.colorScheme.onErrorContainer,
+                    )
+                }
+            },
+            floatingActionButton = {
+                floatingActionButtonState.value?.let {
+                    it()
+                }
+            },
+        ) {
+            paddingValues -> NavHost(
+                navController = navController,
+                startDestination = Screen.Dashboard.route,
+            ) {
+                composable(Screen.Dashboard.route) {
+
+                }
+                composable(Screen.Scenarios.route) {
+
+                }
+                composable(Screen.Chats.route) {
+
                 }
             }
         }

composeApp/src/wasmJsMain/resources/index.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru-RU">
-<head>
+    <head>
-    <meta charset="UTF-8">
+        <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
-    <title>bee-app-frontend</title>
+        <meta name="color-scheme" content="dark light" />
-    <link type="text/css" rel="stylesheet" href="styles.css">
+        <title>Пчелки «Жу-жу-жу!»</title>
-    <script type="application/javascript" src="composeApp.js"></script>
+        <link type="text/css" rel="stylesheet" href="/styles.css" />
-</head>
+        <script type="application/javascript" src="/composeApp.js"></script>
-<body>
+    </head>
-</body>
+    <body>
-</html>
+    </body>
+</html>