feat: add selected bottom tab color selection

Author: yogeshpaliyal

app/build.gradle.kts

@@ -130,7 +130,7 @@ dependencies {
     implementation(Deps.Lifecycle.runtimeCompose)
     implementation("androidx.navigation:navigation-compose:2.9.0")
 
-    implementation("androidx.compose.material3:material3:1.2.1")
+    implementation("androidx.compose.material3:material3:1.3.1")
     implementation("com.google.accompanist:accompanist-themeadapter-material3:0.36.0")
 
     implementation("androidx.appcompat:appcompat:1.7.0")

app/src/main/java/com/yogeshpaliyal/keypass/ui/nav/components/KeyPassBottomBar.kt

@@ -1,12 +1,18 @@
 package com.yogeshpaliyal.keypass.ui.nav.components
 
+import androidx.compose.foundation.selection.selectable
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.Home
+import androidx.compose.material.icons.outlined.Menu
+import androidx.compose.material.icons.outlined.Settings
 import androidx.compose.material.icons.rounded.Add
-import androidx.compose.material.icons.rounded.Menu
-import androidx.compose.material.icons.rounded.Settings
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.material3.IconToggleButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -17,36 +23,59 @@ import com.yogeshpaliyal.keypass.ui.commonComponents.DefaultBottomAppBar
 import com.yogeshpaliyal.keypass.ui.redux.actions.BottomSheetAction
 import com.yogeshpaliyal.keypass.ui.redux.actions.NavigationAction
 import com.yogeshpaliyal.keypass.ui.redux.states.AccountDetailState
+import com.yogeshpaliyal.keypass.ui.redux.states.HomeState
 import com.yogeshpaliyal.keypass.ui.redux.states.KeyPassState
+import com.yogeshpaliyal.keypass.ui.redux.states.ScreenState
 import com.yogeshpaliyal.keypass.ui.redux.states.SettingsState
 import org.reduxkotlin.compose.rememberDispatcher
 import org.reduxkotlin.compose.selectState
 
+
+
+
 @Composable
 fun KeyPassBottomBar() {
-    val showMainBottomAppBar by selectState<KeyPassState, Boolean> { this.currentScreen.showMainBottomAppBar }
+    val currentScreen: ScreenState by selectState<KeyPassState, ScreenState> { this.currentScreen }
+    val showMainBottomAppBar = currentScreen.showMainBottomAppBar
     val dispatchAction = rememberDispatcher()
 
     if (!showMainBottomAppBar) {
         return
     }
 
     DefaultBottomAppBar(showBackButton = false, extraAction = {
+
+        IconToggleButton (colors = IconButtonDefaults.iconToggleButtonColors(
+            checkedContainerColor = MaterialTheme.colorScheme.primaryContainer,
+            checkedContentColor = MaterialTheme.colorScheme.onPrimaryContainer
+        ), checked = currentScreen is HomeState, onCheckedChange = {
+            dispatchAction(NavigationAction(HomeState(), true))
+        }) {
+            Icon(
+                painter = rememberVectorPainter(image = Icons.Outlined.Home),
+                contentDescription = "Home",
+                tint = MaterialTheme.colorScheme.onSurface
+            )
+        }
+
         IconButton(onClick = {
             dispatchAction(BottomSheetAction.HomeNavigationMenu(true))
         }) {
             Icon(
-                painter = rememberVectorPainter(image = Icons.Rounded.Menu),
+                painter = rememberVectorPainter(image = Icons.Outlined.Menu),
                 contentDescription = "Menu",
                 tint = MaterialTheme.colorScheme.onSurface
             )
         }
 
-        IconButton(onClick = {
+        IconToggleButton(colors = IconButtonDefaults.iconToggleButtonColors(
+            checkedContainerColor = MaterialTheme.colorScheme.primaryContainer,
+            checkedContentColor = MaterialTheme.colorScheme.onPrimaryContainer
+        ), checked = currentScreen is SettingsState, onCheckedChange = {
             dispatchAction(NavigationAction(SettingsState))
         }) {
             Icon(
-                painter = rememberVectorPainter(image = Icons.Rounded.Settings),
+                painter = rememberVectorPainter(image = Icons.Outlined.Settings),
                 contentDescription = "Settings",
                 tint = MaterialTheme.colorScheme.onSurface
             )

app/src/main/java/com/yogeshpaliyal/keypass/ui/nav/components/NavItem.kt

@@ -11,6 +11,7 @@ import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -21,24 +22,22 @@ import com.yogeshpaliyal.keypass.ui.nav.NavigationModelItem
 
 @Composable
 fun NavItem(item: NavigationModelItem.NavMenuItem, onClick: () -> Unit) {
-    Row(
-        modifier = Modifier
-            .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple(bounded = true),
-                onClick = onClick
+    TextButton(onClick) {
+        Row(
+            modifier = Modifier
+                .padding(16.dp)
+                .fillMaxWidth(1f)
+        ) {
+            Icon(
+                painter = painterResource(id = item.icon),
+                contentDescription = ""
             )
-            .padding(16.dp)
-            .fillMaxWidth(1f)
-    ) {
-        Icon(
-            painter = painterResource(id = item.icon),
-            contentDescription = ""
-        )
-        Spacer(modifier = Modifier.width(32.dp))
-        Text(
-            text = stringResource(id = item.titleRes),
-            style = MaterialTheme.typography.titleMedium
-        )
+            Spacer(modifier = Modifier.width(32.dp))
+            Text(
+                text = stringResource(id = item.titleRes),
+                style = MaterialTheme.typography.titleMedium
+            )
+        }
     }
+
 }

app/src/main/java/com/yogeshpaliyal/keypass/ui/nav/components/NavMenuFolder.kt

@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -16,22 +17,25 @@ import com.yogeshpaliyal.keypass.ui.nav.NavigationModelItem
 
 @Composable
 fun NavMenuFolder(folder: NavigationModelItem.NavTagItem, onClick: () -> Unit) {
-    Box(
-        modifier = Modifier
-            .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple(
-                    bounded = true
-                ),
-                onClick = onClick
-            )
-            .padding(16.dp)
-            .fillMaxWidth(1f)
-
-    ) {
+    TextButton(onClick) {
         Text(
             text = folder.tag,
             style = MaterialTheme.typography.titleMedium
         )
     }
+//    Box(
+//        modifier = Modifier
+//            .clickable(
+//                interactionSource = remember { MutableInteractionSource() },
+//                indication = rememberRipple(
+//                    bounded = true
+//                ),
+//                onClick = onClick
+//            )
+//            .padding(16.dp)
+//            .fillMaxWidth(1f)
+//
+//    ) {
+//
+//    }
 }

build.gradle.kts

@@ -30,6 +30,7 @@ plugins {
     id("org.jetbrains.kotlin.plugin.serialization") version (Versions.kotlin)
     id("androidx.baselineprofile") version "1.3.4" apply false
     id("com.android.test") version "8.10.0" apply false
+    id("org.jetbrains.kotlin.plugin.compose") version(Versions.kotlin) apply false
 }