Replace nav with a functional bottom anv

app/src/main/java/com/ti/mobpo/MainActivity.kt

@@ -1,23 +1,48 @@
 package com.ti.mobpo
 
+import android.annotation.SuppressLint
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.outlined.Favorite
+import androidx.compose.material.icons.outlined.Home
+import androidx.compose.material.icons.outlined.Person
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.navigation
+import androidx.navigation.compose.rememberNavController
 import com.ti.mobpo.ui.theme.MobileSecurityTheme
 
+data class BottomNavigationItem(
+    val title: String,
+    val selectedIcon: ImageVector,
+    val unselectedItem: ImageVector,
+    val route: String
+)
+
 class MainActivity : ComponentActivity() {
+    @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
             MobileSecurityTheme {
-                // A surface container using the 'background' color from the theme
-                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
-                    Navigation()
-                }
+                Navigation()
             }
         }
     }

app/src/main/java/com/ti/mobpo/NavBar.kt

@@ -1,55 +0,0 @@
-package com.ti.mobpo
-
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentHeight
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowBack
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.navigation.NavController
-import androidx.navigation.compose.rememberNavController
-
-@Composable
-fun TopBar(navController: NavController, showBack: Boolean) {
-    Row(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(16.dp)
-            .wrapContentHeight(Alignment.Top),
-        horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically
-    ) {
-        if (showBack) {
-            IconButton(onClick = { navController.navigateUp()
-            println("Pressed")
-            }) {
-                Icon(Icons.Default.ArrowBack, contentDescription = "Back")
-            }
-        } else {
-            IconButton(onClick = {}) {
-            }
-        }
-        Text(text = stringResource(R.string.app_title), fontWeight = FontWeight.Bold)
-    }
-}
-
-@Preview(showBackground = true)
-@Composable
-fun TopBarPreview() {
-    val navController = rememberNavController()
-    Surface {
-        TopBar(navController = navController, true)
-    }
-}

app/src/main/java/com/ti/mobpo/Navigation.kt

@@ -1,44 +1,112 @@
 package com.ti.mobpo
 
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.outlined.Favorite
+import androidx.compose.material.icons.outlined.Home
+import androidx.compose.material.icons.outlined.Person
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.NavigationBar
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
-import androidx.navigation.compose.navigation
 import androidx.navigation.compose.rememberNavController
-
-
-
+import com.ti.mobpo.screens.Favourites
+import com.ti.mobpo.screens.PokeSearch
+import com.ti.mobpo.screens.Profile
 
 
 @Composable
 fun Navigation() {
+    val items = listOf(
+        BottomNavigationItem(
+            title = "Home",
+            selectedIcon = Icons.Filled.Home,
+            unselectedItem = Icons.Outlined.Home,
+            route = Screen.PokeSearch.route
+        ),
+        BottomNavigationItem(
+            title = "Favourites",
+            selectedIcon = Icons.Filled.Favorite,
+            unselectedItem = Icons.Outlined.Favorite,
+            route = Screen.Favourites.route
+        ),
+        BottomNavigationItem(
+            title = "Profile",
+            selectedIcon = Icons.Filled.Person,
+            unselectedItem = Icons.Outlined.Person,
+            route = Screen.Profile.route
+        ),
+    )
+    var selectedItemIndex by rememberSaveable {
+        mutableStateOf(0)
+    }
     val navController = rememberNavController()
-    var showBackButton by remember { mutableStateOf(false) }
-
-    NavHost(navController = navController, startDestination = "Home"){
-        navigation(startDestination = Screen.PokeSearch.route, route = "Home"){
-            composable(route = Screen.PokeSearch.route) {
-                TopBar(navController = navController, showBackButton)
-                PokeSearch(navController = navController) {
-                    showBackButton = true
+    Scaffold (
+        bottomBar = {
+            NavigationBar {
+                items.forEachIndexed { index, item ->
+                    NavigationBarItem(
+                        selected = selectedItemIndex == index,
+                        onClick = {
+                            selectedItemIndex = index
+                            println("Navigating to ${item.route}")
+                            navController.navigate(item.route)
+                        },
+                        label = { Text(item.title) },
+                        alwaysShowLabel = true,
+                        icon = {
+                            if (index == selectedItemIndex) {
+                                item.selectedIcon
+                            } else {
+                                item.unselectedItem
+                            }
+                        }
+                    )
                 }
             }
+        },
+        content = { innerPadding ->
+            Surface(
+                modifier = Modifier.fillMaxSize().padding(innerPadding),
+                color = MaterialTheme.colorScheme.background,
+                content = {
+                    NavHost(navController = navController, startDestination = Screen.PokeSearch.route) {
+                        composable(route = Screen.PokeSearch.route) {
+                            PokeSearch()
+                        }
+                        composable(route = Screen.Favourites.route) {
+                            Favourites()
+                        }
+                        composable(route = Screen.Profile.route) {
+                            Profile()
+                        }
+                    }
+                }
+            )
         }
-    }
+    )
 }
 
+
 @Preview(showBackground = true)
 @Composable
 fun NavigationPreview() {
-    val navController = rememberNavController()
     Surface {
-        TopBar(navController = navController, false)
-        PokeSearch(navController = navController){}
+        PokeSearch()
     }
 }

app/src/main/java/com/ti/mobpo/Screen.kt

@@ -4,4 +4,5 @@ sealed class Screen (val route: String) {
     object PokeSearch : Screen("default_screen")
     object TopNav : Screen("navigation_bar")
     object Favourites : Screen("favourites_page")
+    object Profile : Screen("profile_page")
 }

app/src/main/java/com/ti/mobpo/screens/Favourites.kt

@@ -0,0 +1,10 @@
+package com.ti.mobpo.screens
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+
+@Composable
+fun Favourites() {
+    println("Favourites")
+    Text("Favourites Page")
+}

app/src/main/java/com/ti/mobpo/screens/PokeSearch.kt

@@ -1,4 +1,4 @@
-package com.ti.mobpo
+package com.ti.mobpo.screens
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
@@ -8,7 +8,6 @@ import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material3.Button
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -16,20 +15,18 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
-import androidx.navigation.Navigation
 import androidx.navigation.compose.rememberNavController
+import com.ti.mobpo.R
 
 
 @Composable
-fun PokeSearch(navController: NavController, onButtonPressed: () -> Unit) {
+fun PokeSearch() {
     var value by remember { mutableStateOf("") }
+    println("Search page")
     Row(
         modifier = Modifier.fillMaxSize().wrapContentSize(),
         verticalAlignment = Alignment.CenterVertically,
@@ -43,7 +40,7 @@ fun PokeSearch(navController: NavController, onButtonPressed: () -> Unit) {
         )
         Button(
             onClick = {
-                onButtonPressed()
+                /*TODO*/
             },
             modifier = Modifier.padding(start = 8.dp)
         ) {
@@ -54,6 +51,5 @@ fun PokeSearch(navController: NavController, onButtonPressed: () -> Unit) {
 @Preview(showBackground = true)
 @Composable
 fun PokeSearchApp(){
-    val navController = rememberNavController()
-    PokeSearch(navController = navController){}
+    PokeSearch()
 }

app/src/main/java/com/ti/mobpo/screens/Profile.kt

@@ -0,0 +1,9 @@
+package com.ti.mobpo.screens
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+
+@Composable
+fun Profile(){
+    Text("Profile Page")
+}