Starting Bet Creation Screen

src/.idea/deploymentTargetDropDown.xml

@@ -12,6 +12,6 @@
         </deviceKey>
       </Target>
     </targetSelectedWithDropDown>
-    <timeTargetWasSelectedWithDropDown value="2023-09-26T09:14:33.560818300Z" />
+    <timeTargetWasSelectedWithDropDown value="2023-09-27T20:38:30.723570500Z" />
   </component>
 </project>

src/app/build.gradle

@@ -53,8 +53,8 @@ dependencies {
     implementation 'androidx.activity:activity-compose:1.7.2'
     implementation "androidx.compose.ui:ui:$compose_version"
     implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
-    implementation 'androidx.compose.material3:material3:1.2.0-alpha07'
+    implementation 'androidx.compose.material3:material3:1.2.0-alpha08'
-    implementation "androidx.navigation:navigation-compose:2.7.2"
+    implementation "androidx.navigation:navigation-compose:2.7.3"
     testImplementation 'junit:junit:4.13.2'
     implementation 'androidx.compose.material:material-icons-core'
     implementation 'androidx.compose.material:material-icons-extended'

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

@@ -0,0 +1,47 @@
+package fr.iut.alldev.allin.ui.betcreation
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+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.unit.dp
+import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ui.betcreation.tabs.BetCreationScreenAnswerTab
+import fr.iut.alldev.allin.ui.betcreation.tabs.BetCreationScreenQuestionTab
+import fr.iut.alldev.allin.ui.core.AllInSections
+import fr.iut.alldev.allin.ui.core.RainbowButton
+import fr.iut.alldev.allin.ui.core.SectionElement
+
+@Composable
+fun BetCreationScreen() {
+    Box(
+        Modifier
+            .fillMaxSize()
+            .padding(horizontal = 30.dp, vertical = 20.dp)
+    ) {
+        AllInSections(
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .fillMaxSize(),
+            sections = listOf(
+                SectionElement(stringResource(id = R.string.Question)){
+                    BetCreationScreenQuestionTab()
+                },
+                SectionElement(stringResource(id = R.string.Answer)){
+                    BetCreationScreenAnswerTab()
+                }
+            )
+        )
+        RainbowButton(
+            text = stringResource(id = R.string.Publish),
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(bottom = 14.dp),
+            onClick = {
+            }
+        )
+    }
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/betcreation/tabs/BetCreationScreenAnswerTab.kt

@@ -0,0 +1,11 @@
+package fr.iut.alldev.allin.ui.betcreation.tabs
+
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import fr.iut.alldev.allin.R
+
+@Composable
+fun BetCreationScreenAnswerTab() {
+    Text(text = stringResource(id = R.string.Answer))
+}

src/app/src/main/java/fr/iut/alldev/allin/ui/betcreation/tabs/BetCreationScreenQuestionTab.kt

@@ -0,0 +1,43 @@
+package fr.iut.alldev.allin.ui.betcreation.tabs
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Lock
+import androidx.compose.material.icons.filled.Public
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import fr.iut.alldev.allin.R
+import fr.iut.alldev.allin.ui.core.AllInIconChip
+
+@Composable
+fun BetCreationScreenQuestionTab() {
+    Column(Modifier.padding(20.dp)){
+        var isPublic by remember{
+            mutableStateOf(true)
+        }
+        Text(text = stringResource(id = R.string.Question))
+        Spacer(modifier = Modifier.height(7.dp))
+        AllInIconChip(
+            text = "Public",
+            leadingIcon = Icons.Default.Public,
+            onClick = {
+                isPublic = true
+            },
+            isSelected = isPublic
+        )
+        AllInIconChip(
+            text = "Privé",
+            leadingIcon = Icons.Default.Lock,
+            onClick = {
+                isPublic = false
+            },
+            isSelected = !isPublic
+        )
+    }
+}

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

@@ -22,10 +22,13 @@ fun AllInCard(
     modifier: Modifier = Modifier,
     onClick: (()->Unit)? = null,
     radius: Dp = 15.dp,
+    enabled: Boolean = true,
     backgroundColor: Color = AllInTheme.themeColors.background,
+    disabledBackgroundColor: Color = AllInTheme.themeColors.disabled,
     backgroundBrush: Brush? = null,
     borderWidth: Dp? = null,
     borderColor: Color = AllInTheme.themeColors.border,
+    disabledBorderColor: Color = AllInTheme.themeColors.disabled_border,
     borderBrush: Brush? = null,
     content: @Composable ()->Unit
 ) {
@@ -39,14 +42,16 @@ fun AllInCard(
     }
     val cardBorders = borderWidth?.let{
             width -> borderBrush?.let{BorderStroke(width, it)}
-        ?: BorderStroke(width, borderColor)
+        ?: BorderStroke(width, if(enabled) borderColor else disabledBorderColor)
     }
     val cardColors = CardDefaults.cardColors(
-        containerColor = if(backgroundBrush!=null) Color.Transparent else backgroundColor
+        containerColor = if(backgroundBrush!=null) Color.Transparent else backgroundColor,
+        disabledContainerColor = disabledBackgroundColor
     )
     onClick?.let {
         Card(
             modifier = cardModifier,
+            enabled = enabled,
             onClick = it,
             shape = cardShape,
             border = cardBorders,

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

@@ -3,16 +3,18 @@ package fr.iut.alldev.allin.ui.core
 import android.content.res.Configuration
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
 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.dp
 import fr.iut.alldev.allin.ui.theme.AllInTheme
+import racra.compose.smooth_corner_rect_library.AbsoluteSmoothCornerShape
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -20,30 +22,32 @@ fun AllInChip(
     text: String,
     isSelected: Boolean = false,
     onClick: ()->Unit = {},
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    radius: Dp = 50.dp,
+    selectedColor: Color = AllInTheme.colors.allIn_Purple,
+    unselectedColor: Color = AllInTheme.themeColors.background,
 ) {
     Card(
         modifier = modifier,
-        shape = RoundedCornerShape(50),
+        shape = AbsoluteSmoothCornerShape(radius, 100),
         onClick = onClick,
         border = if(!isSelected) BorderStroke(1.dp, AllInTheme.themeColors.border) else null,
         colors = CardDefaults.cardColors(
-            containerColor = with(AllInTheme){
+        containerColor = if(isSelected) selectedColor else unselectedColor
-                if(isSelected) colors.allIn_Purple else themeColors.background
-            }
         )
     ) {
-        Box{
+        Box {
             Text(
                 text = text,
                 modifier = Modifier
+                    .align(Alignment.Center)
                     .padding(vertical = 8.dp, horizontal = 22.dp)
-                    .alpha(if(isSelected) 0f else 1f),
+                    .alpha(if (isSelected) 0f else 1f),
                 textAlign = TextAlign.Center,
                 style = AllInTheme.typography.r,
                 color = AllInTheme.themeColors.on_background_2
             )
-            if(isSelected) {
+            if (isSelected) {
                 Text(
                     text = text,
                     modifier = modifier.align(Alignment.Center),

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

@@ -0,0 +1,90 @@
+package fr.iut.alldev.allin.ui.core
+
+import android.content.res.Configuration
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Public
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+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.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+import racra.compose.smooth_corner_rect_library.AbsoluteSmoothCornerShape
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun AllInIconChip(
+    text: String,
+    isSelected: Boolean = false,
+    onClick: ()->Unit = {},
+    modifier: Modifier = Modifier,
+    radius: Dp = 15.dp,
+    selectedColor: Color = AllInTheme.colors.allIn_Purple,
+    unselectedColor: Color = AllInTheme.themeColors.background,
+    leadingIcon: ImageVector
+) {
+    val contentColor = if(isSelected) AllInTheme.colors.white else selectedColor
+    Card(
+        modifier = modifier,
+        shape = AbsoluteSmoothCornerShape(radius, 100),
+        onClick = onClick,
+        border = if(!isSelected) BorderStroke(1.dp, AllInTheme.themeColors.border) else null,
+        colors = CardDefaults.cardColors(
+            containerColor = if(isSelected) selectedColor else unselectedColor
+        )
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(7.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.padding(vertical = 15.dp, horizontal = 18.dp)
+        ) {
+            Icon(
+                imageVector = leadingIcon,
+                contentDescription = null,
+                tint = contentColor
+            )
+            Text(
+                text = text,
+                textAlign = TextAlign.Center,
+                style = AllInTheme.typography.h1,
+                color = contentColor,
+                fontSize = 18.sp
+            )
+        }
+    }
+}
+
+@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun AllInIconChipPreviewUnselected() {
+    AllInTheme {
+        AllInIconChip(
+            text = "Public",
+            isSelected = false,
+            leadingIcon = Icons.Default.Public
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun AllInIconChipPreviewSelected() {
+    AllInTheme {
+        AllInIconChip(
+            text = "Public",
+            isSelected = true,
+            leadingIcon = Icons.Default.Public
+        )
+    }
+}

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

@@ -0,0 +1,69 @@
+package fr.iut.alldev.allin.ui.core
+
+import android.content.res.Configuration
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.AnnotatedString
+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.sp
+import fr.iut.alldev.allin.ui.theme.AllInTheme
+
+
+@Composable
+fun AllInSectionButton(
+    text: String,
+    isSelected: Boolean,
+    onClick: (Int)->Unit
+) {
+    val style = if(isSelected){
+        AllInTheme.typography.h3.copy(
+            color = AllInTheme.themeColors.on_main_surface,
+            fontSize = 15.sp,
+            textAlign = TextAlign.Center,
+            fontWeight = FontWeight.ExtraBold
+        )
+    }else{
+        AllInTheme.typography.h3.copy(
+            color = AllInTheme.themeColors.on_background_2,
+            fontSize = 15.sp,
+            textAlign = TextAlign.Center,
+            fontWeight = FontWeight.SemiBold
+        )
+    }
+    ClickableText(
+        text = AnnotatedString(text),
+        style = style,
+        onClick = onClick,
+        modifier = Modifier.animateContentSize()
+    )
+}
+
+@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun AllInSectionButtonPreview() {
+    AllInTheme {
+        AllInSectionButton(
+            text = "Test",
+            isSelected = false,
+            onClick = {}
+        )
+    }
+}
+
+@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun AllInSectionButtonSelectedPreview() {
+    AllInTheme {
+        AllInSectionButton(
+            text = "Test",
+            isSelected = true,
+            onClick = {}
+        )
+    }
+}

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

@@ -0,0 +1,66 @@
+package fr.iut.alldev.allin.ui.core
+
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+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
+
+class SectionElement(
+    val text: String,
+    val content: @Composable ()->Unit
+)
+
+@Composable
+fun AllInSections(
+    sections: List<SectionElement>,
+    interSectionsPadding: Dp = 56.dp,
+    modifier: Modifier = Modifier
+) {
+    var selected by remember{
+        mutableStateOf(sections.firstOrNull())
+    }
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        LazyRow(
+            horizontalArrangement = Arrangement.spacedBy(interSectionsPadding)
+        ) {
+            items(sections) { section ->
+                AllInSectionButton(
+                    text = section.text,
+                    isSelected = selected == section,
+                    onClick = { selected = section }
+                )
+            }
+        }
+        selected?.content?.let { it() }
+    }
+}
+
+@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun AllInSectionsPreview() {
+    AllInTheme {
+        AllInSections(
+            sections = listOf(
+                SectionElement("Page 1") {
+                    Text("This is page 1")
+                },
+                SectionElement("Page 2") {
+                    Text("This is page 2")
+                },
+            )
+        )
+    }
+}

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

@@ -1,5 +1,6 @@
 package fr.iut.alldev.allin.ui.core
 
+import android.content.res.Configuration
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
@@ -15,15 +16,31 @@ import fr.iut.alldev.allin.ui.theme.AllInTheme
 fun RainbowButton(
     text: String,
     onClick: ()->Unit,
+    enabled: Boolean = true,
     modifier: Modifier = Modifier
 ) {
-    AllInCard(borderWidth = 1.dp, onClick = onClick, modifier = modifier) {
+    AllInCard(
+        borderWidth = if(enabled) 1.dp else 2.dp,
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled
+    ) {
+        val textStyle =
+            with(AllInTheme.typography.h2){
+                if(enabled){
+                    copy(
+                        brush = AllInTheme.colors.allIn_TextGradient
+                    )
+                }else{
+                    copy(
+                        color = AllInTheme.themeColors.disabled_border
+                    )
+                }
+            }
         Text(
             text = text,
             textAlign = TextAlign.Center,
-            style = AllInTheme.typography.h2.copy(
+            style = textStyle,
-                brush = AllInTheme.colors.allIn_TextGradient
-            ),
             fontSize = 30.sp,
             modifier = Modifier
                 .padding(vertical = 20.dp)
@@ -33,9 +50,19 @@ fun RainbowButton(
 }
 
 @Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
 private fun RainbowButtonPreview() {
     AllInTheme {
         RainbowButton(text = "Participer", onClick = { })
     }
 }
+
+@Preview
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun RainbowButtonDisabledPreview() {
+    AllInTheme {
+        RainbowButton(text = "Participer", onClick = { }, enabled = false)
+    }
+}

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

@@ -6,14 +6,15 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.navigation.NavGraphBuilder
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import fr.iut.alldev.allin.ui.bet.BetScreen
+import fr.iut.alldev.allin.ui.betcreation.BetCreationScreen
 import fr.iut.alldev.allin.ui.login.LoginScreen
 import fr.iut.alldev.allin.ui.navigation.drawer.AllInDrawer
-import fr.iut.alldev.allin.ui.profile.Profile
 import fr.iut.alldev.allin.ui.register.RegisterScreen
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 import fr.iut.alldev.allin.ui.welcome.WelcomeScreen
@@ -22,15 +23,16 @@ object Routes {
     const val WELCOME = "WELCOME"
     const val REGISTER = "REGISTER"
     const val LOGIN = "LOGIN"
-    const val BET = "BET"
+    const val DASHBOARD = "DASHBOARD"
+    const val PUBLIC_BETS = "PUBLIC_BETS"
+    const val BET_CREATION = "BET_CREATION"
     const val BET_HISTORY = "BET_HISTORY"
     const val FRIENDS = "FRIENDS"
     const val CURRENT_BETS = "CURRENT_BETS"
-    const val DASHBOARD = "DASHBOARD"
 
 }
 
-private fun NavHostController.popUpTo(route: String, baseRoute: String){
+internal fun NavHostController.popUpTo(route: String, baseRoute: String){
     this.navigate(route) {
         launchSingleTop = true
         popUpTo(baseRoute) {
@@ -64,11 +66,36 @@ fun AllInNavHost(modifier: Modifier = Modifier,
                 fadeOut(
                     animationSpec = tween(1500)
                 )
-
         },
         modifier = modifier.fillMaxSize().background(AllInTheme.themeColors.main_surface),
     ) {
+        allInWelcomeScreen(navController)
+        allInRegisterScreen(navController)
+        allInLoginScreen(navController)
+        allInDashboard()
+    }
+}
 
+@Composable
+internal fun AllInDrawerNavHost(
+    modifier: Modifier = Modifier,
+    navController: NavHostController,
+    startDestination: String = Routes.PUBLIC_BETS
+) {
+    NavHost(
+        navController = navController,
+        startDestination = startDestination,
+        modifier = modifier.fillMaxSize(),
+        enterTransition = { EnterTransition.None },
+        exitTransition = { ExitTransition.None }
+    ) {
+        composable(route = Routes.PUBLIC_BETS) { BetScreen() }
+        composable(route = Routes.BET_CREATION) { BetCreationScreen() }
+    }
+}
+private fun NavGraphBuilder.allInWelcomeScreen(
+    navController: NavHostController
+){
     composable(route = Routes.WELCOME){
         WelcomeScreen(
             onClickJoin = {
@@ -79,6 +106,11 @@ fun AllInNavHost(modifier: Modifier = Modifier,
             }
         )
     }
+}
+
+private fun NavGraphBuilder.allInRegisterScreen(
+    navController: NavHostController
+){
     composable(route = Routes.REGISTER){
         RegisterScreen(
             onClickRegister = {
@@ -89,6 +121,11 @@ fun AllInNavHost(modifier: Modifier = Modifier,
             }
         )
     }
+}
+
+private fun NavGraphBuilder.allInLoginScreen(
+    navController: NavHostController
+){
     composable(route = Routes.LOGIN){
         LoginScreen(
             onClickRegister = {
@@ -99,27 +136,12 @@ fun AllInNavHost(modifier: Modifier = Modifier,
             }
         )
     }
+}
+
+private fun NavGraphBuilder.allInDashboard() {
     composable(
         route = Routes.DASHBOARD,
     ){
         AllInDrawer()
     }
-    }
-}
-@Composable
-fun AllInDashboard(
-     modifier: Modifier = Modifier,
-     navController: NavHostController = rememberNavController(),
-     startDestination: String = Routes.BET
-) {
-    NavHost(
-        navController = navController,
-        startDestination = startDestination,
-        modifier = modifier.fillMaxSize(),
-        enterTransition = { EnterTransition.None },
-        exitTransition = { ExitTransition.None }
-    ) {
-        composable(route = Routes.BET) { BetScreen() }
-        composable(route = Routes.BET_HISTORY) { Profile() }
-    }
 }

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

@@ -17,8 +17,9 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
 import fr.iut.alldev.allin.R
 import fr.iut.alldev.allin.ui.core.topbar.AllInTopBar
-import fr.iut.alldev.allin.ui.navigation.AllInDashboard
+import fr.iut.alldev.allin.ui.navigation.AllInDrawerNavHost
 import fr.iut.alldev.allin.ui.navigation.Routes
+import fr.iut.alldev.allin.ui.navigation.popUpTo
 import fr.iut.alldev.allin.ui.theme.AllInTheme
 import kotlinx.coroutines.launch
 import kotlin.math.abs
@@ -30,8 +31,14 @@ sealed class TopLevelDestination(
     val subtitle: Int,
     val emoji: Int
 ) {
-    object BET : TopLevelDestination(
+    object PUBLIC_BETS : TopLevelDestination(
-        route = Routes.BET,
+        route = Routes.PUBLIC_BETS,
+        title = R.string.public_bets,
+        subtitle = R.string.public_bets_subtitle,
+        emoji = R.drawable.globe
+    )
+    object BET_CREATION : TopLevelDestination(
+        route = Routes.BET_CREATION,
         title = R.string.create_a_bet,
         subtitle = R.string.create_a_bet_subtitle,
         emoji = R.drawable.video_game
@@ -57,7 +64,8 @@ sealed class TopLevelDestination(
 }
 
 val topLevelDestinations = listOf(
-    TopLevelDestination.BET,
+    TopLevelDestination.PUBLIC_BETS,
+    TopLevelDestination.BET_CREATION,
     TopLevelDestination.BET_HISTORY,
     TopLevelDestination.FRIENDS,
     TopLevelDestination.CURRENT_BETS
@@ -67,8 +75,7 @@ val topLevelDestinations = listOf(
 fun AllInDrawer(
     navController: NavHostController = rememberNavController(),
     drawerState: DrawerState = rememberDrawerState(initialValue = DrawerValue.Closed),
-    startDestination: String = Routes.BET
+    startDestination: String = Routes.PUBLIC_BETS
-
 ) {
     val scope = rememberCoroutineScope()
     val drawerOffset = derivedStateOf { drawerState.offset.value }
@@ -107,17 +114,9 @@ fun AllInDrawer(
                         title = stringResource(item.title).uppercase(),
                         subtitle = stringResource(item.subtitle),
                         emoji = painterResource(id = item.emoji),
-                        onClick = { scope.launch { drawerState.close() }
+                        onClick = {
-                                    navController.navigate(item.route){
+                            scope.launch { drawerState.close() }
-                                        launchSingleTop = true
+                            navController.popUpTo(item.route, startDestination)
-                                        popUpTo(
-                                            startDestination
-                                        ) {
-                                            saveState = true
-                                            inclusive = true
-                                        }
-                                        restoreState = true
-                                    }
                           },
                         modifier = Modifier.padding(vertical = 5.dp, horizontal = 13.dp)
                     )
@@ -148,7 +147,7 @@ fun AllInDrawer(
                     .background(AllInTheme.themeColors.main_surface),
                 horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                AllInDashboard(
+                AllInDrawerNavHost(
                     navController = navController
                 )
             }

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

@@ -95,7 +95,9 @@ data class AllInThemeColors(
     val tint_1: Color,
     val background_2: Color,
     val on_background_2: Color,
-    val border: Color
+    val border: Color,
+    val disabled: Color,
+    val disabled_border: Color
 )
 
 internal val LocalThemeColors = staticCompositionLocalOf {
@@ -107,6 +109,8 @@ internal val LocalThemeColors = staticCompositionLocalOf {
         tint_1 = Color.Unspecified,
         background_2 = Color.Unspecified,
         on_background_2 = Color.Unspecified,
-        border = Color.Unspecified
+        border = Color.Unspecified,
+        disabled = Color.Unspecified,
+        disabled_border = Color.Unspecified
     )
 }

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

@@ -107,7 +107,9 @@ fun AllInTheme(
             tint_1 = customColors.white,
             background_2 = customColors.allIn_Dark,
             on_background_2 = customColors.allIn_LightGrey200,
-            border = customColors.allIn_DarkGrey100
+            border = customColors.allIn_DarkGrey100,
+            disabled = customColors.allIn_DarkGrey200,
+            disabled_border = customColors.allIn_DarkGrey100
         )
     }else{
         AllInThemeColors(
@@ -118,7 +120,10 @@ fun AllInTheme(
             tint_1 = customColors.allIn_LoginPurple,
             background_2 = customColors.allIn_LightGrey50,
             on_background_2 = customColors.allIn_LightGrey300,
-            border = customColors.allIn_LightGrey100
+            border = customColors.allIn_LightGrey100,
+            disabled = customColors.allIn_LightGrey100,
+            disabled_border = customColors.allIn_LightGrey200
+
         )
     }
 
@@ -126,7 +131,6 @@ fun AllInTheme(
         LocalColors provides customColors,
         LocalTypography provides customTypography,
         LocalThemeColors provides customTheme
-
     ){
         content()
     }

src/app/src/main/res/values-fr/strings.xml

@@ -13,6 +13,8 @@
     <string name="bets">Bets</string>
     <string name="best_win">Meilleur gain</string>
     <string name="friends">Amis</string>
+    <string name="public_bets">Bets publiques</string>
+    <string name="public_bets_subtitle">Parcourez les bets les plus populaires du moment.</string>
     <string name="create_a_bet">Créer un bet</string>
     <string name="create_a_bet_subtitle">Créez un nouveau bet et faites participer vos amis.</string>
     <string name="bet_history">Historique des bets</string>
@@ -31,6 +33,10 @@
     <!--Login Page-->
     <string name="Login_title">Te revoilà !</string>
     <string name="Login_subtitle">Bon retour parmis nous tu nous as manqué !</string>
+    <!--Bet Creation Page-->
+    <string name="Question">Question</string>
+    <string name="Answer">Réponse</string>
+    <string name="Publish">Publier le bet</string>
     <!--Bet Page-->
     <string name="Popular">Populaire</string>
     <string name="Public">Public</string>

src/app/src/main/res/values/strings.xml

@@ -17,6 +17,8 @@
     <string name="bets">Bets</string>
     <string name="best_win">Best win</string>
     <string name="friends">Friends</string>
+    <string name="public_bets">Public bets</string>
+    <string name="public_bets_subtitle">Browse the most popular bets of the moment.</string>
     <string name="create_a_bet">Create a bet</string>
     <string name="create_a_bet_subtitle">Create a net bet and get your friends participating.</string>
     <string name="bet_history">Bet history</string>
@@ -36,6 +38,10 @@
     <!--Login Page-->
     <string name="Login_title">Welcome back !</string>
     <string name="Login_subtitle">We missed you.</string>
+    <!--Bet Creation Page-->
+    <string name="Question">Question</string>
+    <string name="Answer">Answer</string>
+    <string name="Publish">Publish the bet</string>
     <!--Bet Page-->
     <string name="Popular">Popular</string>
     <string name="Public">Public</string>