Nav Drawer Implemented using scaffold

PowerOf10/app/src/main/AndroidManifest.xml

@@ -1,14 +1,21 @@
 <?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"
         android:label="@string/app_name"
         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"

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) {
 
     }
 
+
 }

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)
         }
     }
 }

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")
 }

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>