Skip to content

Commit

Permalink
[Jetchat] fix: wrong highlighted item in drawer (#1507)
Browse files Browse the repository at this point in the history
Drawer always highlights the first item ("composers"). The highlighted
item doesn't changes according to the last selected item. This solves
issue #1501

[Before]
[Selected item in Drawer
(before).webm](https://github.com/user-attachments/assets/0830b8a1-ea6a-434e-abe1-f6b0ab5202bc)

[After]
[Selected item in Drawer
(after).webm](https://github.com/user-attachments/assets/652457ce-d035-4e67-9a8a-057dcbb9cf2e)
  • Loading branch information
mlykotom authored Jan 10, 2025
2 parents 8abb7d2 + 30c835d commit 8344c03
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand All @@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ import com.example.compose.jetchat.widget.WidgetReceiver
@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)
Expand All @@ -74,12 +74,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)
}
if (widgetAddingIsSupported(LocalContext.current)) {
Expand Down Expand Up @@ -163,13 +175,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
) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -43,7 +44,8 @@ fun JetchatDrawer(
) {
JetchatDrawerContent(
onProfileClicked = onProfileClicked,
onChatClicked = onChatClicked
onChatClicked = onChatClicked,
selectedMenu = selectedMenu
)
}
},
Expand Down

0 comments on commit 8344c03

Please sign in to comment.