Progress 1

.idea/other.xml

@@ -14,6 +14,17 @@
           <option name="screenX" value="720" />
           <option name="screenY" value="1280" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="OnePlus" />
+          <option name="codename" value="OP5552L1" />
+          <option name="id" value="OP5552L1" />
+          <option name="manufacturer" value="OnePlus" />
+          <option name="name" value="CPH2415" />
+          <option name="screenDensity" value="480" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2412" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="34" />
           <option name="brand" value="OPPO" />
@@ -102,6 +113,17 @@
           <option name="screenX" value="1080" />
           <option name="screenY" value="1272" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="33" />
+          <option name="brand" value="motorola" />
+          <option name="codename" value="austin" />
+          <option name="id" value="austin" />
+          <option name="manufacturer" value="Motorola" />
+          <option name="name" value="moto g 5G (2022)" />
+          <option name="screenDensity" value="280" />
+          <option name="screenX" value="720" />
+          <option name="screenY" value="1600" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="33" />
           <option name="brand" value="samsung" />
@@ -267,6 +289,17 @@
           <option name="screenX" value="1080" />
           <option name="screenY" value="2340" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="gts7xllite" />
+          <option name="id" value="gts7xllite" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="SM-T738U" />
+          <option name="screenDensity" value="340" />
+          <option name="screenX" value="1600" />
+          <option name="screenY" value="2560" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="33" />
           <option name="brand" value="samsung" />
@@ -278,6 +311,28 @@
           <option name="screenX" value="1848" />
           <option name="screenY" value="2960" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="gts8wifi" />
+          <option name="id" value="gts8wifi" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Tab S8" />
+          <option name="screenDensity" value="274" />
+          <option name="screenX" value="1600" />
+          <option name="screenY" value="2560" />
+        </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="gts9fe" />
+          <option name="id" value="gts9fe" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy Tab S9 FE 5G" />
+          <option name="screenDensity" value="280" />
+          <option name="screenX" value="1440" />
+          <option name="screenY" value="2304" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="34" />
           <option name="brand" value="google" />
@@ -333,6 +388,17 @@
           <option name="screenX" value="720" />
           <option name="screenY" value="1600" />
         </PersistentDeviceSelectionData>
+        <PersistentDeviceSelectionData>
+          <option name="api" value="34" />
+          <option name="brand" value="samsung" />
+          <option name="codename" value="o1q" />
+          <option name="id" value="o1q" />
+          <option name="manufacturer" value="Samsung" />
+          <option name="name" value="Galaxy S21" />
+          <option name="screenDensity" value="421" />
+          <option name="screenX" value="1080" />
+          <option name="screenY" value="2400" />
+        </PersistentDeviceSelectionData>
         <PersistentDeviceSelectionData>
           <option name="api" value="31" />
           <option name="brand" value="google" />

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

app/src/main/java/com/example/caloryapp/MainActivity.kt

@@ -4,8 +4,15 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
-import com.example.caloryapp.pages.NavBarScreen
+import androidx.navigation.compose.rememberNavController
+import com.example.caloryapp.navigation.Navigation
+import com.example.caloryapp.pages.account.ProfileScreen
+import com.example.caloryapp.pages.dashboard.HomeScreen
+//import com.example.caloryapp.pages.NavBarScreen
+import com.example.caloryapp.pages.onboard.LoginScreen
+import com.example.caloryapp.pages.onboard.OnBoardingScreen
 import com.example.caloryapp.ui.theme.CaloryAppTheme
+import com.example.caloryapp.widget.MainScreen
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -13,31 +20,10 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             CaloryAppTheme {
-                NavBarScreen()
+//                Navigation()
-//                ChangePasswordScreen(navController = rememberNavController())
+//                ProfileScreen(navController = rememberNavController())
-//                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
+                MainScreen()
-//                    Greeting(
-//                        name = "Android",
-//                        modifier = Modifier.padding(innerPadding)
-//                    )
-//                }
             }
         }
     }
-}
+}
-
-//@Composable
-//fun Greeting(name: String, modifier: Modifier = Modifier) {
-//    Text(
-//        text = "Hello $name!",
-//        modifier = modifier
-//    )
-//}
-//
-//@Preview(showBackground = true)
-//@Composable
-//fun GreetingPreview() {
-//    CaloryAppTheme {
-//        Greeting("Android")
-//    }
-//}

app/src/main/java/com/example/caloryapp/navigation/Navigation.kt

@@ -13,6 +13,7 @@ import com.example.caloryapp.pages.onboard.OTPVerificationScreen
 import com.example.caloryapp.pages.onboard.OnBoardingScreen
 import com.example.caloryapp.pages.onboard.SuccessChangePassword
 import com.example.caloryapp.pages.onboard.SuccessRegister
+import com.example.caloryapp.widget.MainScreen
 
 @Composable
 fun Navigation(modifier: Modifier = Modifier) {
@@ -31,6 +32,9 @@ fun Navigation(modifier: Modifier = Modifier) {
         composable(NavigationScreen.NavBarScreen.name) {
             NavBarScreen()
         }
+        composable(NavigationScreen.MainScreen.name) {
+            MainScreen()
+        }
         composable(NavigationScreen.ForgotPasswordScreen.name) {
             ForgotPasswordScreen(navController = navController)
         }

app/src/main/java/com/example/caloryapp/navigation/NavigationScreen.kt

@@ -5,6 +5,7 @@ enum class NavigationScreen {
     LoginScreen,
     NavBarScreen,
     HomeScreen,
+    MainScreen,
     ForgotPasswordScreen,
     ChangePasswordScreen,
     OTPVerificationScreen,
@@ -17,6 +18,7 @@ enum class NavigationScreen {
             OnBoardingScreen.name -> OnBoardingScreen
             LoginScreen.name -> LoginScreen
             NavBarScreen.name -> NavBarScreen
+            MainScreen.name -> MainScreen
             HomeScreen.name -> HomeScreen
             ProfileScreen.name -> ProfileScreen
             ForgotPasswordScreen.name -> ForgotPasswordScreen

app/src/main/java/com/example/caloryapp/pages/NavBarScreen.kt

@@ -64,15 +64,9 @@ fun NavBarScreen(modifier: Modifier = Modifier) {
                 navController = navController,
                 startDestination = BottomNavigationScreen.HomeScreen.title
             ) {
-                composable(BottomNavigationScreen.HomeScreen.title) {
-                    HomeScreen(navController = navController)
-                }
-                composable(BottomNavigationScreen.ProfileScreen.title) {
-                    ProfileScreen(navController = navController)
-                }
             }
         }
-    )
+                                                                                                                                                             )
 }
 
 @Composable

app/src/main/java/com/example/caloryapp/pages/account/ProfileScreen.kt

@@ -14,12 +14,15 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.Text
+import androidx.compose.material.Divider
+import androidx.compose.material3.DrawerState
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -27,63 +30,98 @@ import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.core.os.unregisterForAllProfilingResults
 import androidx.navigation.NavController
 import com.example.caloryapp.R
 import com.example.caloryapp.ui.theme.background
 import com.example.caloryapp.ui.theme.bold
+import com.example.caloryapp.ui.theme.medium
+import com.example.caloryapp.ui.theme.primary
 import com.example.caloryapp.ui.theme.primaryblack
 import com.example.caloryapp.ui.theme.primarygrey
 import com.example.caloryapp.ui.theme.primaryred
+import com.example.caloryapp.ui.theme.regular
 import com.example.caloryapp.widget.SimpleAlertDialog
+import kotlinx.coroutines.launch
+import java.text.SimpleDateFormat
+import java.util.Calendar
+import java.util.Locale
 
 @Composable
-fun ProfileScreen(modifier: Modifier = Modifier, navController: NavController) {
+fun ProfileScreen(
+    modifier: Modifier = Modifier,
+    navController: NavController,
+    drawerState: DrawerState,
+    scope: kotlinx.coroutines.CoroutineScope
+) {
     val openAlertDialog = remember { mutableStateOf(false) }
+    val currentDate = Calendar.getInstance().time
+    val dateFormat = SimpleDateFormat("EEEE, dd MMMM yyyy", Locale("id", "ID"))
+    val formattedDate = dateFormat.format(currentDate)
 
     Box(
         modifier
             .fillMaxSize()
             .background(background)
     ) {
-        Column(modifier.padding(horizontal = 25.dp, vertical = 40.dp)) {
+        Column(modifier.padding(horizontal = 25.dp, vertical = 45.dp)) {
             Spacer(modifier.height(50.dp))
-            androidx.compose.material.Text(
+            Row(Modifier.fillMaxWidth(), Arrangement.SpaceBetween,
-                text = stringResource(R.string.akun),
+                verticalAlignment = Alignment.CenterVertically
-                style = TextStyle(
+            ) {
-                    fontSize = 35.sp,
-                    color = primaryblack,
-                    fontFamily = bold
-                )
-            )
-            Spacer(modifier.height(50.dp))
-            Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
                 Image(
-                    painter = painterResource(id = R.drawable.ic_profile_men),
+                    modifier = Modifier.clickable { scope.launch { drawerState.open() } },
-                    contentDescription = null,
+                    painter = painterResource(id = R.drawable.ic_home_acc),
-                    modifier = Modifier.size(80.dp)
+                    contentDescription = null
                 )
-                Spacer(modifier.width(20.dp))
+                Row(verticalAlignment = Alignment.CenterVertically) {
-                Column {
+                    Column(horizontalAlignment = Alignment.End) {
-                    androidx.compose.material.Text(
+                        Text(
-                        text = "Naufal Kadhafi",
+                            text = "Naufal Kadhafi",
-                        style = TextStyle(
+                            style = TextStyle(
-                            fontSize = 23.sp,
+                                fontSize = 20.sp,
-                            color = primaryblack,
+                                color = Color.Black,
-                            fontFamily = bold
+                                fontFamily = bold
+                            )
                         )
-                    )
+                        Text(
-                    Spacer(modifier = Modifier.height(5.dp))
+                            text = "@kadhafiinl",
-                    androidx.compose.material.Text(
+                            style = TextStyle(
-                        text = "kadhafinaufal2@gmail.com",
+                                fontSize = 14.sp,
-                        style = TextStyle(
+                                color = Color.Black,
-                            fontSize = 15.sp,
+                                fontFamily = bold
-                            color = primarygrey,
+                            )
-                            fontFamily = bold
                         )
+                    }
+                    Spacer(modifier = Modifier.width(14.dp))
+                    Image(
+                        painter = painterResource(id = R.drawable.ic_profile_women),
+                        contentDescription = null,
+                        Modifier.size(45.dp)
                     )
                 }
             }
-            Spacer(modifier.height(60.dp))
+
+            Spacer(modifier.height(40.dp))
+            Text(
+                text = "Hari Ini,",
+                style = TextStyle(
+                    fontSize = 38.sp,
+                    color = Color.Black,
+                    fontFamily = bold
+                )
+            )
+            Text(
+                text = formattedDate,
+                style = TextStyle(
+                    fontSize = 24.sp,
+                    color = Color.Black,
+                    fontFamily = medium
+                )
+            )
+            Spacer(modifier.height(10.dp))
+            Divider(color = primary.copy(alpha = 0.2f), thickness = 3.dp)
+            Spacer(modifier.height(20.dp))
             Row(Modifier.fillMaxWidth(), Arrangement.SpaceBetween) {
                 Row {
                     Image(

app/src/main/java/com/example/caloryapp/pages/dashboard/HomeScreen.kt

@@ -2,6 +2,7 @@ package com.example.caloryapp.pages.dashboard
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -13,7 +14,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.material.Divider
+import androidx.compose.material3.DrawerState
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -22,6 +23,7 @@ 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.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
@@ -35,57 +37,90 @@ import com.example.caloryapp.ui.theme.primary
 import com.example.caloryapp.ui.theme.primaryblack
 import com.example.caloryapp.ui.theme.primarygrey
 import com.example.caloryapp.widget.FilterBar
+import kotlinx.coroutines.launch
 
 @Composable
-fun HomeScreen(modifier: Modifier = Modifier, navController: NavController) {
+fun HomeScreen(
+    navController: NavController,
+    drawerState: DrawerState,
+    scope: kotlinx.coroutines.CoroutineScope
+) {
     var selectedFilter by remember { mutableStateOf("Semua") }
 
     Box(
-        modifier
+        modifier = Modifier
             .fillMaxSize()
-            .background(background)) {
+            .background(background)
-        Column(modifier.padding(horizontal = 25.dp, vertical = 45.dp)) {
+    ) {
+        Column(modifier = Modifier.padding(horizontal = 25.dp, vertical = 45.dp)) {
             Spacer(modifier = Modifier.height(50.dp))
-            Row(Modifier.fillMaxWidth(), Arrangement.SpaceBetween,verticalAlignment = Alignment.CenterVertically) {
+
-                Image(painter = painterResource(id = R.drawable.ic_home_acc), contentDescription = null)
+            Row(
+                Modifier.fillMaxWidth(),
+                Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Image(
+                    modifier = Modifier.clickable { scope.launch { drawerState.open() } },
+                    painter = painterResource(id = R.drawable.ic_home_acc),
+                    contentDescription = null
+                )
+
                 Row(verticalAlignment = Alignment.CenterVertically) {
                     Column(horizontalAlignment = Alignment.End) {
-                        androidx.compose.material.Text(
+                        Text(
                             text = "Naufal Kadhafi",
                             style = TextStyle(
                                 fontSize = 20.sp,
-                                color = primaryblack,
+                                color = Color.Black,
                                 fontFamily = bold
                             )
                         )
-                        androidx.compose.material.Text(
+                        Text(
                             text = "@kadhafiinl",
                             style = TextStyle(
                                 fontSize = 14.sp,
-                                color = primaryblack,
+                                color = Color.Black,
                                 fontFamily = bold
                             )
                         )
                     }
                     Spacer(modifier = Modifier.width(14.dp))
-                    Image(painter = painterResource(id = R.drawable.ic_profile_women), contentDescription = null, Modifier.size(45.dp))
+                    Image(
+                        painter = painterResource(id = R.drawable.ic_profile_women),
+                        contentDescription = null,
+                        Modifier.size(45.dp)
+                    )
                 }
             }
+
             Spacer(modifier = Modifier.height(35.dp))
+
+            // Teks sapaan
             Row(Modifier.width(215.dp)) {
                 Text(
                     text = "Hai Naufal, Bagaimana kabar kamu hari ini?",
                     style = TextStyle(
                         fontSize = 22.sp,
-                        color = primaryblack,
+                        color = Color.Black,
                         fontFamily = bold
                     )
                 )
             }
+
+//            Spacer(modifier = Modifier.height(15.dp))
+
+            // Tombol untuk membuka Navigation Drawer
+//            Button(onClick = {  }) {
+//                Text(text = "Buka Menu")
+//            }
+
             Spacer(modifier = Modifier.height(15.dp))
-            Divider(color = primary.copy(alpha = 0.2f), thickness = 3.dp)
+            androidx.compose.material3.Divider(color = primary.copy(alpha = 0.2f), thickness = 3.dp)
             Spacer(modifier = Modifier.height(15.dp))
-            FilterBar(selectedFilter = selectedFilter, onFilterSelected = { selectedFilter = it})
+
+            // Filter Bar
+            FilterBar(selectedFilter = selectedFilter, onFilterSelected = { selectedFilter = it })
         }
     }
 }

app/src/main/java/com/example/caloryapp/pages/onboard/LoginScreen.kt

@@ -118,7 +118,7 @@ fun LoginScreen(modifier: Modifier = Modifier, navController: NavController) {
             }
             Spacer(modifier.height(35.dp))
             Button(
-                onClick = { navController.navigate(NavigationScreen.NavBarScreen.name) },
+                onClick = { navController.navigate(NavigationScreen.MainScreen.name) },
                 modifier
                     .width(360.dp)
                     .height(50.dp),

app/src/main/java/com/example/caloryapp/widget/MainScreen.kt

@@ -0,0 +1,186 @@
+package com.example.caloryapp.widget
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+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.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Divider
+import androidx.compose.material3.DrawerState
+import androidx.compose.material3.DrawerValue
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ModalDrawerSheet
+import androidx.compose.material3.ModalNavigationDrawer
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.material3.rememberDrawerState
+import androidx.compose.runtime.Composable
+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.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import com.example.caloryapp.R
+import com.example.caloryapp.pages.account.ProfileScreen
+import com.example.caloryapp.pages.dashboard.HomeScreen
+import com.example.caloryapp.ui.theme.background
+import com.example.caloryapp.ui.theme.bold
+import com.example.caloryapp.ui.theme.medium
+import com.example.caloryapp.ui.theme.primary
+import com.example.caloryapp.ui.theme.semibold
+import kotlinx.coroutines.launch
+
+sealed class DrawerScreen(val title: String) {
+    data object HomeScreen : DrawerScreen("Home")
+    data object ProfileScreen : DrawerScreen("Akun")
+}
+
+@SuppressLint("UnusedMaterialScaffoldPaddingParameter", "UnusedMaterial3ScaffoldPaddingParameter")
+@Composable
+fun MainScreen() {
+    val navController = rememberNavController()
+    val drawerState = rememberDrawerState(DrawerValue.Closed)
+    val scope = rememberCoroutineScope()
+
+    ModalNavigationDrawer(
+        drawerState = drawerState,
+        drawerContent = {
+            DrawerContent(navController, drawerState, scope)
+        }
+    ) {
+        NavHost(navController = navController, startDestination = DrawerScreen.HomeScreen.title) {
+            composable(DrawerScreen.HomeScreen.title) {
+                HomeScreen(navController = navController, drawerState = drawerState, scope = scope)
+            }
+            composable(DrawerScreen.ProfileScreen.title) {
+                ProfileScreen(navController = navController, drawerState = drawerState, scope = scope)
+            }
+        }
+    }
+}
+
+@Composable
+fun DrawerContent(
+    navController: NavHostController,
+    drawerState: DrawerState,
+    scope: kotlinx.coroutines.CoroutineScope
+) {
+    ModalDrawerSheet(modifier = Modifier.background(primary)) {
+        Spacer(modifier = Modifier.height(30.dp))
+        Row(
+            modifier = Modifier.padding(horizontal = 15.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_profile_women),
+                    contentDescription = null,
+                    Modifier.size(70.dp)
+                )
+                Spacer(modifier = Modifier.width(12.dp))
+                Column(horizontalAlignment = Alignment.Start) {
+                    Text(
+                        text = "Naufal Kadhafi",
+                        style = TextStyle(
+                            fontSize = 20.sp,
+                            color = Color.Black,
+                            fontFamily = semibold
+                        )
+                    )
+                    Text(
+                        text = "@kadhafiinl",
+                        style = TextStyle(
+                            fontSize = 14.sp,
+                            color = Color.Black,
+                            fontFamily = medium
+                        )
+                    )
+                }
+
+            }
+        }
+        Spacer(modifier = Modifier.height(20.dp))
+        Divider(
+            modifier = Modifier.padding(horizontal = 12.dp),
+            color = primary.copy(alpha = 0.1f),
+            thickness = 3.dp
+        )
+        Spacer(modifier = Modifier.height(10.dp))
+        DrawerItem(
+            "Home",
+            R.drawable.ic_home_filled,
+            navController,
+            DrawerScreen.HomeScreen.title,
+            drawerState,
+            scope
+        )
+        DrawerItem(
+            "Akun",
+            R.drawable.ic_profile_filled,
+            navController,
+            DrawerScreen.ProfileScreen.title,
+            drawerState,
+            scope
+        )
+    }
+}
+
+@Composable
+fun DrawerItem(
+    title: String,
+    icon: Int,
+    navController: NavHostController,
+    route: String,
+    drawerState: DrawerState,
+    scope: kotlinx.coroutines.CoroutineScope
+) {
+    TextButton(onClick = {
+        if (navController.currentDestination?.route != route) {
+            navController.navigate(route) {
+                popUpTo(navController.graph.startDestinationId) { inclusive = false }
+            }
+        }
+        scope.launch { drawerState.close() }
+    }) {
+        Icon(
+            imageVector = ImageVector.vectorResource(id = icon),
+            contentDescription = null,
+            modifier = Modifier.size(30.dp),
+            tint = primary,
+        )
+        Text(
+            title,
+            modifier = Modifier.padding(16.dp),
+            color = primary,
+            fontSize = 18.sp,
+            fontFamily = bold,
+            letterSpacing = 0.5.sp
+        )
+    }
+}