update: toolbar with menu button

app/build.gradle.kts

@@ -50,9 +50,11 @@ dependencies {
     implementation(libs.androidx.compose.material3)
     implementation(libs.androidx.compose.ui)
     implementation(libs.androidx.compose.ui.graphics)
+    implementation(libs.androidx.compose.ui.text)
     implementation(libs.androidx.compose.ui.tooling.preview)
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.lifecycle.runtime.ktx)
+    implementation(libs.androidx.material3)
     implementation(libs.androidx.navigation.compose)
     testImplementation(libs.junit)
     androidTestImplementation(platform(libs.androidx.compose.bom))
@@ -63,6 +65,8 @@ dependencies {
     debugImplementation(libs.androidx.compose.ui.tooling)
 
     // Hilt
+    implementation(libs.androidx.hilt.navigation.compose) // for viewmodel injection
+
     implementation(libs.hilt.android)
     ksp(libs.hilt.android.compiler)
 
@@ -73,4 +77,7 @@ dependencies {
     ksp(libs.dagger.compiler)
 
     implementation(libs.kotlinx.serialization.json)
+
+    // Material icons
+    implementation(libs.androidx.compose.material.icons.extended)
 }

app/src/main/java/app/odweta/medilarm/activities/MainActivity.kt

@@ -4,6 +4,7 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
+import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
@@ -13,6 +14,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import app.odweta.medilarm.nav.NavigationHost
+import app.odweta.medilarm.ui.screens.home.HomeScreenViewModel
 import app.odweta.medilarm.ui.theme.MedilarmTheme
 import dagger.hilt.android.AndroidEntryPoint
 

app/src/main/java/app/odweta/medilarm/ui/components/MedilarmToolbar.kt

@@ -1,7 +1,22 @@
 package app.odweta.medilarm.ui.components
 
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Menu
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.navigation.NavController
+import app.odweta.medilarm.R
 
 /**
  * A top bar featuring the app's name on the left side and a button to access the settings page
@@ -11,6 +26,39 @@ import androidx.compose.ui.Modifier
  * TODO: {TOOLBAR} settings button
  */
 @Composable
-fun MedilarmToolbar(modifier: Modifier = Modifier) {
-    
+fun MedilarmToolbar(
+    modifier: Modifier = Modifier,
+    navController: NavController,
+    onMenuButtonClick: (NavController) -> Unit
+) {
+    Box(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        Row {
+            AppName()
+
+            Spacer(modifier = Modifier.weight(1f))
+
+            MenuButton(navController, onMenuButtonClick)
+        }
+    }
+}
+
+@Composable
+private fun AppName() {
+    Text(
+        text = stringResource(R.string.app_name),
+        style = TextStyle(
+            fontStyle = FontStyle.Italic
+        )
+    )
+}
+
+@Composable
+private fun MenuButton(navController: NavController, onMenuButtonClick: (NavController) -> Unit) {
+    IconButton(
+        onClick = { onMenuButtonClick(navController) }
+    ) {
+        Icon(Icons.Default.Menu, contentDescription = "menu button")
+    }
 }

app/src/main/java/app/odweta/medilarm/ui/screens/home/HomeScreen.kt

@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.navigation.NavController
 import app.odweta.medilarm.ui.components.MedilarmAlarm
 import app.odweta.medilarm.ui.components.MedilarmMeditation
@@ -14,6 +15,7 @@ import app.odweta.medilarm.ui.components.MedilarmToolbar
 @Composable
 fun HomeScreen(
     modifier: Modifier = Modifier,
+    viewModel: HomeScreenViewModel = hiltViewModel(),
     navController: NavController
 ) {
     Column(
@@ -22,7 +24,10 @@ fun HomeScreen(
         modifier = Modifier.fillMaxSize()
     ) {
         // toolbar (app name + settings button)
-        MedilarmToolbar()
+        MedilarmToolbar(
+            navController = navController,
+            onMenuButtonClick = viewModel::onMenuButtonClick
+        )
 
         // meditation starter
         MedilarmMeditation()

app/src/main/java/app/odweta/medilarm/ui/screens/home/HomeScreenViewModel.kt

@@ -1,4 +1,14 @@
 package app.odweta.medilarm.ui.screens.home
 
-class HomeScreenViewModel {
+import androidx.lifecycle.ViewModel
+import androidx.navigation.NavController
+import app.odweta.medilarm.nav.Route
+import dagger.hilt.android.lifecycle.HiltViewModel
+import javax.inject.Inject
+
+@HiltViewModel
+class HomeScreenViewModel @Inject constructor() : ViewModel() {
+    fun onMenuButtonClick(navController: NavController) {
+        navController.navigate(Route.SettingsScreen)
+    }
 }