Home Page

src/app/src/main/java/fr/iut/alldev/allin/MainActivity.kt

@@ -3,12 +3,10 @@ package fr.iut.alldev.allin
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.material3.ExperimentalMaterial3Api
+import fr.iut.alldev.allin.ui.navigation.drawer.AllInDrawer
-import fr.iut.alldev.allin.ui.core.AllInDrawer
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
 class MainActivity : ComponentActivity() {
-    @OptIn(ExperimentalMaterial3Api::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInCard.kt

@@ -0,0 +1,50 @@
+package fr.iut.alldev.allin.ui.core
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AllInCard(
+    modifier: Modifier = Modifier,
+    onClick: (()->Unit)? = null,
+    radius: Int = 15,
+    backgroundColor: Color = AllInTheme.colors.white,
+    borderWidth: Dp? = null,
+    borderColor: Color = AllInTheme.colors.allIn_LightestGrey,
+    borderBrush: Brush? = null,
+    content: @Composable ()->Unit
+) {
+    onClick?.let {
+        Card(
+            modifier = modifier.fillMaxWidth(),
+            onClick = it,
+            shape = RoundedCornerShape(radius),
+            border = borderWidth?.let{ width -> borderBrush?.let{BorderStroke(width, it)} ?: BorderStroke(width, borderColor)},
+            colors = CardDefaults.cardColors(containerColor = backgroundColor)
+        ) {
+            content()
+        }
+    } ?: run {
+        Card(
+            modifier = modifier.fillMaxWidth(),
+            shape = RoundedCornerShape(radius),
+            border = borderWidth?.let{ width -> borderBrush?.let{BorderStroke(width, it)} ?: BorderStroke(width, borderColor)},
+            colors = CardDefaults.cardColors(containerColor = backgroundColor)
+        ) {
+            content()
+        }
+    }
+
+}
+

src/app/src/main/java/fr/iut/alldev/allin/ui/core/AllInChip.kt

@@ -0,0 +1,59 @@
+package fr.iut.alldev.allin.ui.core
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AllInChip(
+    text: String,
+    isSelected: Boolean = false,
+    onClick: ()->Unit = {},
+    modifier: Modifier = Modifier
+) {
+    Card(
+        modifier = modifier.wrapContentSize(),
+        shape = RoundedCornerShape(50),
+        onClick = onClick,
+        border = if(!isSelected) BorderStroke(1.dp, AllInTheme.colors.allIn_LightestGrey) else null,
+        colors = CardDefaults.cardColors(containerColor = with(AllInTheme.colors){
+            if(isSelected) allIn_Purple else white
+        })
+    ) {
+        Text(
+            text = text,
+            modifier = Modifier.padding(vertical = 8.dp, horizontal = 22.dp),
+            textAlign = TextAlign.Center,
+            fontWeight = if(isSelected) FontWeight.W800 else null,
+            color = with(AllInTheme.colors){
+                if(isSelected) white else allIn_LightGrey
+            }
+
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun AllInChipPreviewUnselected() {
+    AllInChip("Public", false)
+}
+
+@Preview
+@Composable
+private fun AllInChipPreviewSelected() {
+    AllInChip("Public", true)
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/core/profilePicture.kt

@@ -14,17 +14,22 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 
 @Composable
 @Preview
-fun ProfilePicture() {
+fun ProfilePicture(
+    borderWidth: Dp? = null,
+    size: Dp = 80.dp,
+    modifier: Modifier = Modifier
+) {
     Card(
-        modifier = Modifier.size(80.dp),
+        modifier = modifier.size(size),
         shape = RoundedCornerShape(100),
         colors = CardDefaults.cardColors(containerColor = AllInTheme.colors.allIn_DarkerGrey),
-        border = BorderStroke(1.dp, AllInTheme.colors.allIn_DarkGrey)
+        border = borderWidth?.let{BorderStroke(it, AllInTheme.colors.allIn_DarkGrey)}
     ) {
         Box(Modifier.fillMaxSize()) {
             Icon(imageVector = Icons.Filled.Camera,

src/app/src/main/java/fr/iut/alldev/allin/ui/core/rainbowButton.kt

@@ -0,0 +1,38 @@
+package fr.iut.alldev.allin.ui.core
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@Composable
+fun RainbowButton(
+    text: String,
+    onClick: ()->Unit,
+    modifier: Modifier = Modifier
+) {
+    AllInCard(borderWidth = 1.dp, onClick = onClick, modifier = modifier) {
+        Text(
+            text = text,
+            textAlign = TextAlign.Center,
+            fontWeight = FontWeight.W700,
+            fontSize = 30.sp,
+            style = TextStyle(brush = AllInTheme.colors.allIn_TextGradient),
+            modifier = Modifier.padding(vertical = 20.dp).fillMaxWidth(),
+            )
+    }
+}
+
+@Preview
+@Composable
+private fun RainbowButtonPreview() {
+    RainbowButton(text = "Participer", onClick = { })
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/core/topbar/coinCounter.kt

@@ -1,4 +1,4 @@
-package fr.iut.alldev.allin.ui.core
+package fr.iut.alldev.allin.ui.core.topbar
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Row

src/app/src/main/java/fr/iut/alldev/allin/ui/core/topbar/topbar.kt

@@ -1,4 +1,4 @@
-package fr.iut.alldev.allin.ui.core
+package fr.iut.alldev.allin.ui.core.topbar
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
@@ -21,7 +21,7 @@ fun AllInTopBar(
     coinAmount: Int
 ) {
     Box(modifier = Modifier.height(86.dp).fillMaxWidth()
-        .background(brush = AllInTheme.colors.allIn_gradient)) {
+        .background(brush = AllInTheme.colors.allIn_MainGradient)) {
         IconButton(onClick = onMenuClicked,
             modifier = Modifier.align(Alignment.CenterStart)) {
             Icon(Icons.Default.Menu,

src/app/src/main/java/fr/iut/alldev/allin/ui/home/components/homeBetCard.kt

@@ -0,0 +1,138 @@
+package fr.iut.alldev.allin.ui.home.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Alignment.Companion.CenterEnd
+import androidx.compose.ui.Alignment.Companion.CenterHorizontally
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.zIndex
+import fr.iut.alldev.allin.ui.core.AllInCard
+import fr.iut.alldev.allin.ui.core.ProfilePicture
+import fr.iut.alldev.allin.ui.core.RainbowButton
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@Composable
+fun HomeBetCard(
+    creator: String,
+    category: String,
+    title: String,
+    date: String,
+    time: String,
+    nbPlayer: Int,
+    modifier: Modifier = Modifier,
+    onClickParticipate: ()->Unit
+) {
+    AllInCard(
+        radius = 7
+    ){
+        Column(Modifier.fillMaxWidth()) {
+            Row(
+                Modifier
+                    .align(Alignment.End)
+                    .padding(top = 12.dp, end = 10.dp)) {
+                Text(
+                    fontSize = 10.sp,
+                    text = "proposé par ",
+                    color = AllInTheme.colors.allIn_LightGrey
+                )
+                Text(
+                    fontSize = 10.sp,
+                    text = creator,
+                    fontWeight = FontWeight.W600
+
+                )
+            }
+            Column(Modifier.padding(horizontal = 19.dp, vertical = 11.dp)) {
+                Text(
+                    text = category,
+                    fontSize = 15.sp,
+                    color = AllInTheme.colors.allIn_LightGrey,
+                )
+                Text(
+                    text = title,
+                    fontSize = 20.sp,
+                    fontWeight = FontWeight.W800
+                )
+                Spacer(modifier = Modifier.height(11.dp))
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Text(
+                        text = "Commence le",
+                        fontSize = 15.sp,
+                        color = AllInTheme.colors.allIn_LightGrey,
+                    )
+                    HomeBetCardDateTimeChip(
+                        text = date,
+                        modifier = Modifier.padding(horizontal = 8.dp)
+                    )
+                    HomeBetCardDateTimeChip(time)
+                }
+            }
+            HorizontalDivider(
+                thickness = 1.dp,
+                color = AllInTheme.colors.allIn_LightestGrey
+            )
+            Column(
+                Modifier
+                    .background(AllInTheme.colors.allIn_LightestestGrey)
+            ) {
+                Row(
+                    modifier = Modifier
+                        .align(CenterHorizontally)
+                        .padding(7.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ){
+                    val nRepeat = if (nbPlayer > 5) 5 else nbPlayer
+                    Box(
+                        Modifier.width((nRepeat*15).dp)
+                    ){
+                        repeat(nRepeat) {
+                            ProfilePicture(
+                                size = 30.dp,
+                                modifier = Modifier
+                                    .align(CenterEnd)
+                                    .offset(x = (it * -15).dp)
+                                    .zIndex(-it.toFloat())
+                            )
+                        }
+                    }
+                    Spacer(modifier = Modifier.width(12.dp))
+                    Text(
+                        text = "$nbPlayer joueurs en attente",
+                        color = AllInTheme.colors.allIn_LightGrey
+                    )
+                }
+                RainbowButton(
+                    modifier = Modifier.padding(6.dp),
+                    text = "Participer",
+                    onClick = onClickParticipate
+                )
+            }
+            
+        }
+
+    }
+}
+
+@Preview
+@Composable
+private fun HomeBetCardPreview() {
+    HomeBetCard(
+        creator = "Lucas",
+        category = "Études",
+        title = "Emre va réussir son TP de CI/CD mercredi?",
+        date = "12 Sept.",
+        time = "13:00",
+        nbPlayer = 4,
+        onClickParticipate = {}
+    )
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/home/components/homeBetCardDateTimeChip.kt

@@ -0,0 +1,41 @@
+package fr.iut.alldev.allin.ui.home.components
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@Composable
+fun HomeBetCardDateTimeChip(
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    Card(
+        modifier = modifier.wrapContentSize(),
+        shape = RoundedCornerShape(50),
+        border = BorderStroke(1.dp, AllInTheme.colors.allIn_LightestGrey),
+        colors = CardDefaults.cardColors(containerColor = AllInTheme.colors.white)
+    ) {
+        Text(
+            text = text,
+            modifier = Modifier.padding(vertical = 8.dp, horizontal = 16.dp),
+            textAlign = TextAlign.Center,
+            color = AllInTheme.colors.allIn_Purple
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun HomeBetCardDateTimeChipPreview() {
+    HomeBetCardDateTimeChip("11 Sept.")
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/home/components/homePopularCard.kt

@@ -0,0 +1,79 @@
+package fr.iut.alldev.allin.ui.home.components
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.LocalFireDepartment
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.ui.core.AllInCard
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+@Composable
+fun HomePopularCards(
+    nbPlayers: Int,
+    points: String,
+    title: String,
+    modifier: Modifier = Modifier
+) {
+    AllInCard(
+        modifier = modifier.fillMaxWidth()
+            .padding(6.dp)
+            .shadow(elevation = 6.dp, shape = RoundedCornerShape(15)),
+        backgroundColor = AllInTheme.colors.allIn_Dark,
+        borderWidth = 2.dp,
+        borderBrush = AllInTheme.colors.allIn_MainGradient
+    ) {
+        Column(modifier = Modifier.padding(13.dp)) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Icon(imageVector = Icons.Filled.LocalFireDepartment,
+                    contentDescription = null,
+                    tint = AllInTheme.colors.allIn_Pink)
+                Text(text = "Populaire",
+                    color = AllInTheme.colors.allIn_Pink,
+                    fontSize = 15.sp,
+                    fontWeight = FontWeight.W700
+                    )
+            }
+            Text(text = title,
+                color = AllInTheme.colors.white,
+                fontSize = 20.sp,
+                fontWeight = FontWeight.W800,
+                modifier = Modifier.padding(vertical = 22.dp))
+            Row(modifier = Modifier.align(alignment = Alignment.CenterHorizontally)) {
+                Text(text = nbPlayers.toString(),
+                    color = AllInTheme.colors.allIn_Pink,
+                    fontSize = 15.sp,
+                    fontWeight = FontWeight.W700)
+                Text(text = " joueurs - ",
+                    color = AllInTheme.colors.white,
+                    fontSize = 15.sp)
+
+                Text(text = points,
+                    color = AllInTheme.colors.allIn_Pink,
+                    fontSize = 15.sp,
+                    fontWeight = FontWeight.W700)
+                Text(text = " points en jeu",
+                    color = AllInTheme.colors.white,
+                    fontSize = 15.sp)
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun HomePopularCardsPreview() {
+    HomePopularCards(nbPlayers = 12, points = "2.35k", title = "Emre va réussir son TP de CI/CD mercredi?")
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/home/home.kt

@@ -1,9 +1,68 @@
 package fr.iut.alldev.allin.ui.home
 
-import androidx.compose.material3.Text
+import androidx.compose.foundation.layout.*
-import androidx.compose.runtime.Composable
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import fr.iut.alldev.allin.ui.core.AllInChip
+import fr.iut.alldev.allin.ui.home.components.HomeBetCard
+import fr.iut.alldev.allin.ui.home.components.HomePopularCards
 
 @Composable
+@Preview
 fun Home(){
-    Text(text = "HOME")
+
+    val horizontalPadding = 23.dp
+
+    Column {
+        HomePopularCards(
+            modifier = Modifier
+                .padding(horizontal = horizontalPadding)
+                .padding(top = 23.dp),
+            nbPlayers = 12,
+            points = "2.35k",
+            title = "Emre va réussir son TP de CI/CD mercredi?")
+        LazyRow(
+            modifier = Modifier.padding(vertical = 19.dp),
+            horizontalArrangement = Arrangement.spacedBy(9.dp)
+        ){
+            item{
+                Spacer(modifier = Modifier.width(horizontalPadding))
+            }
+            items(items){
+                var isSelected  by remember { mutableStateOf(false) }
+                AllInChip(text = it, isSelected = isSelected, onClick = {isSelected = !isSelected})
+            }
+            item{
+                Spacer(modifier = Modifier.width(horizontalPadding))
+            }
+        }
+        LazyColumn(
+            modifier = Modifier.padding(horizontal = horizontalPadding),
+            verticalArrangement = Arrangement.spacedBy(24.dp)
+        ){
+            items(5){
+                HomeBetCard(
+                    creator = "Lucas",
+                    category = "Études",
+                    title = "Emre va réussir son TP de CI/CD mercredi?",
+                    date = "11 Sept.",
+                    time = "13:00",
+                    nbPlayer = 4,
+                    onClickParticipate = { /* TODO */ }
+                )
+            }
+        }
+    }
 }
+
+val items = listOf(
+    "Public",
+    "En cours",
+    "Invitation",
+    "Terminés"
+)

src/app/src/main/java/fr/iut/alldev/allin/ui/navigation/NavHost.kt

@@ -1,5 +1,7 @@
 package fr.iut.alldev.allin.ui.navigation
 
+import androidx.compose.animation.EnterTransition
+import androidx.compose.animation.ExitTransition
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -13,20 +15,27 @@ import fr.iut.alldev.allin.ui.profile.Profile
 object Routes {
     const val HOME = "home"
     const val PROFILE = "profile"
+    const val BET = "BET"
+    const val BET_HISTORY = "BET_HISTORY"
+    const val FRIENDS = "FRIENDS"
+    const val CURRENT_BETS = "CURRENT_BETS"
+
 }
 
 @Composable
 fun AllInNavHost(modifier: Modifier = Modifier,
                  navController: NavHostController = rememberNavController(),
-                 startDestination: String = Routes.PROFILE
+                 startDestination: String = Routes.BET
 ) {
     NavHost(
         navController = navController,
         startDestination = startDestination,
-        modifier = modifier.fillMaxSize()
+        modifier = modifier.fillMaxSize(),
+        enterTransition = { EnterTransition.None },
+        exitTransition = { ExitTransition.None }
     ) {
-        composable(route = Routes.HOME){ Home() }
+        composable(route = Routes.BET){ Home() }
-        composable(route = Routes.PROFILE){ Profile() }
+        composable(route = Routes.BET_HISTORY){ Profile() }
     }
 }
 

src/app/src/main/java/fr/iut/alldev/allin/ui/navigation/drawer/drawer.kt

@@ -1,5 +1,6 @@
-package fr.iut.alldev.allin.ui.core
+package fr.iut.alldev.allin.ui.navigation.drawer
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Settings
@@ -15,6 +16,10 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
+import fr.iut.alldev.allin.ui.core.topbar.AllInTopBar
+import fr.iut.alldev.allin.ui.core.ProfilePicture
+import fr.iut.alldev.allin.ui.navigation.AllInNavHost
+import fr.iut.alldev.allin.ui.navigation.Routes
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 import kotlinx.coroutines.launch
 import kotlin.math.abs
@@ -25,10 +30,10 @@ sealed class TopLevelDestination(
     val title: String,
     val subtitle: String,
 ) {
-    object BET : TopLevelDestination(route = "BET", title = "CREER UN BET", subtitle = "Créez un nouveau BET et faites participer vos amis.")
+    object BET : TopLevelDestination(route = Routes.BET, title = "CREER UN BET", subtitle = "Créez un nouveau BET et faites participer vos amis.")
-    object BET_HISTORY : TopLevelDestination(route = "BET_HISTORY", title = "HISTORIQUE DES BETS", subtitle = "Consultez vos paris en cours et terminés.")
+    object BET_HISTORY : TopLevelDestination(route = Routes.BET_HISTORY, title = "HISTORIQUE DES BETS", subtitle = "Consultez vos paris en cours et terminés.")
-    object FRIENDS : TopLevelDestination(route = "FRIENDS", title = "AMIS", subtitle = "Défiez vos porches en les ajoutant en amis.")
+    object FRIENDS : TopLevelDestination(route = Routes.FRIENDS, title = "AMIS", subtitle = "Défiez vos porches en les ajoutant en amis.")
-    object CURRENT_BETS : TopLevelDestination(route = "CURRENT_BETS", title = "BETS EN COURS", subtitle = "Gérez vos bets et récompensez les gagnants.")
+    object CURRENT_BETS : TopLevelDestination(route = Routes.CURRENT_BETS, title = "BETS EN COURS", subtitle = "Gérez vos bets et récompensez les gagnants.")
 }
 
 val topLevelDestinations = listOf(
@@ -41,18 +46,19 @@ val topLevelDestinations = listOf(
 @Composable
 fun AllInDrawer(
     navController: NavHostController = rememberNavController(),
-    drawerState: DrawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
+    drawerState: DrawerState = rememberDrawerState(initialValue = DrawerValue.Closed),
+    startDestination: String = Routes.BET
+
 ) {
     val scope = rememberCoroutineScope()
     val drawerOffset = derivedStateOf { drawerState.offset.value }
-
     var drawerWidth by remember {
         mutableStateOf(drawerState.offset.value)
     }
-
     LaunchedEffect(drawerWidth == 0f) {
         drawerWidth = drawerState.offset.value
     }
+
     ModalNavigationDrawer(
         drawerState = drawerState,
         drawerContent = {
@@ -65,7 +71,9 @@ fun AllInDrawer(
                         .padding(top = 39.dp, bottom = 26.dp)
                         .fillMaxWidth(),
                     horizontalAlignment = Alignment.CenterHorizontally){
-                    ProfilePicture()
+                    ProfilePicture(
+                        borderWidth = 1.dp
+                    )
                     Spacer(modifier = Modifier.height(12.dp))
                     Text(text = "Pseudo",
                         fontSize = 20.sp,
@@ -78,7 +86,18 @@ fun AllInDrawer(
                         title = item.title,
                         subtitle = item.subtitle,
                         emoji = null,
-                        onClick = { scope.launch { drawerState.close() } },
+                        onClick = { scope.launch { drawerState.close() }
+                                    navController.navigate(item.route){
+                                        launchSingleTop = true
+                                        popUpTo(
+                                            startDestination
+                                        ) {
+                                            saveState = true
+                                            inclusive = true
+                                        }
+                                        restoreState = true
+                                    }
+                                  },
                         modifier = Modifier.padding(vertical = 5.dp, horizontal = 13.dp)
                     )
                 }
@@ -106,9 +125,15 @@ fun AllInDrawer(
             Column(
                 modifier = Modifier
                     .padding(it)
-                    .fillMaxSize(),
+                    .fillMaxSize()
+                    .background(AllInTheme.colors.allIn_White),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
+                AllInNavHost(
+                    modifier = Modifier.fillMaxSize(),
+                    navController = navController,
+                    startDestination = startDestination
+                )
             }
         }
     }

src/app/src/main/java/fr/iut/alldev/allin/ui/navigation/drawer/drawerCell.kt

@@ -1,4 +1,4 @@
-package fr.iut.alldev.allin.ui.core
+package fr.iut.alldev.allin.ui.navigation.drawer
 
 import android.media.Image
 import androidx.compose.foundation.BorderStroke

src/app/src/main/java/fr/iut/alldev/allin/ui/theme/Color.kt

@@ -14,10 +14,14 @@ data class AllInColors(
     val allIn_Grey: Color,
     val allIn_LightGrey: Color,
     val allIn_LighterGrey: Color,
+    val allIn_LightestGrey: Color,
+    val allIn_LightestestGrey: Color,
     val allIn_White: Color,
     val white: Color,
     val allIn_Pink: Color,
-    val allIn_gradient: Brush
+    val allIn_Purple: Color,
+    val allIn_MainGradient: Brush,
+    val allIn_TextGradient: Brush
 )
 
 internal val LocalColors = staticCompositionLocalOf {
@@ -28,15 +32,23 @@ internal val LocalColors = staticCompositionLocalOf {
         allIn_Grey = Color(0xFF525252),
         allIn_LightGrey = Color(0XFFAAAAAA),
         allIn_LighterGrey = Color(0XFFC5C5C5),
+        allIn_LightestGrey = Color(0XFFEBEBEB),
+        allIn_LightestestGrey = Color(0XFFF7F7F7),
         allIn_White = Color(0xFFEBEBF6),
         white = Color(0xFFFFFFFF),
         allIn_Pink = Color(0xFFFF2A89),
-        allIn_gradient = Brush.linearGradient(
+        allIn_Purple = Color(0xFF7D79FF),
+
+        allIn_MainGradient = Brush.linearGradient(
             0.0f to Color(0xFFf951a8),
             0.5f to Color(0xFFaa7ef3),
             1.1f to Color(0xFF199fee),
             start = Offset(0f, Float.POSITIVE_INFINITY),
             end = Offset(Float.POSITIVE_INFINITY, 0f)
+        ),
+        allIn_TextGradient = Brush.horizontalGradient(
+            0.0f to Color(0xFFF876C1),
+            1.1f to Color(0xFF2399F8)
         )
     )
 }