From da136a1990623e7daac34d6bf2b4492cc162a4ae Mon Sep 17 00:00:00 2001 From: Lonami Exo Date: Mon, 24 Oct 2022 13:58:47 +0200 Subject: [PATCH] Add a navigation drawer --- .../java/dev/lonami/talaria/TalariaApp.kt | 191 +++++++++++++++--- 1 file changed, 165 insertions(+), 26 deletions(-) diff --git a/app/src/main/java/dev/lonami/talaria/TalariaApp.kt b/app/src/main/java/dev/lonami/talaria/TalariaApp.kt index 648044d..b55168c 100644 --- a/app/src/main/java/dev/lonami/talaria/TalariaApp.kt +++ b/app/src/main/java/dev/lonami/talaria/TalariaApp.kt @@ -1,13 +1,19 @@ package dev.lonami.talaria import androidx.annotation.StringRes -import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.Image +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.* import androidx.compose.material.* import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.ArrowBack +import androidx.compose.material.icons.filled.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import androidx.navigation.compose.NavHost import androidx.navigation.compose.composable import androidx.navigation.compose.currentBackStackEntryAsState @@ -16,6 +22,7 @@ import dev.lonami.talaria.bindings.Native import dev.lonami.talaria.ui.screens.ChatScreen import dev.lonami.talaria.ui.screens.DialogScreen import dev.lonami.talaria.ui.screens.LoginScreen +import kotlinx.coroutines.launch enum class TalariaScreen(@StringRes val title: Int) { Login(title = R.string.app_name), @@ -23,8 +30,93 @@ enum class TalariaScreen(@StringRes val title: Int) { Chat(title = R.string.chat), } +enum class DrawerAction { + SelectAccount, + AddAccount, + SavedMessages, + Contacts, + NewChat, + Settings, + Help, +} + @Composable -fun TalariaAppBar(currentScreen: TalariaScreen, canNavigateBack: Boolean, navigateUp: () -> Unit) { +fun DrawerAction( + icon: ImageVector, + text: String, + onClick: () -> Unit, + modifier: Modifier = Modifier, +) { + Row( + modifier = modifier + .clickable(onClick = onClick) + .fillMaxWidth() + .padding(0.dp, 8.dp) + ) { + Icon(imageVector = icon, contentDescription = null) + Spacer(modifier = Modifier.width(8.dp)) + Text(text) + } +} + +@Composable +fun Drawer(modifier: Modifier = Modifier, onSelect: (DrawerAction) -> Unit) { + Column( + modifier = modifier + .fillMaxSize() + .padding(24.dp, 48.dp) + ) { + Image( + painter = painterResource(R.drawable.ic_launcher_foreground), + contentDescription = "App Icon" + ) + DrawerAction( + icon = Icons.Filled.AccountBox, + text = "Main Account", + onClick = { onSelect(DrawerAction.SelectAccount) } + ) + DrawerAction( + icon = Icons.Filled.Add, + text = "Add Account", + onClick = { onSelect(DrawerAction.AddAccount) } + ) + Divider() + DrawerAction( + icon = Icons.Filled.Star, + text = "Saved Messages", + onClick = { onSelect(DrawerAction.SavedMessages) } + ) + DrawerAction( + icon = Icons.Filled.Call, + text = "Contacts", + onClick = { onSelect(DrawerAction.Contacts) } + ) + DrawerAction( + icon = Icons.Filled.Create, + text = "New Chat", + onClick = { onSelect(DrawerAction.NewChat) } + ) + Divider() + DrawerAction( + icon = Icons.Filled.Settings, + text = "Settings", + onClick = { onSelect(DrawerAction.Settings) } + ) + DrawerAction( + icon = Icons.Filled.Info, + text = "Help", + onClick = { onSelect(DrawerAction.Help) } + ) + } +} + +@Composable +fun TalariaAppBar( + currentScreen: TalariaScreen, + canNavigateBack: Boolean, + navigateUp: () -> Unit, + openDrawer: () -> Unit +) { TopAppBar( title = { Text(stringResource(currentScreen.title)) }, navigationIcon = { @@ -35,6 +127,13 @@ fun TalariaAppBar(currentScreen: TalariaScreen, canNavigateBack: Boolean, naviga contentDescription = stringResource(R.string.back_button) ) } + } else { + IconButton(onClick = openDrawer) { + Icon( + imageVector = Icons.Filled.Menu, + contentDescription = stringResource(androidx.compose.ui.R.string.navigation_menu) + ) + } } } ) @@ -50,38 +149,78 @@ fun TalariaApp() { val loggedIn by remember { mutableStateOf(!Native.needLogin()) } var selectedDialog by remember { mutableStateOf("") } + val drawerState = rememberDrawerState(DrawerValue.Closed) + val scope = rememberCoroutineScope() + val toggleDrawer = { open: Boolean -> + scope.launch { + if (open) { + drawerState.open() + } else { + drawerState.close() + } + } + } + Scaffold( topBar = { TalariaAppBar( currentScreen, canNavigateBack = navController.previousBackStackEntry != null, - navigateUp = { navController.navigateUp() } + navigateUp = { navController.navigateUp() }, + openDrawer = { toggleDrawer(drawerState.isClosed) } ) } ) { innerPadding -> - NavHost( - navController = navController, - startDestination = if (loggedIn) { - TalariaScreen.Login.name - } else { - TalariaScreen.Dialog.name - }, - Modifier.padding(innerPadding) - ) { - composable(route = TalariaScreen.Dialog.name) { - DialogScreen(onDialogSelected = { - selectedDialog = it - navController.navigate(TalariaScreen.Chat.name) - }) - } - composable(route = TalariaScreen.Chat.name) { - ChatScreen(selectedDialog) - } - composable(route = TalariaScreen.Login.name) { - LoginScreen(onConfirmOtp = { - navController.navigate(TalariaScreen.Dialog.name) - }) + ModalDrawer( + drawerState = drawerState, + gesturesEnabled = drawerState.isOpen, + drawerContent = { + Drawer(onSelect = {}) + }) { + + NavHost( + navController = navController, + startDestination = if (loggedIn) { + TalariaScreen.Login.name + } else { + TalariaScreen.Dialog.name + }, + Modifier.padding(innerPadding) + ) { + composable(route = TalariaScreen.Dialog.name) { + DialogScreen(onDialogSelected = { + selectedDialog = it + navController.navigate(TalariaScreen.Chat.name) + }) + } + composable(route = TalariaScreen.Chat.name) { + ChatScreen(selectedDialog) + } + composable(route = TalariaScreen.Login.name) { + LoginScreen(onConfirmOtp = { + navController.navigate(TalariaScreen.Dialog.name) + }) + } } } } } + +@Preview +@Composable +fun TopBarPreview() { + TalariaAppBar( + currentScreen = TalariaScreen.Dialog, + canNavigateBack = false, + navigateUp = {}, + openDrawer = {}, + ) +} + +@Preview +@Composable +fun NavDrawerPreview() { + Surface { + Drawer(onSelect = {}) + } +}