[Jetchat] fix: wrong highlighted item in drawer

Jetchat/app/src/main/java/com/example/compose/jetchat/NavActivity.kt

@@ -26,7 +26,10 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.viewinterop.AndroidViewBinding
 import androidx.core.os.bundleOf
@@ -58,6 +61,7 @@ class NavActivity : AppCompatActivity() {
                     val drawerOpen by viewModel.drawerShouldBeOpened
                         .collectAsStateWithLifecycle()
 
+                    var selectedMenu by remember { mutableStateOf("composers") }
                     if (drawerOpen) {
                         // Open drawer and reset state in VM.
                         LaunchedEffect(Unit) {
@@ -74,18 +78,21 @@ class NavActivity : AppCompatActivity() {
 
                     JetchatDrawer(
                         drawerState = drawerState,
+                        selectedMenu = selectedMenu,
                         onChatClicked = {
                             findNavController().popBackStack(R.id.nav_home, false)
                             scope.launch {
                                 drawerState.close()
                             }
+                            selectedMenu = it
                         },
                         onProfileClicked = {
                             val bundle = bundleOf("userId" to it)
                             findNavController().navigate(R.id.nav_profile, bundle)
                             scope.launch {
                                 drawerState.close()
                             }
+                            selectedMenu = it
                         }
                     ) {
                         AndroidViewBinding(ContentMainBinding::inflate)

Jetchat/app/src/main/java/com/example/compose/jetchat/components/JetchatDrawer.kt

@@ -55,8 +55,8 @@ import com.example.compose.jetchat.theme.JetchatTheme
 @Composable
 fun JetchatDrawerContent(
     onProfileClicked: (String) -> Unit,
-    onChatClicked: (String) ->
-    Unit
+    onChatClicked: (String) -> Unit,
+    selectedMenu: String = "composers"
 ) {
     // Use windowInsetsTopHeight() to add a spacer which pushes the drawer content
     // below the status bar (y-axis)
@@ -65,12 +65,24 @@ fun JetchatDrawerContent(
         DrawerHeader()
         DividerItem()
         DrawerItemHeader("Chats")
-        ChatItem("composers", true) { onChatClicked("composers") }
-        ChatItem("droidcon-nyc", false) { onChatClicked("droidcon-nyc") }
+        ChatItem("composers", selectedMenu == "composers") {
+            onChatClicked("composers")
+        }
+        ChatItem("droidcon-nyc", selectedMenu == "droidcon-nyc") {
+            onChatClicked("droidcon-nyc")
+        }
         DividerItem(modifier = Modifier.padding(horizontal = 28.dp))
         DrawerItemHeader("Recent Profiles")
-        ProfileItem("Ali Conors (you)", meProfile.photo) { onProfileClicked(meProfile.userId) }
-        ProfileItem("Taylor Brooks", colleagueProfile.photo) {
+        ProfileItem(
+            "Ali Conors (you)", meProfile.photo,
+            selectedMenu == meProfile.userId
+        ) {
+            onProfileClicked(meProfile.userId)
+        }
+        ProfileItem(
+            "Taylor Brooks", colleagueProfile.photo,
+            selectedMenu == colleagueProfile.userId
+        ) {
             onProfileClicked(colleagueProfile.userId)
         }
     }
@@ -148,13 +160,24 @@ private fun ChatItem(text: String, selected: Boolean, onChatClicked: () -> Unit)
 }
 
 @Composable
-private fun ProfileItem(text: String, @DrawableRes profilePic: Int?, onProfileClicked: () -> Unit) {
+private fun ProfileItem(
+    text: String,
+    @DrawableRes profilePic: Int?,
+    selected: Boolean = false,
+    onProfileClicked: () -> Unit
+) {
+    val background = if (selected) {
+        Modifier.background(MaterialTheme.colorScheme.primaryContainer)
+    } else {
+        Modifier
+    }
     Row(
         modifier = Modifier
             .height(56.dp)
             .fillMaxWidth()
             .padding(horizontal = 12.dp)
             .clip(CircleShape)
+            .then(background)
             .clickable(onClick = onProfileClicked),
         verticalAlignment = CenterVertically
     ) {

Jetchat/app/src/main/java/com/example/compose/jetchat/components/JetchatScaffold.kt

@@ -28,9 +28,10 @@ import com.example.compose.jetchat.theme.JetchatTheme
 @Composable
 fun JetchatDrawer(
     drawerState: DrawerState = rememberDrawerState(initialValue = Closed),
+    selectedMenu: String,
     onProfileClicked: (String) -> Unit,
     onChatClicked: (String) -> Unit,
-    content: @Composable () -> Unit
+    content: @Composable () -> Unit,
 ) {
     JetchatTheme {
         ModalNavigationDrawer(
@@ -43,7 +44,8 @@ fun JetchatDrawer(
                 ) {
                     JetchatDrawerContent(
                         onProfileClicked = onProfileClicked,
-                        onChatClicked = onChatClicked
+                        onChatClicked = onChatClicked,
+                        selectedMenu = selectedMenu
                     )
                 }
             },