NavBar inférieur et supérieur faite style bouton a corigé & mettre la nav dans les onclick

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/components/NavBar.kt

@@ -4,29 +4,92 @@ import android.widget.ImageView
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+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.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.BottomAppBar
+import androidx.compose.material3.Button
 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.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 import com.example.what_the_fantasy.R
+import com.example.what_the_fantasy.ui.navigations.AppNavigator
 import com.example.what_the_fantasy.ui.theme.colorNavBar
 
 
 @Composable
-fun NavBar(actualPage :String) {
+fun NavBar(content : @Composable ()-> Unit ) {
-        FlowRow(modifier = Modifier
+    val nav = AppNavigator()
-            .background(colorNavBar),
+
-            Arrangement.SpaceAround
+    Column(
-        ){
+        modifier = Modifier
-            Text("Favorie")
+            .fillMaxSize()
-            Image( painter = painterResource(R.mipmap.ic_launcher_foreground), contentDescription = "Accueil")
+    ) {
-            Text("Quiz")
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(55.dp)
+                .background(colorNavBar)
+                .padding(10.dp),
+            Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.Bottom
+        ) {
+            Button(onClick = {}, Modifier.background(Color.Unspecified)) {
+                Text("Profile", fontSize = 25.sp, color = Color.White)
+            }
+            Button(onClick = {}) {
+                Text("Theme", fontSize = 25.sp, color = Color.White)
+            }
+
+        }
+
+        Box(modifier = Modifier.background(Color.Black).fillMaxHeight(0.92f)){
+            content()
+        }
+
+        Row(modifier = Modifier
+                .background(colorNavBar)
+                .fillMaxSize(),
+            horizontalArrangement = Arrangement.SpaceAround,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+
+            Button(onClick = {}) {
+                Text("Favorie", fontSize = 25.sp, color = Color.White)
+            }
+
+            Button(onClick = {}) {
+                Image(
+                    painter = painterResource(R.mipmap.ic_launcher_foreground),
+                    contentDescription = "Accueil",
+                    modifier = Modifier
+                        .size(100.dp)
+                )
+            }
+
+            Button(onClick = {}) {
+                Text("Quiz", fontSize = 25.sp, color = Color.White)
+            }
 
         }
 
+
+    }
 }

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/AccueilPage.kt

@@ -1,6 +1,11 @@
 package com.example.what_the_fantasy.ui.screens
 
 import androidx.compose.runtime.Composable
+import com.example.what_the_fantasy.ui.components.NavBar
 
 @Composable
-fun AccueilPage() {}
+fun AccueilPage() {
+    NavBar {
+
+    }
+}

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/FavoritePage.kt

@@ -1,6 +1,11 @@
 package com.example.what_the_fantasy.ui.screens
 
 import androidx.compose.runtime.Composable
+import com.example.what_the_fantasy.ui.components.NavBar
 
 @Composable
-fun FavoritePage() {}
+fun FavoritePage() {
+    NavBar {
+
+    }
+}

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/LoginPage.kt

@@ -50,7 +50,6 @@ fun LoginPage(navControllerSignUp: () -> Unit, navControllerProfil: () -> Unit)
 
     val users = UserStub.allUsers;
 
-
     Box(
         modifier = Modifier
             .fillMaxSize()
@@ -76,8 +75,9 @@ fun LoginPage(navControllerSignUp: () -> Unit, navControllerProfil: () -> Unit)
             SpaceHeightComponent(16)
             CreateAccountButton(R.string.ButtonCreateLogin,12, Color.White, navControllerSignUp)
         }
-        NavBar("")
+
     }
+
 }
 
 

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/ProfilPage.kt

@@ -62,6 +62,7 @@ import com.example.what_the_fantasy.R
 import com.example.what_the_fantasy.data.local.QuestionStub
 import com.example.what_the_fantasy.data.local.UserStub
 import com.example.what_the_fantasy.ui.components.ErrorMessageProfileComponent
+import com.example.what_the_fantasy.ui.components.NavBar
 import com.example.what_the_fantasy.ui.components.SpaceHeightComponent
 import com.example.what_the_fantasy.ui.components.TitlePageComponent
 import com.example.what_the_fantasy.ui.theme.What_The_FantasyTheme
@@ -75,47 +76,48 @@ fun ProfilPage(navController: NavController) {
     )
     val user = UserStub.allUsers
     val index = 2 // Pour changer l'utilisateur pour le moment
-
+    NavBar {
-    Box(
+        Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(Color(0xFF100C1B)),
-        contentAlignment = Alignment.Center
-    ) {
-        Column(
             modifier = Modifier
-                .fillMaxWidth(0.9f)
+                .fillMaxSize()
-                .padding(20.dp)
+                .background(Color(0xFF100C1B)),
-                .clip(RoundedCornerShape(16.dp))
+            contentAlignment = Alignment.Center
-                .background(gradient)
-                .padding(20.dp),
-            horizontalAlignment = Alignment.CenterHorizontally
         ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth(0.9f)
+                    .padding(20.dp)
+                    .clip(RoundedCornerShape(16.dp))
+                    .background(gradient)
+                    .padding(20.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+
+                // Titre
+                TitlePageComponent(R.string.titleProfile, 20, Color.White)
+                SpaceHeightComponent(16)
+
+                // Image de profil
+                ImageProfil(user[index].imgUrl, 120, 2, Color.White)
+                SpaceHeightComponent(16)
+
+                EditUsername(user[index].username)// Édition du Username
+                SpaceHeightComponent(16)
+
+                EditEmail(user[index].email)// Édition du Email
+                Spacer(modifier = Modifier.height(8.dp))
+
+                EditPasswd()
+                SpaceHeightComponent(16)
+
+                // Bouton
+                ButtonProfile(R.string.ButtonAddQuoteprofile, 18, Color.Black, Color.White)
+                SpaceHeightComponent(16)
+                ButtonProfile(R.string.ButtonLanguageprofile, 18, Color.Black, Color.White)
+                SpaceHeightComponent(16)
+                ButtonProfile(R.string.ButtonUnlogprofile, 18, Color.Black, Color.White)
 
-            // Titre
+            }
-            TitlePageComponent(R.string.titleProfile, 20, Color.White)
-            SpaceHeightComponent(16)
-
-            // Image de profil
-            ImageProfil(user[index].imgUrl, 120, 2, Color.White)
-            SpaceHeightComponent(16)
-
-            EditUsername(user[index].username)// Édition du Username
-            SpaceHeightComponent(16)
-
-            EditEmail(user[index].email)// Édition du Email
-            Spacer(modifier = Modifier.height(8.dp))
-
-            EditPasswd()
-            SpaceHeightComponent(16)
-
-            // Bouton
-            ButtonProfile(R.string.ButtonAddQuoteprofile,18, Color.Black, Color.White)
-            SpaceHeightComponent(16)
-            ButtonProfile(R.string.ButtonLanguageprofile,18, Color.Black, Color.White)
-            SpaceHeightComponent(16)
-            ButtonProfile(R.string.ButtonUnlogprofile, 18, Color.Black, Color.White)
-
         }
     }
 }

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/QuizPage.kt

@@ -27,6 +27,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.example.what_the_fantasy.data.local.QuestionStub
 import com.example.what_the_fantasy.data.model.Question
+import com.example.what_the_fantasy.ui.components.NavBar
 
 @Composable
 fun QuizPage() {
@@ -37,68 +38,69 @@ fun QuizPage() {
     )
 
     val questions = QuestionStub.allQuestions
-
+    NavBar {
-    Box(
+        Box(
-        modifier = Modifier
-            .fillMaxSize()
-            .background(Color(0xFF100C1B)) // Fond global de l'écran
-            .padding(16.dp) // Marges autour de tout le contenu
-    ) {
-        // Numéro de la question en haut
-        Text(
-            text = "Question numéro : " + questions.first().id.toString(),
-            color = Color.White,
-            fontSize = 18.sp, // Taille réduite pour tenir sur un écran portrait
-            modifier = Modifier
-                .align(Alignment.TopCenter) // Position en haut au centre
-                .padding(top = 16.dp) // Un peu d'espace en haut
-        )
-
-        // Contenu centré, mais avec une gestion plus équilibrée du placement
-        Column(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(top = 48.dp), // Réduit l'espace entre le numéro de la question et la question elle-même
+                .background(Color(0xFF100C1B)) // Fond global de l'écran
-            verticalArrangement = Arrangement.Center, // Centre verticalement
+                .padding(16.dp) // Marges autour de tout le contenu
-            horizontalAlignment = Alignment.CenterHorizontally // Centre horizontalement
         ) {
-            // Question principale
+            // Numéro de la question en haut
             Text(
-                text = questions.first().question,
+                text = "Question numéro : " + questions.first().id.toString(),
                 color = Color.White,
-                fontSize = 22.sp, // Taille plus petite pour tenir sur un écran portrait
+                fontSize = 18.sp, // Taille réduite pour tenir sur un écran portrait
-                modifier = Modifier.padding(bottom = 16.dp) // Réduit l'espacement entre la question et les réponses
+                modifier = Modifier
+                    .align(Alignment.TopCenter) // Position en haut au centre
+                    .padding(top = 16.dp) // Un peu d'espace en haut
             )
 
-            // Liste des réponses
+            // Contenu centré, mais avec une gestion plus équilibrée du placement
-            val answers = listOf(
+            Column(
-                questions.first().ansA,
+                modifier = Modifier
-                questions.first().ansB,
+                    .fillMaxSize()
-                questions.first().ansC,
+                    .padding(top = 48.dp), // Réduit l'espace entre le numéro de la question et la question elle-même
-                questions.first().ansD
+                verticalArrangement = Arrangement.Center, // Centre verticalement
-            )
+                horizontalAlignment = Alignment.CenterHorizontally // Centre horizontalement
+            ) {
+                // Question principale
+                Text(
+                    text = questions.first().question,
+                    color = Color.White,
+                    fontSize = 22.sp, // Taille plus petite pour tenir sur un écran portrait
+                    modifier = Modifier.padding(bottom = 16.dp) // Réduit l'espacement entre la question et les réponses
+                )
+
+                // Liste des réponses
+                val answers = listOf(
+                    questions.first().ansA,
+                    questions.first().ansB,
+                    questions.first().ansC,
+                    questions.first().ansD
+                )
 
-            // Pour chaque réponse, on applique une Box avec un espacement uniforme
+                // Pour chaque réponse, on applique une Box avec un espacement uniforme
-            answers.forEach { answer ->
+                answers.forEach { answer ->
-                Box(
+                    Box(
-                    modifier = Modifier
+                        modifier = Modifier
-                        .width(220.dp) // Largeur plus petite pour que ça tienne mieux
+                            .width(220.dp) // Largeur plus petite pour que ça tienne mieux
-                        .height(50.dp) // Hauteur ajustée
+                            .height(50.dp) // Hauteur ajustée
-                        .background(
+                            .background(
-                            brush = gradient,
+                                brush = gradient,
-                            shape = RoundedCornerShape(16.dp) // Coins arrondis
+                                shape = RoundedCornerShape(16.dp) // Coins arrondis
+                            )
+                            .clickable { /* Action pour la réponse */ }
+                            .padding(horizontal = 8.dp), // Padding interne
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Text(
+                            text = answer,
+                            color = Color.White,
+                            fontSize = 18.sp // Taille du texte ajustée pour un écran portrait
                         )
-                        .clickable { /* Action pour la réponse */ }
+                    }
-                        .padding(horizontal = 8.dp), // Padding interne
+                    Spacer(modifier = Modifier.height(16.dp)) // Espacement réduit entre les réponses
-                    contentAlignment = Alignment.Center
-                ) {
-                    Text(
-                        text = answer,
-                        color = Color.White,
-                        fontSize = 18.sp // Taille du texte ajustée pour un écran portrait
-                    )
                 }
-                Spacer(modifier = Modifier.height(16.dp)) // Espacement réduit entre les réponses
             }
         }
     }

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/QuotePage.kt

@@ -1,6 +1,11 @@
 package com.example.what_the_fantasy.ui.screens
 
 import androidx.compose.runtime.Composable
+import com.example.what_the_fantasy.ui.components.NavBar
 
 @Composable
-fun QuotePage() {}
+fun QuotePage() {
+    NavBar {
+
+    }
+}

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/SearchPage.kt

@@ -1,6 +1,11 @@
 package com.example.what_the_fantasy.ui.screens
 
 import androidx.compose.runtime.Composable
+import com.example.what_the_fantasy.ui.components.NavBar
 
 @Composable
-fun SearchPage() {}
+fun SearchPage() {
+    NavBar {
+
+    }
+}

What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/SubmitQuotePage.kt

@@ -1,6 +1,11 @@
 package com.example.what_the_fantasy.ui.screens
 
 import androidx.compose.runtime.Composable
+import com.example.what_the_fantasy.ui.components.NavBar
 
 @Composable
-fun SubmitQuotePage() {}
+fun SubmitQuotePage() {
+    NavBar {
+
+    }
+}