From 8f8ae61325e01d29d3d47df2f16c2cbee3f275d5 Mon Sep 17 00:00:00 2001 From: Anthony Date: Mon, 1 Apr 2024 04:38:03 +0200 Subject: [PATCH] feat(connector): add navigation drawer and scaffold --- .../drawable/check_box-24px.xml | 10 ++ .../composeResources/drawable/folder-24px.xml | 10 ++ .../drawable/history-24px.xml | 10 ++ .../composeResources/drawable/info-24px.xml | 10 ++ .../composeApp/src/desktopMain/kotlin/App.kt | 134 +++++++++++++++--- 5 files changed, 157 insertions(+), 17 deletions(-) create mode 100644 connector/composeApp/src/commonMain/composeResources/drawable/check_box-24px.xml create mode 100644 connector/composeApp/src/commonMain/composeResources/drawable/folder-24px.xml create mode 100644 connector/composeApp/src/commonMain/composeResources/drawable/history-24px.xml create mode 100644 connector/composeApp/src/commonMain/composeResources/drawable/info-24px.xml diff --git a/connector/composeApp/src/commonMain/composeResources/drawable/check_box-24px.xml b/connector/composeApp/src/commonMain/composeResources/drawable/check_box-24px.xml new file mode 100644 index 0000000..8f6dbf9 --- /dev/null +++ b/connector/composeApp/src/commonMain/composeResources/drawable/check_box-24px.xml @@ -0,0 +1,10 @@ + + + diff --git a/connector/composeApp/src/commonMain/composeResources/drawable/folder-24px.xml b/connector/composeApp/src/commonMain/composeResources/drawable/folder-24px.xml new file mode 100644 index 0000000..f0150a7 --- /dev/null +++ b/connector/composeApp/src/commonMain/composeResources/drawable/folder-24px.xml @@ -0,0 +1,10 @@ + + + diff --git a/connector/composeApp/src/commonMain/composeResources/drawable/history-24px.xml b/connector/composeApp/src/commonMain/composeResources/drawable/history-24px.xml new file mode 100644 index 0000000..0ba7bb8 --- /dev/null +++ b/connector/composeApp/src/commonMain/composeResources/drawable/history-24px.xml @@ -0,0 +1,10 @@ + + + diff --git a/connector/composeApp/src/commonMain/composeResources/drawable/info-24px.xml b/connector/composeApp/src/commonMain/composeResources/drawable/info-24px.xml new file mode 100644 index 0000000..4d08bc5 --- /dev/null +++ b/connector/composeApp/src/commonMain/composeResources/drawable/info-24px.xml @@ -0,0 +1,10 @@ + + + diff --git a/connector/composeApp/src/desktopMain/kotlin/App.kt b/connector/composeApp/src/desktopMain/kotlin/App.kt index ffa4574..7b47bae 100644 --- a/connector/composeApp/src/desktopMain/kotlin/App.kt +++ b/connector/composeApp/src/desktopMain/kotlin/App.kt @@ -1,16 +1,25 @@ + import androidx.compose.animation.AnimatedVisibility import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Menu +import androidx.compose.material.icons.outlined.Edit +import androidx.compose.material.icons.outlined.Settings import androidx.compose.material3.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.text.style.TextOverflow -import connector.composeapp.generated.resources.Res -import connector.composeapp.generated.resources.compose_multiplatform +import androidx.compose.ui.unit.dp +import connector.composeapp.generated.resources.* +import kotlinx.coroutines.CoroutineScope +import kotlinx.coroutines.launch import org.jetbrains.compose.resources.ExperimentalResourceApi import org.jetbrains.compose.resources.painterResource import org.jetbrains.compose.ui.tooling.preview.Preview @@ -21,28 +30,52 @@ import theme.AppTheme @Preview fun App() { AppTheme { - MaterialTheme { - var showContent by remember { mutableStateOf(false) } - Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { - TopBar() - Button(onClick = { showContent = !showContent }) { - Text("Click me!") - } - AnimatedVisibility(showContent) { - val greeting = remember { Greeting().greet() } - Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { - Image(painterResource(Res.drawable.compose_multiplatform), null) - Text("Compose: $greeting") - } + var showContent by remember { mutableStateOf(false) } + Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { + AppScaffold() + Button(onClick = { showContent = !showContent }) { + Text("Click me!") + } + AnimatedVisibility(showContent) { + val greeting = remember { Greeting().greet() } + Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { + Image(painterResource(Res.drawable.compose_multiplatform), null) + Text("Compose: $greeting") } } } } } +@Composable +fun AppScaffold() { + val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed) + val scope = rememberCoroutineScope() + + Scaffold( + topBar = { + TopBar(drawerState, scope) + }, + ) { innerPadding -> + Column( + modifier = Modifier.padding(innerPadding), + verticalArrangement = Arrangement.spacedBy(16.dp) + ) { + NavigationDrawer(drawerState) + Text("Test") + } + } +} + +/** + * Component for the bar on top of the screen + */ @OptIn(ExperimentalMaterial3Api::class) @Composable -fun TopBar() { +fun TopBar( + drawerState: DrawerState, + drawerScope: CoroutineScope, +) { CenterAlignedTopAppBar( colors = TopAppBarDefaults.topAppBarColors( containerColor = MaterialTheme.colorScheme.surfaceContainer, @@ -56,7 +89,14 @@ fun TopBar() { ) }, navigationIcon = { - IconButton(onClick = {/* TODO implement */ }) { + IconButton(onClick = { + drawerScope.launch { + drawerState.apply { + if (isClosed) open() else close() + } + } + + }) { Icon( imageVector = Icons.Filled.Menu, contentDescription = "Open Navigation Bar", @@ -66,3 +106,63 @@ fun TopBar() { // TODO add Simulator Status ) } + +/** + * Navigation drawer from the left side + */ +@OptIn(ExperimentalResourceApi::class) +@Composable +fun NavigationDrawer(drawerState: DrawerState) { + ModalNavigationDrawer( + drawerState = drawerState, + drawerContent = { + ModalDrawerSheet { + Column(modifier = Modifier.verticalScroll(rememberScrollState()) ) { + Text("Project Name...", modifier = Modifier.padding(16.dp)) + NavigationDrawerItem( + label = { Text(text = "Projects") }, + icon = { Icon(painterResource(Res.drawable.folder_24px), null) }, + selected = false, + onClick = { /* TODO */ }, + ) + HorizontalDivider() + + Text("Tester", modifier = Modifier.padding(16.dp)) + NavigationDrawerItem( + label = { Text(text = "Procedures") }, + icon = { Icon(imageVector = Icons.Outlined.Edit, null) }, + selected = false, + onClick = { /* TODO */ }, + ) + NavigationDrawerItem( + label = { Text(text = "Simulator Test") }, + icon = { Icon(painterResource(Res.drawable.check_box_24px), null) }, + selected = false, + onClick = { /* TODO */ }, + ) + NavigationDrawerItem( + label = { Text(text = "Test Results") }, + icon = { Icon(painterResource(Res.drawable.history_24px), null) }, + selected = false, + onClick = { /* TODO */ }, + ) + HorizontalDivider() + + Text("Application", modifier = Modifier.padding(16.dp)) + NavigationDrawerItem( + label = { Text(text = "Settings") }, + icon = { Icon(imageVector = Icons.Outlined.Settings, null) }, + selected = false, + onClick = { /* TODO */ }, + ) + NavigationDrawerItem( + label = { Text(text = "About") }, + icon = { Icon(painterResource(Res.drawable.info_24px), null) }, + selected = false, + onClick = { /* TODO */ }, + ) + } + } + } + ) {} +}