Add basic sidemenu

app/src/main/java/be/ugent/sel/studeez/StudeezApp.kt

@@ -16,6 +16,7 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
+import be.ugent.sel.studeez.common.composable.Drawer
 import be.ugent.sel.studeez.common.snackbar.SnackbarManager
 import be.ugent.sel.studeez.navigation.StudeezDestinations
 import be.ugent.sel.studeez.screens.home.HomeScreen
@@ -31,24 +32,29 @@ fun StudeezApp() {
         Surface(color = MaterialTheme.colors.background) {
             val appState = rememberAppState()
 
-            Scaffold(
+            ModalDrawer(
-                snackbarHost = {
+                drawerContent = { Drawer() },
-                    SnackbarHost(
+                drawerState = appState.drawerState
-                        hostState = it,
+            ) {
-                        modifier = Modifier.padding(8.dp),
+                Scaffold(
-                        snackbar = { snackbarData ->
+                    snackbarHost = {
-                            Snackbar(snackbarData, contentColor = MaterialTheme.colors.onPrimary)
+                        SnackbarHost(
-                        }
+                            hostState = it,
-                    )
+                            modifier = Modifier.padding(8.dp),
-                },
+                            snackbar = { snackbarData ->
-                scaffoldState = appState.scaffoldState
+                                Snackbar(snackbarData, contentColor = MaterialTheme.colors.onPrimary)
-            ) { innerPaddingModifier ->
+                            }
-                NavHost(
+                        )
-                    navController = appState.navController,
+                    },
-                    startDestination = StudeezDestinations.SPLASH_SCREEN,
+                    scaffoldState = appState.scaffoldState
-                    modifier = Modifier.padding(innerPaddingModifier)
+                ) { innerPaddingModifier ->
-                ) {
+                    NavHost(
-                    studeezGraph(appState)
+                        navController = appState.navController,
+                        startDestination = StudeezDestinations.SPLASH_SCREEN,
+                        modifier = Modifier.padding(innerPaddingModifier)
+                    ) {
+                        studeezGraph(appState)
+                    }
                 }
             }
         }
@@ -58,13 +64,14 @@ fun StudeezApp() {
 @Composable
 fun rememberAppState(
     scaffoldState: ScaffoldState = rememberScaffoldState(),
+    drawerState: DrawerState = rememberDrawerState(initialValue = DrawerValue.Closed),
     navController: NavHostController = rememberNavController(),
     snackbarManager: SnackbarManager = SnackbarManager,
     resources: Resources = resources(),
     coroutineScope: CoroutineScope = rememberCoroutineScope()
 ) =
     remember(scaffoldState, navController, snackbarManager, resources, coroutineScope) {
-        StudeezAppstate(scaffoldState, navController, snackbarManager, resources, coroutineScope)
+        StudeezAppstate(scaffoldState, drawerState, navController, snackbarManager, resources, coroutineScope)
     }
 
 @Composable
@@ -89,6 +96,9 @@ fun NavGraphBuilder.studeezGraph(appState: StudeezAppstate) {
     }
 
     composable(StudeezDestinations.HOME_SCREEN) {
-        HomeScreen(openAndPopUp = { route, popUp -> appState.navigateAndPopUp(route, popUp) })
+        HomeScreen(
+            openAndPopUp = { route, popUp -> appState.navigateAndPopUp(route, popUp) },
+            openDrawer = { appState.openDrawer() }
+        )
     }
 }

app/src/main/java/be/ugent/sel/studeez/StudeezAppstate.kt

@@ -1,6 +1,7 @@
 package be.ugent.sel.studeez
 
 import android.content.res.Resources
+import androidx.compose.material.DrawerState
 import androidx.compose.material.ScaffoldState
 import androidx.compose.runtime.Stable
 import androidx.navigation.NavHostController
@@ -13,11 +14,14 @@ import kotlinx.coroutines.launch
 @Stable
 class StudeezAppstate(
     val scaffoldState: ScaffoldState,
+    val drawerState: DrawerState,
     val navController: NavHostController,
     private val snackbarManager: SnackbarManager,
     private val resources: Resources,
     coroutineScope: CoroutineScope
 ) {
+    val coroutineScope: CoroutineScope = coroutineScope
+
     init {
         coroutineScope.launch {
             snackbarManager.snackbarMessages.filterNotNull().collect { snackbarMessage ->
@@ -48,4 +52,8 @@ class StudeezAppstate(
             popUpTo(0) { inclusive = true }
         }
     }
+
+    fun openDrawer() {
+        coroutineScope.launch { drawerState.open() }
+    }
 }

app/src/main/java/be/ugent/sel/studeez/common/composable/DrawerComposable.kt

@@ -0,0 +1,60 @@
+package be.ugent.sel.studeez.common.composable
+
+import android.graphics.drawable.Icon
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Button
+import androidx.compose.material.Divider
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun Drawer() {
+    Column(modifier = Modifier.fillMaxSize()) {
+        Text(text = "Studeez")
+        Divider()
+        Text(text = "Logout")
+        IconTextButton(icon = Icons.Default.Home, text = "Home") {
+            
+        }
+    }
+}
+
+@Composable
+fun IconTextButton(icon: ImageVector, text: String, onClick: () -> Unit) {
+    Button(
+        onClick = onClick
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.Center
+        ) {
+            Icon(imageVector = icon, contentDescription = text)
+            Spacer(modifier = Modifier.width(8.dp))
+            Text(text = text)
+        }
+    }
+}
+
+@Preview
+@Composable
+fun DrawerPreview() {
+    Drawer()
+}
+
+@Preview
+@Composable
+fun DrawerEntryPreview() {
+    IconTextButton(
+        icon = Icons.Default.Home,
+        text = "Home",
+        onClick = {
+            // Do something when the button is clicked
+        }
+    )
+}

app/src/main/java/be/ugent/sel/studeez/common/composable/ToolbarComposable.kt

@@ -3,6 +3,7 @@ package be.ugent.sel.studeez.common.composable
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.Preview
@@ -14,6 +15,7 @@ import be.ugent.sel.studeez.ui.theme.StudeezTheme
 // Contains floatingActionButton and bottom bar, used in the main four screens.
 fun PrimaryScreenToolbar(
     title: String,
+    openDrawer: () -> Unit,
     content: @Composable (PaddingValues) -> Unit
 ) {
     Scaffold(
@@ -21,7 +23,7 @@ fun PrimaryScreenToolbar(
         topBar = { TopAppBar(
             title = { Text(text = title) },
             navigationIcon = {
-                IconButton(onClick = { /* TODO open sidemenu */ }) {
+                IconButton(onClick = { openDrawer() }) {
                     Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
                 }
             }
@@ -48,8 +50,8 @@ fun SecondaryScreenToolbar(
         topBar = { TopAppBar(
             title = { Text(text = title) },
             navigationIcon = {
-                IconButton(onClick = { /* TODO open sidemenu */ }) {
+                IconButton(onClick = { /* TODO Go back */ }) {
-                    Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
+                    Icon(imageVector = Icons.Default.ArrowBack, contentDescription = "Go back")
                 }
             }
         ) },
@@ -64,14 +66,13 @@ fun PrimaryScreenToolbarPreview() {
     StudeezTheme { PrimaryScreenToolbar(
         "Preview screen",
         {}
-    ) }
+    ) {} }
 }
 
 @Preview
 @Composable
 fun SecondaryScreenToolbarPreview() {
     StudeezTheme { SecondaryScreenToolbar(
-        "Preview screen",
+        "Preview screen"
-        {}
+    ) {} }
-    )}
 }

app/src/main/java/be/ugent/sel/studeez/screens/home/HomeScreen.kt

@@ -6,18 +6,20 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import be.ugent.sel.studeez.R
 import be.ugent.sel.studeez.common.composable.BasicButton
 import be.ugent.sel.studeez.common.composable.PrimaryScreenToolbar
-import be.ugent.sel.studeez.common.composable.SecondaryScreenToolbar
 import be.ugent.sel.studeez.common.ext.basicButton
 import be.ugent.sel.studeez.resources
 
 @Composable
 fun HomeScreen(
     openAndPopUp: (String, String) -> Unit,
+    openDrawer: () -> Unit,
     viewModel: HomeViewModel = hiltViewModel()
 ) {
 
-    PrimaryScreenToolbar(title = resources().getString(R.string.home)) {
+    PrimaryScreenToolbar(
-        // "Start session" button
+        title = resources().getString(R.string.home),
+        openDrawer = { openDrawer() }
+    ) {
         BasicButton(R.string.start_session, Modifier.basicButton()) {
             viewModel.onStartSessionClick(openAndPopUp)
         }