From e3d983a1ca76964b8a0cd685438951b38041a962 Mon Sep 17 00:00:00 2001
From: "Jordan Akinpelu (akinpelud)" <akinpeludaniel@gmail.com>
Date: Mon, 11 Jul 2022 18:43:53 +0100
Subject: [PATCH] Nav Drawer Implemented using scaffold

---
 .../inspectionProfiles/Project_Default.xml    |   1 +
 PowerOf10/app/src/main/AndroidManifest.xml    |   9 +-
 .../java/com/example/powerof10/HomePageRSS.kt |  30 --
 .../java/com/example/powerof10/HomeRSS.kt     | 141 +++---
 .../java/com/example/powerof10/NavGraph.kt    |  18 +-
 .../java/com/example/powerof10/RankingPage.kt | 432 +++++++++---------
 .../main/java/com/example/powerof10/Screen.kt |   1 +
 PowerOf10/app/src/main/res/values/strings.xml |   1 +
 8 files changed, 331 insertions(+), 302 deletions(-)
 delete mode 100644 PowerOf10/app/src/main/java/com/example/powerof10/HomePageRSS.kt

diff --git a/PowerOf10/.idea/inspectionProfiles/Project_Default.xml b/PowerOf10/.idea/inspectionProfiles/Project_Default.xml
index 2842237..c4b213c 100644
--- a/PowerOf10/.idea/inspectionProfiles/Project_Default.xml
+++ b/PowerOf10/.idea/inspectionProfiles/Project_Default.xml
@@ -1,6 +1,7 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="BlockingMethodInNonBlockingContext" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
       <option name="previewFile" value="true" />
     </inspection_tool>
diff --git a/PowerOf10/app/src/main/AndroidManifest.xml b/PowerOf10/app/src/main/AndroidManifest.xml
index 79f69d4..dcb7cf4 100644
--- a/PowerOf10/app/src/main/AndroidManifest.xml
+++ b/PowerOf10/app/src/main/AndroidManifest.xml
@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.example.powerof10">
-    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
     <application
         android:allowBackup="true"
         android:icon="@mipmap/ic_launcher"
@@ -9,6 +11,11 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/Theme.PowerOf10">
+        <activity
+            android:name=".NavDrawer"
+            android:exported="false"
+            android:label="@string/title_activity_nav_drawer"
+            android:theme="@style/Theme.PowerOf10" />
         <activity
             android:name=".RankingPage"
             android:exported="false"
diff --git a/PowerOf10/app/src/main/java/com/example/powerof10/HomePageRSS.kt b/PowerOf10/app/src/main/java/com/example/powerof10/HomePageRSS.kt
deleted file mode 100644
index f442a97..0000000
--- a/PowerOf10/app/src/main/java/com/example/powerof10/HomePageRSS.kt
+++ /dev/null
@@ -1,30 +0,0 @@
-package com.example.powerof10
-
-import android.os.Bundle
-import androidx.fragment.app.Fragment
-import android.view.LayoutInflater
-import android.view.View
-import android.view.ViewGroup
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.ComposeView
-import androidx.compose.ui.platform.ViewCompositionStrategy
-import androidx.compose.ui.platform.textInputServiceFactory
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.viewinterop.AndroidView
-import androidx.databinding.DataBindingUtil
-import com.example.powerof10.databinding.FragmentHomePageRssBinding
-import java.net.URL
-
-@Composable
-fun greet(){
-
-}
-
-@Preview(showBackground = true, showSystemUi = true)
-@Composable
-fun prev(){
-    greet()}
diff --git a/PowerOf10/app/src/main/java/com/example/powerof10/HomeRSS.kt b/PowerOf10/app/src/main/java/com/example/powerof10/HomeRSS.kt
index d8eb496..1ca96da 100644
--- a/PowerOf10/app/src/main/java/com/example/powerof10/HomeRSS.kt
+++ b/PowerOf10/app/src/main/java/com/example/powerof10/HomeRSS.kt
@@ -29,6 +29,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.lifecycle.ViewModel
+import androidx.navigation.NavController
 import coil.compose.AsyncImage
 import com.example.powerof10.ui.theme.PowerOf10Theme
 import kotlinx.coroutines.*
@@ -57,9 +58,9 @@ class HomeRSS : ComponentActivity() {
     }
 }
 
-class RSSLogic  {
+class RSSLogic {
     private val rSSLink = "https://athleticsweekly.com/feed/"
-   // val RSS_toJsonAPI = "https://api.rss2json.com/v1/api.json?rss_url="
+    // val RSS_toJsonAPI = "https://api.rss2json.com/v1/api.json?rss_url="
 
     //Returns and parses the RSS feed using the KTRSSReader library
     //Does this using the IO dispatcher thread
@@ -72,6 +73,7 @@ class RSSLogic  {
 
 
 }
+
 //Extracts the description in the "<p>"  tag from the RSS "<description> tag"
 fun extractP(description: String?): String {
     val doc: Document = Jsoup.parse(description)
@@ -86,27 +88,27 @@ fun extractImg(description: String?): String {
     return img.attr("src")
 
 }
-
-@Preview(name = "NEXUS_7_2013", device = Devices.NEXUS_7_2013)
-@Preview(name = "NEXUS_5", device = Devices.NEXUS_5)
-@Preview(name = "NEXUS_6", device = Devices.NEXUS_6)
-@Preview(name = "NEXUS_9", device = Devices.NEXUS_9)
-@Preview(name = "NEXUS_10", device = Devices.NEXUS_10)
-@Preview(name = "NEXUS_5X", device = Devices.NEXUS_5X)
-@Preview(name = "NEXUS_6P", device = Devices.NEXUS_6P)
-@Preview(name = "PIXEL_C", device = Devices.PIXEL_C)
-@Preview(name = "PIXEL", device = Devices.PIXEL)
-@Preview(name = "PIXEL_XL", device = Devices.PIXEL_XL)
-@Preview(name = "PIXEL_2", device = Devices.PIXEL_2)
-@Preview(name = "PIXEL_2_XL", device = Devices.PIXEL_2_XL)
-@Preview(name = "PIXEL_3", device = Devices.PIXEL_3)
-@Preview(name = "PIXEL_3_XL", device = Devices.PIXEL_3_XL)
-@Preview(name = "PIXEL_3A", device = Devices.PIXEL_3A)
-@Preview(name = "PIXEL_3A_XL", device = Devices.PIXEL_3A_XL)
+//
+//@Preview(name = "NEXUS_7_2013", device = Devices.NEXUS_7_2013)
+//@Preview(name = "NEXUS_5", device = Devices.NEXUS_5)
+//@Preview(name = "NEXUS_6", device = Devices.NEXUS_6)
+//@Preview(name = "NEXUS_9", device = Devices.NEXUS_9)
+//@Preview(name = "NEXUS_10", device = Devices.NEXUS_10)
+//@Preview(name = "NEXUS_5X", device = Devices.NEXUS_5X)
+//@Preview(name = "NEXUS_6P", device = Devices.NEXUS_6P)
+//@Preview(name = "PIXEL_C", device = Devices.PIXEL_C)
+//@Preview(name = "PIXEL", device = Devices.PIXEL)
+//@Preview(name = "PIXEL_XL", device = Devices.PIXEL_XL)
+//@Preview(name = "PIXEL_2", device = Devices.PIXEL_2)
+//@Preview(name = "PIXEL_2_XL", device = Devices.PIXEL_2_XL)
+//@Preview(name = "PIXEL_3", device = Devices.PIXEL_3)
+//@Preview(name = "PIXEL_3_XL", device = Devices.PIXEL_3_XL)
+//@Preview(name = "PIXEL_3A", device = Devices.PIXEL_3A)
+//@Preview(name = "PIXEL_3A_XL", device = Devices.PIXEL_3A_XL)
 @Preview(name = "PIXEL_4", device = Devices.PIXEL_4)
 @Preview(name = "PIXEL_4_XL", device = Devices.PIXEL_4_XL)
 @Composable
-fun DisplayRssHomepage() {
+fun DisplayRssHomepage(navController: NavController) {
     var rssitem by remember {// If any changes are made to this variable the screen recomposes also stores the RSS Data
         mutableStateOf(
             RssStandardChannelData(
@@ -141,47 +143,65 @@ fun DisplayRssHomepage() {
         isRSSLoading = false //disables loading circle
 
     }
-
+    val scaffoldState = rememberScaffoldState()
+    val scope = rememberCoroutineScope()
     val powerOfTen = painterResource(id = R.drawable.powerof10)
-    Column {
 
-        CenterAlignedTopAppBar(modifier = Modifier.fillMaxWidth(),
-            title = {
-                Image(
-                    painter = powerOfTen,
-                    contentDescription = "Power of Ten Logo",
-                    modifier = Modifier,
-                    contentScale = ContentScale.FillBounds
+
+
+    Column {
+        Scaffold(
+            scaffoldState = scaffoldState,
+            topBar = {
+                CenterAlignedTopAppBar(modifier = Modifier.fillMaxWidth(),
+                    title = {
+                        Image(
+                            painter = powerOfTen,
+                            contentDescription = "Power of Ten Logo",
+                            modifier = Modifier,
+                            contentScale = ContentScale.FillBounds
+                        )
+                    },
+                    colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                        Color(0xFFE5383B),
+                        navigationIconContentColor = Color.White
+                    ),
+                    navigationIcon = {
+                        IconButton(onClick = { scope.launch { scaffoldState.drawerState.open() } }) {
+                            Icon(
+                                Icons.Filled.Menu, contentDescription = null,
+                                tint = Color.White,
+                                modifier = Modifier.size(48.dp)
+                            )
+                        }
+                    }
                 )
             },
-            colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
-                Color(0xFFE5383B),
-                navigationIconContentColor = Color.White
-            ),
-            navigationIcon = {
-                IconButton(onClick = { /* doSomething() */ }) {
-                    Icon(
-                        Icons.Filled.Menu, contentDescription = null,
-                        tint = Color.White,
-                        modifier = Modifier.size(48.dp)
-                    )
-                }
-            }
-        )
-        Text(
-            text = "Latest News",
-            fontWeight = FontWeight.Bold,
-            fontSize = 24.sp,
-            modifier = Modifier.padding(10.dp)
-        )
+            drawerContent = {
+                NavDrawerBody(items = listOf(
+                    MenuItems(1, "Home",Screen.HomepageRSS.route),
+                    MenuItems(2, "Rankings",Screen.RankingPage.route),
+                    MenuItems(3, "Settings",Screen.RankingPage.route)
+                ), onItemClick = { navController.navigate(route =it.route) }
+                )
+            }, content = {
+Column() {
+    Text(
+        text = "Latest News",
+        fontWeight = FontWeight.Bold,
+        fontSize = 24.sp,
+        modifier = Modifier.padding(10.dp)
+    )
 
-        LazyColumn(content = {
-            rssitem.items?.let { it ->
-                items(it.size) {
-                    RssItem(it, rssitem = rssitem)
-                }
+    LazyColumn(content = {
+        rssitem.items?.let { it ->
+            items(it.size) {
+                RssItem(it, rssitem = rssitem)
             }
-        })
+        }
+    })
+}
+             })
 
     }
     if (isRSSLoading) {// if the RSS hasn't loaded circular progress indicator will appear
@@ -192,20 +212,20 @@ fun DisplayRssHomepage() {
             CircularProgressIndicator()
         }
     }
-
-
 }
 
+
 // The RSS item for the Lazy Column Composable (Recycler View)
 @Composable
-private fun RssItem(index: Int, rssitem: RssStandardChannelData) {
+fun RssItem(index: Int, rssitem: RssStandardChannelData) {
     val mContext = LocalContext.current
     Column(modifier = Modifier.clickable {// On click a browser intent is started to the link of the article
-        val browserIntent = Intent(Intent.ACTION_VIEW, Uri.parse(rssitem.items?.get(index)?.link))
+        val browserIntent =
+            Intent(Intent.ACTION_VIEW, Uri.parse(rssitem.items?.get(index)?.link))
         browserIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
         mContext.startActivity(browserIntent)
     }) {
-        Box{
+        Box {
             AsyncImage( //coil library composable that loads images from the the src url on another thread
                 model = extractImg(rssitem.items?.get(index)?.description),
                 contentDescription = "Rss Image",
@@ -243,4 +263,5 @@ private fun RssItem(index: Int, rssitem: RssStandardChannelData) {
 
     }
 
+
 }
diff --git a/PowerOf10/app/src/main/java/com/example/powerof10/NavGraph.kt b/PowerOf10/app/src/main/java/com/example/powerof10/NavGraph.kt
index 144ba5d..ce7a219 100644
--- a/PowerOf10/app/src/main/java/com/example/powerof10/NavGraph.kt
+++ b/PowerOf10/app/src/main/java/com/example/powerof10/NavGraph.kt
@@ -6,24 +6,28 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 
 
-
-
 @Composable
 fun SetupNavGraph(
     navController: NavHostController
 ) {
-    NavHost(navController = navController , startDestination = Screen.Welcome.route )
+    NavHost(navController = navController, startDestination = Screen.Welcome.route)
     {
         composable(
             route = Screen.Welcome.route
-        ){
+        ) {
             Homescreen(navController)
         }
         composable(
-                route = Screen.HomepageRSS.route
-                ){
+            route = Screen.HomepageRSS.route
+        ) {
+
+            DisplayRssHomepage(navController)
+        }
+        composable(
+            route = Screen.RankingPage.route
+        ) {
 
-            DisplayRssHomepage()
+            DisplayRankingPage(navController)
         }
     }
 }
\ No newline at end of file
diff --git a/PowerOf10/app/src/main/java/com/example/powerof10/RankingPage.kt b/PowerOf10/app/src/main/java/com/example/powerof10/RankingPage.kt
index 8352cf1..c35c8d4 100644
--- a/PowerOf10/app/src/main/java/com/example/powerof10/RankingPage.kt
+++ b/PowerOf10/app/src/main/java/com/example/powerof10/RankingPage.kt
@@ -28,8 +28,10 @@ import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
 import com.example.powerof10.ui.theme.PowerOf10Theme
 import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import org.jsoup.Jsoup
 import org.jsoup.nodes.Document
@@ -111,29 +113,29 @@ fun getNames(doc: Document): Elements {
 
 
 
-//@Preview(name = "NEXUS_7_2013", device = Devices.NEXUS_7_2013)
-//@Preview(name = "NEXUS_5", device = Devices.NEXUS_5)
-//@Preview(name = "NEXUS_6", device = Devices.NEXUS_6)
-//@Preview(name = "NEXUS_9", device = Devices.NEXUS_9)
-//@Preview(name = "NEXUS_10", device = Devices.NEXUS_10)
-//@Preview(name = "NEXUS_5X", device = Devices.NEXUS_5X)
-//@Preview(name = "NEXUS_6P", device = Devices.NEXUS_6P)
-//@Preview(name = "PIXEL_C", device = Devices.PIXEL_C)
-//@Preview(name = "PIXEL", device = Devices.PIXEL)
-//@Preview(name = "PIXEL_XL", device = Devices.PIXEL_XL)
-//@Preview(name = "PIXEL_2", device = Devices.PIXEL_2)
-//@Preview(name = "PIXEL_2_XL", device = Devices.PIXEL_2_XL)
-//@Preview(name = "PIXEL_3", device = Devices.PIXEL_3)
-//@Preview(name = "PIXEL_3_XL", device = Devices.PIXEL_3_XL)
-//@Preview(name = "PIXEL_3A", device = Devices.PIXEL_3A)
-//@Preview(name = "PIXEL_3A_XL", device = Devices.PIXEL_3A_XL)
+@Preview(name = "NEXUS_7_2013", device = Devices.NEXUS_7_2013)
+@Preview(name = "NEXUS_5", device = Devices.NEXUS_5)
+@Preview(name = "NEXUS_6", device = Devices.NEXUS_6)
+@Preview(name = "NEXUS_9", device = Devices.NEXUS_9)
+@Preview(name = "NEXUS_10", device = Devices.NEXUS_10)
+@Preview(name = "NEXUS_5X", device = Devices.NEXUS_5X)
+@Preview(name = "NEXUS_6P", device = Devices.NEXUS_6P)
+@Preview(name = "PIXEL_C", device = Devices.PIXEL_C)
+@Preview(name = "PIXEL", device = Devices.PIXEL)
+@Preview(name = "PIXEL_XL", device = Devices.PIXEL_XL)
+@Preview(name = "PIXEL_2", device = Devices.PIXEL_2)
+@Preview(name = "PIXEL_2_XL", device = Devices.PIXEL_2_XL)
+@Preview(name = "PIXEL_3", device = Devices.PIXEL_3)
+@Preview(name = "PIXEL_3_XL", device = Devices.PIXEL_3_XL)
+@Preview(name = "PIXEL_3A", device = Devices.PIXEL_3A)
+@Preview(name = "PIXEL_3A_XL", device = Devices.PIXEL_3A_XL)
 
 @SuppressLint("MutableCollectionMutableState")
 @Preview(name = "PIXEL_4", device = Devices.PIXEL_4)
 //@Preview(name = "PIXEL_4_XL", device = Devices.PIXEL_4_XL)
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
-fun DisplayRankingPage() {
+fun DisplayRankingPage(navController: NavController) {
     //following observable variable descriptions apply to all
     var yearExpanded by remember { mutableStateOf(false) }//checks the state of the dropdown (expanded or not)
     val yearOptions = listOf("2022", "2021", "2020", "2019", "2018", "2017", "2016", "2015", "2014", "2013", "2012", "2011", "2010", "2009", "2008", "2007", "2006", "All Time")//variables inside the menu
@@ -198,228 +200,250 @@ fun DisplayRankingPage() {
     }
 
     }
-
-
+    val scaffoldState = rememberScaffoldState()
+    val scope = rememberCoroutineScope()
+    val powerOfTen = painterResource(id = R.drawable.powerof10)
     LaunchedEffect(buttonPress) { //recomposes on button press
         val html = getHTML(eventSelectedOptionText,groupSelectedOptionText,genderSelectedOptionText,yearSelectedOptionText,regionSelectedOptionText)//gets html  from the selected page
         athletesList = getNames(html)//gets records from page
         println(athletesList[0].child(6).child(0).text())//prints name of first record (test)
 
     }
-    Column(modifier = Modifier.fillMaxWidth()) {
-
-
-        CenterAlignedTopAppBar(modifier = Modifier.fillMaxWidth(),
-            title = {
-                Image(
-                    painter = painterResource(id = R.drawable.powerof10 ),
-                    contentDescription = "Power of Ten Logo",
-                    modifier = Modifier,
-                    contentScale = ContentScale.FillBounds
-                )
-            },
-            colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
-                Color(0xFFE5383B),
-                navigationIconContentColor = Color.White
-            ),
-            navigationIcon = {
-                IconButton(onClick = { /* doSomething() */ }) {
-                    Icon(
-                        Icons.Filled.Menu, contentDescription = null,
-                        tint = Color.White,
-                        modifier = Modifier.size(48.dp)
+    Scaffold(
+        scaffoldState = scaffoldState,
+        topBar = {
+            CenterAlignedTopAppBar(modifier = Modifier.fillMaxWidth(),
+                title = {
+                    Image(
+                        painter = powerOfTen,
+                        contentDescription = "Power of Ten Logo",
+                        modifier = Modifier,
+                        contentScale = ContentScale.FillBounds
                     )
+                },
+                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                    Color(0xFFE5383B),
+                    navigationIconContentColor = Color.White
+                ),
+                navigationIcon = {
+                    IconButton(onClick = { scope.launch { scaffoldState.drawerState.open() } }) {
+                        Icon(
+                            Icons.Filled.Menu, contentDescription = null,
+                            tint = Color.White,
+                            modifier = Modifier.size(48.dp)
+                        )
+                    }
                 }
-            }
-        )
-        Text(
-            text = "Rankings",
-            fontWeight = FontWeight.Bold,
-            fontSize = 24.sp,
-            modifier = Modifier.padding(10.dp)
-        )
-        Row( horizontalArrangement = Arrangement.SpaceAround,modifier = Modifier.padding(0.dp,0.dp,0.dp,10.dp)){
-            ExposedDropdownMenuBox(
-                expanded = yearExpanded,
-                modifier = Modifier
-                    .weight(1f)
-                    .padding(horizontal = 10.dp, vertical = 0.dp),
-                onExpandedChange = { yearExpanded = !yearExpanded },
-            ) {
-                TextField(
-                    readOnly = true,
-                    value = yearSelectedOptionText,
-                    onValueChange = {},
-                    label = { Text("1. Year") },
-                    colors = ExposedDropdownMenuDefaults.textFieldColors(),
+            )
+        },
+        drawerContent = {
+            NavDrawerBody(items = listOf(
+                MenuItems(1, "Home",Screen.HomepageRSS.route),
+                MenuItems(2, "Rankings",Screen.RankingPage.route),
+                MenuItems(3, "Settings",Screen.RankingPage.route)
+            ), onItemClick = { navController.navigate(route =it.route) }
+            )
+        }, content = {
+            Column(modifier = Modifier.fillMaxWidth()) {
+
+                Text(
+                    text = "Rankings",
+                    fontWeight = FontWeight.Bold,
+                    fontSize = 24.sp,
+                    modifier = Modifier.padding(10.dp)
                 )
-                ExposedDropdownMenu(
-                    expanded = yearExpanded,
-                    onDismissRequest = { yearExpanded = false },
+                Row(
+                    horizontalArrangement = Arrangement.SpaceAround,
+                    modifier = Modifier.padding(0.dp, 0.dp, 0.dp, 10.dp)
                 ) {
-                    yearOptions.forEach { yearSelectionOption ->
-                        DropdownMenuItem(
-                            onClick = {
-                                yearSelectedOptionText = yearSelectionOption
-                                yearExpanded = false
+                    ExposedDropdownMenuBox(
+                        expanded = yearExpanded,
+                        modifier = Modifier
+                            .weight(1f)
+                            .padding(horizontal = 10.dp, vertical = 0.dp),
+                        onExpandedChange = { yearExpanded = !yearExpanded },
+                    ) {
+                        TextField(
+                            readOnly = true,
+                            value = yearSelectedOptionText,
+                            onValueChange = {},
+                            label = { Text("1. Year") },
+                            colors = ExposedDropdownMenuDefaults.textFieldColors(),
+                        )
+                        ExposedDropdownMenu(
+                            expanded = yearExpanded,
+                            onDismissRequest = { yearExpanded = false },
+                        ) {
+                            yearOptions.forEach { yearSelectionOption ->
+                                DropdownMenuItem(
+                                    onClick = {
+                                        yearSelectedOptionText = yearSelectionOption
+                                        yearExpanded = false
+                                    }
+                                ) { Text(text = yearSelectionOption) }
                             }
-                        ){Text(text = yearSelectionOption)}
+                        }
                     }
-                }
-            }
 
 
-            ExposedDropdownMenuBox(
-                expanded = regionExpanded,
-                modifier = Modifier
-                    .weight(1f)
-                    .padding(horizontal = 10.dp, vertical = 0.dp),
-                onExpandedChange = { regionExpanded = !regionExpanded },
-            ) {
-                TextField(
-                    readOnly = true,
-                    value = regionSelectedOptionText,
-                    onValueChange = {},
-                    label = { Text("2. Region") },
-                    colors = ExposedDropdownMenuDefaults.textFieldColors(),
-                )
-                ExposedDropdownMenu(
-                    expanded = regionExpanded,
-                    onDismissRequest = { regionExpanded = false },
-                ) {
-                    regionOptions.forEach { regionSelectionOption ->
-                        DropdownMenuItem(
-                            onClick = {
-                                regionSelectedOptionText = regionSelectionOption
-                                regionExpanded = false
+                    ExposedDropdownMenuBox(
+                        expanded = regionExpanded,
+                        modifier = Modifier
+                            .weight(1f)
+                            .padding(horizontal = 10.dp, vertical = 0.dp),
+                        onExpandedChange = { regionExpanded = !regionExpanded },
+                    ) {
+                        TextField(
+                            readOnly = true,
+                            value = regionSelectedOptionText,
+                            onValueChange = {},
+                            label = { Text("2. Region") },
+                            colors = ExposedDropdownMenuDefaults.textFieldColors(),
+                        )
+                        ExposedDropdownMenu(
+                            expanded = regionExpanded,
+                            onDismissRequest = { regionExpanded = false },
+                        ) {
+                            regionOptions.forEach { regionSelectionOption ->
+                                DropdownMenuItem(
+                                    onClick = {
+                                        regionSelectedOptionText = regionSelectionOption
+                                        regionExpanded = false
+                                    }
+                                ) { Text(text = regionSelectionOption) }
                             }
-                        ){Text(text = regionSelectionOption)}
+                        }
                     }
-                }
-            }
 
-            ExposedDropdownMenuBox(
-                expanded = genderExpanded,
-                modifier = Modifier
-                    .weight(1f)
-                    .padding(horizontal = 10.dp, vertical = 0.dp),
-                onExpandedChange = { genderExpanded = !genderExpanded },
-            ) {
-                TextField(
-                    readOnly = true,
-                    value = genderSelectedOptionText,
-                    onValueChange = {
-                    },
-                    label = { Text("3. Gender") },
-                    colors = ExposedDropdownMenuDefaults.textFieldColors(),
-                )
-                ExposedDropdownMenu(
-                    expanded = genderExpanded,
-                    onDismissRequest = { genderExpanded = false },
-                ) {
-                    genderOptions.forEach { selectionOption ->
-                        DropdownMenuItem(
-                            onClick = {
-                                genderSelectedOptionText = selectionOption
-                                updateOptions+=1
-
-
-                                genderExpanded = false
+                    ExposedDropdownMenuBox(
+                        expanded = genderExpanded,
+                        modifier = Modifier
+                            .weight(1f)
+                            .padding(horizontal = 10.dp, vertical = 0.dp),
+                        onExpandedChange = { genderExpanded = !genderExpanded },
+                    ) {
+                        TextField(
+                            readOnly = true,
+                            value = genderSelectedOptionText,
+                            onValueChange = {
+                            },
+                            label = { Text("3. Gender") },
+                            colors = ExposedDropdownMenuDefaults.textFieldColors(),
+                        )
+                        ExposedDropdownMenu(
+                            expanded = genderExpanded,
+                            onDismissRequest = { genderExpanded = false },
+                        ) {
+                            genderOptions.forEach { selectionOption ->
+                                DropdownMenuItem(
+                                    onClick = {
+                                        genderSelectedOptionText = selectionOption
+                                        updateOptions += 1
+
+
+                                        genderExpanded = false
+                                    }
+                                ) { Text(text = selectionOption) }
                             }
-                        ){Text(text = selectionOption)}
+                        }
                     }
                 }
-            }
-        }
-        Row( horizontalArrangement = Arrangement.SpaceAround,modifier = Modifier
-            .fillMaxWidth()
-            .padding(0.dp, 0.dp, 0.dp, 10.dp)){
-            ExposedDropdownMenuBox(
-                expanded = groupExpanded,
-                modifier = Modifier
-                    .weight(1f)
-                    .padding(horizontal = 10.dp, vertical = 0.dp),
-                onExpandedChange = { groupExpanded = !groupExpanded },
-            ) {
-                TextField(
-                    readOnly = true,
-                    value = groupSelectedOptionText,
-                    onValueChange = {},
-                    label = { Text("4. Group") },
-                    colors = ExposedDropdownMenuDefaults.textFieldColors(),
-                )
-                ExposedDropdownMenu(
-                    expanded = groupExpanded,
-                    onDismissRequest = { groupExpanded = false },
+                Row(
+                    horizontalArrangement = Arrangement.SpaceAround, modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(0.dp, 0.dp, 0.dp, 10.dp)
                 ) {
-                    groupOptions.forEach { selectionOption ->
-                        DropdownMenuItem(
-                            onClick = {
-                                groupSelectedOptionText = selectionOption
-                                updateOptions+=1
-                                groupExpanded = false
+                    ExposedDropdownMenuBox(
+                        expanded = groupExpanded,
+                        modifier = Modifier
+                            .weight(1f)
+                            .padding(horizontal = 10.dp, vertical = 0.dp),
+                        onExpandedChange = { groupExpanded = !groupExpanded },
+                    ) {
+                        TextField(
+                            readOnly = true,
+                            value = groupSelectedOptionText,
+                            onValueChange = {},
+                            label = { Text("4. Group") },
+                            colors = ExposedDropdownMenuDefaults.textFieldColors(),
+                        )
+                        ExposedDropdownMenu(
+                            expanded = groupExpanded,
+                            onDismissRequest = { groupExpanded = false },
+                        ) {
+                            groupOptions.forEach { selectionOption ->
+                                DropdownMenuItem(
+                                    onClick = {
+                                        groupSelectedOptionText = selectionOption
+                                        updateOptions += 1
+                                        groupExpanded = false
+                                    }
+                                ) { Text(text = selectionOption) }
                             }
-                        ){Text(text = selectionOption)}
+                        }
                     }
-                }
-            }
 
-            ExposedDropdownMenuBox(
-                expanded = eventExpanded,
-                modifier = Modifier
-                    .weight(1f)
-                    .padding(horizontal = 10.dp, vertical = 0.dp),
-                onExpandedChange = { eventExpanded = !eventExpanded },
-            ) {
-                TextField(
-                    readOnly = true,
-                    value = eventSelectedOptionText,
-                    onValueChange = {},
-                    label = { Text("5. Event") },
-                    colors = ExposedDropdownMenuDefaults.textFieldColors(),
-                )
-                ExposedDropdownMenu(
-                    expanded = eventExpanded,
-                    onDismissRequest = { eventExpanded = false },
-                ) {
-                    subList.forEach { selectionOption ->
-                        DropdownMenuItem(
-                            onClick = {
-                                eventSelectedOptionText = selectionOption
-                                updateOptions += 1
-                                eventExpanded = false
+                    ExposedDropdownMenuBox(
+                        expanded = eventExpanded,
+                        modifier = Modifier
+                            .weight(1f)
+                            .padding(horizontal = 10.dp, vertical = 0.dp),
+                        onExpandedChange = { eventExpanded = !eventExpanded },
+                    ) {
+                        TextField(
+                            readOnly = true,
+                            value = eventSelectedOptionText,
+                            onValueChange = {},
+                            label = { Text("5. Event") },
+                            colors = ExposedDropdownMenuDefaults.textFieldColors(),
+                        )
+                        ExposedDropdownMenu(
+                            expanded = eventExpanded,
+                            onDismissRequest = { eventExpanded = false },
+                        ) {
+                            subList.forEach { selectionOption ->
+                                DropdownMenuItem(
+                                    onClick = {
+                                        eventSelectedOptionText = selectionOption
+                                        updateOptions += 1
+                                        eventExpanded = false
+                                    }
+                                ) { Text(text = selectionOption) }
                             }
-                        ){ Text(text = selectionOption)}
+                        }
                     }
-                }
-            }
 
-            Button(onClick = { buttonPress+=1},modifier = Modifier
-                .weight(1f)
-                .padding(horizontal = 10.dp, vertical = 0.dp)) {
-                Text("Apply" )
-
-            }
+                    Button(
+                        onClick = { buttonPress += 1 }, modifier = Modifier
+                            .weight(1f)
+                            .padding(horizontal = 10.dp, vertical = 0.dp)
+                    ) {
+                        Text("Apply")
 
-        }
-        Row(horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.fillMaxWidth()) {
-            Text(text = "Rank")
-            Text(text = "Club")
-            Text(text = "Performance")
-        }
+                    }
 
-        LazyColumn(content = {
-                items(athletesList.size) {
+                }
+                Row(
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                    modifier = Modifier.fillMaxWidth()
+                ) {
+                    Text(text = "Rank")
+                    Text(text = "Club")
+                    Text(text = "Performance")
+                }
 
+                LazyColumn(content = {
+                    items(athletesList.size) {
 
-                    RankingItem(it, athletesList)
-                }
-        })
 
+                        RankingItem(it, athletesList)
+                    }
+                })
 
 
+            }
 
-    }//Dropdown Menus
+        })//Dropdown Menus
 }
 
 @Composable
diff --git a/PowerOf10/app/src/main/java/com/example/powerof10/Screen.kt b/PowerOf10/app/src/main/java/com/example/powerof10/Screen.kt
index 7a9c96b..8c69ef6 100644
--- a/PowerOf10/app/src/main/java/com/example/powerof10/Screen.kt
+++ b/PowerOf10/app/src/main/java/com/example/powerof10/Screen.kt
@@ -3,4 +3,5 @@ package com.example.powerof10
 sealed class Screen(val route: String) {
     object Welcome: Screen(route ="welcome" )
     object HomepageRSS: Screen(route = "Homepage_rss")
+    object RankingPage: Screen(route = "RankingPage")
 }
diff --git a/PowerOf10/app/src/main/res/values/strings.xml b/PowerOf10/app/src/main/res/values/strings.xml
index ddd00b3..7ca9ea1 100644
--- a/PowerOf10/app/src/main/res/values/strings.xml
+++ b/PowerOf10/app/src/main/res/values/strings.xml
@@ -5,4 +5,5 @@
     <string name="title_activity_home_rss">HomeRSS</string>
     <string name="title_activity_rssfeed">RSSFEED</string>
     <string name="title_activity_ranking_page">RankingPage</string>
+    <string name="title_activity_nav_drawer">NavDrawer</string>
 </resources>
\ No newline at end of file