feat(connector): add navigation drawer and scaffold

connector/composeApp/src/commonMain/composeResources/drawable/check_box-24px.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="#FFFFFF"
+      android:pathData="M424,648L706,366L650,310L424,536L310,422L254,478L424,648ZM200,840Q167,840 143.5,816.5Q120,793 120,760L120,200Q120,167 143.5,143.5Q167,120 200,120L760,120Q793,120 816.5,143.5Q840,167 840,200L840,760Q840,793 816.5,816.5Q793,840 760,840L200,840ZM200,760L760,760Q760,760 760,760Q760,760 760,760L760,200Q760,200 760,200Q760,200 760,200L200,200Q200,200 200,200Q200,200 200,200L200,760Q200,760 200,760Q200,760 200,760ZM200,200L200,200Q200,200 200,200Q200,200 200,200L200,760Q200,760 200,760Q200,760 200,760L200,760Q200,760 200,760Q200,760 200,760L200,200Q200,200 200,200Q200,200 200,200Z"/>
+</vector>

connector/composeApp/src/commonMain/composeResources/drawable/folder-24px.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="#FFFFFF"
+      android:pathData="M160,800Q127,800 103.5,776.5Q80,753 80,720L80,240Q80,207 103.5,183.5Q127,160 160,160L400,160L480,240L800,240Q833,240 856.5,263.5Q880,287 880,320L880,720Q880,753 856.5,776.5Q833,800 800,800L160,800ZM160,720L800,720Q800,720 800,720Q800,720 800,720L800,320Q800,320 800,320Q800,320 800,320L447,320L367,240L160,240Q160,240 160,240Q160,240 160,240L160,720Q160,720 160,720Q160,720 160,720ZM160,720Q160,720 160,720Q160,720 160,720L160,240Q160,240 160,240Q160,240 160,240L160,240L160,320L160,320Q160,320 160,320Q160,320 160,320L160,720Q160,720 160,720Q160,720 160,720L160,720Z"/>
+</vector>

connector/composeApp/src/commonMain/composeResources/drawable/history-24px.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="#FFFFFF"
+      android:pathData="M480,840Q342,840 239.5,748.5Q137,657 122,520L204,520Q218,624 296.5,692Q375,760 480,760Q597,760 678.5,678.5Q760,597 760,480Q760,363 678.5,281.5Q597,200 480,200Q411,200 351,232Q291,264 250,320L360,320L360,400L120,400L120,160L200,160L200,254Q251,190 324.5,155Q398,120 480,120Q555,120 620.5,148.5Q686,177 734.5,225.5Q783,274 811.5,339.5Q840,405 840,480Q840,555 811.5,620.5Q783,686 734.5,734.5Q686,783 620.5,811.5Q555,840 480,840ZM592,648L440,496L440,280L520,280L520,464L648,592L592,648Z"/>
+</vector>

connector/composeApp/src/commonMain/composeResources/drawable/info-24px.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="#FFFFFF"
+      android:pathData="M440,680L520,680L520,440L440,440L440,680ZM480,360Q497,360 508.5,348.5Q520,337 520,320Q520,303 508.5,291.5Q497,280 480,280Q463,280 451.5,291.5Q440,303 440,320Q440,337 451.5,348.5Q463,360 480,360ZM480,880Q397,880 324,848.5Q251,817 197,763Q143,709 111.5,636Q80,563 80,480Q80,397 111.5,324Q143,251 197,197Q251,143 324,111.5Q397,80 480,80Q563,80 636,111.5Q709,143 763,197Q817,251 848.5,324Q880,397 880,480Q880,563 848.5,636Q817,709 763,763Q709,817 636,848.5Q563,880 480,880ZM480,800Q614,800 707,707Q800,614 800,480Q800,346 707,253Q614,160 480,160Q346,160 253,253Q160,346 160,480Q160,614 253,707Q346,800 480,800ZM480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Q480,480 480,480Z"/>
+</vector>

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 */ },
+                    )
+                }
+            }
+        }
+    ) {}
+}