Implement navigation rail

Implement navigation rail and seperate the components into its own sections
oas004 · Feb 20, 2023 · eb68749 · eb68749
1 parent 7d1532c
commit eb68749
Show file tree

Hide file tree

Showing 2 changed files with 224 additions and 22 deletions.
diff --git a/src/main/kotlin/ComponentScope.kt b/src/main/kotlin/ComponentScope.kt
@@ -1,32 +1,202 @@
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.*
+import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import components.*
 import m3components.components.M3Buttons
 
+enum class Page {
+    Buttons, AppBars, Cards, TextFields, Chips, Switch, Checkbox, Sliders, ProgressBars, Dividers
+}
+
 @Composable
 internal fun ComponentScope(
     onColorPicked: (name: String, color: Color) -> Unit
 ) {
+    var selectedPage by remember { mutableStateOf(Page.Buttons) }
+
     Row(
         Modifier
             .fillMaxSize()
             .background(color = MaterialTheme.colorScheme.background)
     ) {
+        NavigationRail(
+            modifier = Modifier.fillMaxHeight().padding(4.dp),
+        ) {
+
+            NavigationRailItem(
+                selected = selectedPage == Page.Buttons,
+                onClick = {
+                    selectedPage = Page.Buttons
+                },
+                icon = {
+                    Icon(imageVector = Icons.Default.TouchApp, contentDescription = "Buttons")
+                },
+                label = {
+                    Text(
+                        text = "Buttons",
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            )
+
+            NavigationRailItem(
+                selected = selectedPage == Page.AppBars,
+                onClick = {
+                    selectedPage = Page.AppBars
+                },
+                icon = {
+                    Icon(imageVector = Icons.Default.AppShortcut, contentDescription = "App Bars")
+                },
+                label = {
+                    Text(
+                        text = "App Bars",
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            )
+
+            NavigationRailItem(
+                selected = selectedPage == Page.Cards,
+                onClick = {
+                    selectedPage = Page.Cards
+                },
+                icon = {
+                    Icon(imageVector = Icons.Default.CreditCard, contentDescription = "Cards")
+                },
+                label = {
+                    Text(
+                        text = "Cards",
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            )
+
+            NavigationRailItem(
+                selected = selectedPage == Page.TextFields,
+                onClick = {
+                    selectedPage = Page.TextFields
+                },
+                icon = {
+                    Icon(imageVector = Icons.Default.TextFields, contentDescription = "TextFields")
+                },
+                label = {
+                    Text(
+                        text = "TextFields",
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            )
+
+            NavigationRailItem(
+                selected = selectedPage == Page.Chips,
+                onClick = {
+                    selectedPage = Page.Chips
+                },
+                icon = {
+                    Icon(imageVector = Icons.Default.SpatialAudio, contentDescription = "Chips")
+                },
+                label = {
+                    Text(
+                        text = "Chips",
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            )
+            NavigationRailItem(
+                selected = selectedPage == Page.Switch,
+                onClick = {
+                    selectedPage = Page.Switch
+                },
+                icon = {
+                    Icon(imageVector = Icons.Default.SwitchLeft, contentDescription = "Switch")
+                },
+                label = {
+                    Text(
+                        text = "Switch",
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            )
+            NavigationRailItem(
+                selected = selectedPage == Page.Checkbox,
+                onClick = {
+                    selectedPage = Page.Checkbox
+                },
+                icon = {
+                    Icon(imageVector = Icons.Default.CheckBox, contentDescription = "Checkbox")
+                },
+                label = {
+                    Text(
+                        text = "Checkbox",
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            )
+            NavigationRailItem(
+                selected = selectedPage == Page.Sliders,
+                onClick = {
+                    selectedPage = Page.Sliders
+                },
+                icon = {
+                    Icon(imageVector = Icons.Default.Slideshow, contentDescription = "Sliders")
+                },
+                label = {
+                    Text(
+                        text = "Sliders",
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            )
+
+            NavigationRailItem(
+                selected = selectedPage == Page.ProgressBars,
+                onClick = {
+                    selectedPage = Page.ProgressBars
+                },
+                icon = {
+                    Icon(imageVector = Icons.Default.Download, contentDescription = "Progress Bars")
+                },
+                label = {
+                    Text(
+                        textAlign = TextAlign.Center,
+                        text = "ProgressBars",
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            )
+
+            NavigationRailItem(
+                selected = selectedPage == Page.Dividers,
+                onClick = {
+                    selectedPage = Page.Dividers
+                },
+                icon = {
+                    Icon(imageVector = Icons.Default.Poll, contentDescription = "Dividers")
+                },
+                label = {
+                    Text(
+                        text = "Dividers",
+                        style = MaterialTheme.typography.labelMedium
+                    )
+                }
+            )
+        }
+
         // Components
         M3Components(
             modifier = Modifier.fillMaxSize()
                 .weight(2f)
-                .padding(16.dp)
+                .padding(16.dp),
+            page = selectedPage,
         )
 
         // Color picking area
@@ -40,24 +210,55 @@ internal fun ComponentScope(
 }
 
 @Composable
-private fun M3Components(modifier: Modifier) {
+private fun M3Components(modifier: Modifier, page: Page) {
     LazyVerticalGrid(
         modifier = modifier,
         columns = GridCells.Fixed(1),
         contentPadding = PaddingValues(20.dp)
     ) {
-        item { M3Buttons() }
-        item { M3TextFields() }
-        item { M3Chips() }
-        item { M3Switch() }
-        item { M3Checkbox() }
-        item { M3Slider() }
-        item { M3ProgressBar() }
-        item { M3Divider() }
-        item { M3Cards() }
-        item { M3TopAppBars() }
-        item { M3NavigationBars() }
-        item { M3Tab() }
+        when (page) {
+            Page.Buttons -> {
+                item { M3Buttons() }
+            }
+
+            Page.AppBars -> {
+                item { M3TopAppBars() }
+                item { M3NavigationBars() }
+                item { M3Tab() }
+            }
+
+            Page.Cards -> {
+                item { M3Cards() }
+            }
+
+            Page.TextFields -> {
+                item { M3TextFields() }
+            }
+
+            Page.Chips -> {
+                item { M3Chips() }
+            }
+
+            Page.Switch -> {
+                item { M3Switch() }
+            }
+
+            Page.Checkbox -> {
+                item { M3Checkbox() }
+            }
+
+            Page.Sliders -> {
+                item { M3Slider() }
+            }
+
+            Page.ProgressBars -> {
+                item { M3ProgressBar() }
+            }
+
+            Page.Dividers -> {
+                item { M3Divider() }
+            }
+        }
     }
 }
 

diff --git a/src/main/kotlin/Main.kt b/src/main/kotlin/Main.kt
@@ -77,16 +77,17 @@ fun main() = application {
 
                 ComponentScope(
                     onColorPicked = { colorName, color ->
-                        val updatedColorPalette =
-                            updateColorPalette(
+                        val updatedColorPalette = updateColorPalette(
                                 currentColorPalette = currentColorPalette,
                                 colorName = colorName,
                                 color = color,
                             )
 
                         if (darkmode) {
                             darkColorScheme = updatedColorPalette
-                        } else lightColorScheme = updatedColorPalette
+                        } else {
+                            lightColorScheme = updatedColorPalette
+                        }
                     }
                 )
             }