belindas-closet-android_2_97_navigation-bar (#114)

* Tabs added to TopAppBar in products detail page ONLY

* Removed tabs

* Drawer Icon added to ProductDetails Page. Non functioning.

* Back button on ProductDetail.kt now says 'Home' next to back arrow.

* Remove Scaffolding from Home.kt

* Menu icon added to ProductDetail.kt and IndividualProduct.kt. Pushed to right side of Nav bar and edit icon. No functionality.

---------

Co-authored-by: taylorpapke <[email protected]>

app/build.gradle

@@ -49,10 +49,10 @@ android {
 
 dependencies {
 
-    implementation 'androidx.core:core-ktx:1.10.1'
+    implementation 'androidx.core:core-ktx:1.12.0'
     implementation platform('org.jetbrains.kotlin:kotlin-bom:1.8.22')
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1'
-    implementation 'androidx.activity:activity-compose:1.7.2'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.2'
+    implementation 'androidx.activity:activity-compose:1.8.0'
     implementation 'androidx.compose.ui:ui'
     implementation 'androidx.compose.ui:ui-graphics'
     implementation 'androidx.compose.ui:ui-tooling-preview'
@@ -65,7 +65,7 @@ dependencies {
     debugImplementation 'androidx.compose.ui:ui-test-manifest'
 
     // Navigation
-    implementation 'androidx.navigation:navigation-compose:2.6.0'
+    implementation 'androidx.navigation:navigation-compose:2.7.5'
 
     // Material Design
     implementation "androidx.compose.material3:material3:1.2.0-alpha03"
@@ -85,4 +85,5 @@ dependencies {
 
     // Kotlin Reflection
     implementation "org.jetbrains.kotlin:kotlin-reflect:1.8.22"
+
 }

app/src/main/java/com/example/belindas_closet/screen/Home.kt

@@ -1,19 +1,30 @@
 package com.example.belindas_closet.screen
 
+import android.graphics.drawable.Icon
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material3.Button
 import androidx.compose.material3.Card
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -35,8 +46,10 @@ import com.example.belindas_closet.data.Datasource
 import com.example.belindas_closet.model.Product
 
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun HomePage(navController: NavController) {
+
     Row(
         modifier = Modifier
             .size(125.dp)

app/src/main/java/com/example/belindas_closet/screen/IndividualProduct.kt

@@ -36,17 +36,29 @@ import com.example.belindas_closet.R
 import com.example.belindas_closet.Routes
 import com.example.belindas_closet.model.Product
 import com.example.belindas_closet.data.Datasource
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material3.*
+import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
+import androidx.compose.runtime.*
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun IndividualProductPage(navController: NavController, productId: String) {
+
+    var drawerState by remember { mutableStateOf(DrawerValue.Closed) }
+
     Scaffold(
+
         modifier = Modifier
             .fillMaxSize(),
         topBar = {
             /* Back arrow that navigates back to login page */
             TopAppBar(
-                title = { Text("Home") },
+                title = { Text("Back") },
                 navigationIcon = {
                     IconButton(
                         onClick = {
@@ -55,7 +67,7 @@ fun IndividualProductPage(navController: NavController, productId: String) {
                     ) {
                         Icon(
                             imageVector = Icons.Default.ArrowBack,
-                            contentDescription = "Back to Home page"
+                            contentDescription = "Back to Product page"
                         )
                     }
                 },
@@ -67,6 +79,13 @@ fun IndividualProductPage(navController: NavController, productId: String) {
                     ) {
                         Icon(imageVector = Icons.Default.Edit, contentDescription = "Edit")
                     }
+                    IconButton(
+                        onClick = {
+                            drawerState = DrawerValue.Open
+                        }
+                    ) {
+                        Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
+                    }
                 }
             )
         },

app/src/main/java/com/example/belindas_closet/screen/ProductDetail.kt

@@ -15,15 +15,24 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material3.Card
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+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
@@ -44,6 +53,9 @@ import com.example.belindas_closet.data.Datasource
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ProductDetailPage(navController: NavController) {
+
+    var drawerState by remember { mutableStateOf(DrawerValue.Closed) }
+
     Scaffold(
         modifier = Modifier
             .fillMaxSize(),
@@ -74,9 +86,18 @@ fun ProductDetailPage(navController: NavController) {
                     ) {
                         Icon(imageVector = Icons.Default.Edit, contentDescription = "Edit")
                     }
+                    IconButton(
+                        onClick = {
+                            drawerState = DrawerValue.Open
+                        }
+                    ) {
+                        Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu")
+                    }
+
                 }
             )
         },
+
     ) { innerPadding ->
         val modifier = Modifier.padding(innerPadding)
         Column(