├── .gitignore ├── .idea ├── .gitignore ├── .name ├── compiler.xml ├── gradle.xml ├── jarRepositories.xml ├── jpa-buddy.xml ├── kotlinc.xml ├── misc.xml └── vcs.xml ├── README.md ├── build.gradle.kts ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── settings.gradle.kts └── src └── main └── kotlin ├── Main.kt ├── navcontroller ├── NavController.kt └── NavigationHost.kt └── screens ├── HomeScreen.kt ├── NotificationScreen.kt ├── ProfileScreen.kt └── SettingScreen.kt /.gitignore: -------------------------------------------------------------------------------- 1 | # Project exclude paths 2 | /.gradle/ 3 | /build/ -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | CustomNavigation -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 16 | 17 | -------------------------------------------------------------------------------- /.idea/jarRepositories.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 14 | 15 | 19 | 20 | 24 | 25 | 29 | 30 | -------------------------------------------------------------------------------- /.idea/jpa-buddy.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/kotlinc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Navigation For ***Compose for Desktop*** 2 | 3 | 4 | #### In order to use this navigation system you have to create 2 files: 5 | 1. ***NavController*** 6 | 2. and ***NavigationHost*** 7 | 8 | *NavController.kt* 9 | ``` 10 | import androidx.compose.runtime.Composable 11 | import androidx.compose.runtime.MutableState 12 | import androidx.compose.runtime.mutableStateOf 13 | import androidx.compose.runtime.remember 14 | import androidx.compose.runtime.saveable.rememberSaveable 15 | 16 | /** 17 | * NavController Class 18 | */ 19 | class NavController( 20 | private val startDestination: String, 21 | private var backStackScreens: MutableSet = mutableSetOf() 22 | ) { 23 | // Variable to store the state of the current screen 24 | var currentScreen: MutableState = mutableStateOf(startDestination) 25 | 26 | // Function to handle the navigation between the screen 27 | fun navigate(route: String) { 28 | if (route != currentScreen.value) { 29 | if (backStackScreens.contains(currentScreen.value) && currentScreen.value != startDestination) { 30 | backStackScreens.remove(currentScreen.value) 31 | } 32 | 33 | if (route == startDestination) { 34 | backStackScreens = mutableSetOf() 35 | } else { 36 | backStackScreens.add(currentScreen.value) 37 | } 38 | 39 | currentScreen.value = route 40 | } 41 | } 42 | 43 | // Function to handle the back 44 | fun navigateBack() { 45 | if (backStackScreens.isNotEmpty()) { 46 | currentScreen.value = backStackScreens.last() 47 | backStackScreens.remove(currentScreen.value) 48 | } 49 | } 50 | } 51 | 52 | 53 | /** 54 | * Composable to remember the state of the navcontroller 55 | */ 56 | @Composable 57 | fun rememberNavController( 58 | startDestination: String, 59 | backStackScreens: MutableSet = mutableSetOf() 60 | ): MutableState = rememberSaveable { 61 | mutableStateOf(NavController(startDestination, backStackScreens)) 62 | } 63 | ``` 64 | 65 | 66 | *NavigationHost.kt* 67 | ``` 68 | import androidx.compose.runtime.Composable 69 | 70 | /** 71 | * NavigationHost class 72 | */ 73 | class NavigationHost( 74 | val navController: NavController, 75 | val contents: @Composable NavigationGraphBuilder.() -> Unit 76 | ) { 77 | 78 | @Composable 79 | fun build() { 80 | NavigationGraphBuilder().renderContents() 81 | } 82 | 83 | inner class NavigationGraphBuilder( 84 | val navController: NavController = this@NavigationHost.navController 85 | ) { 86 | @Composable 87 | fun renderContents() { 88 | this@NavigationHost.contents(this) 89 | } 90 | } 91 | } 92 | 93 | 94 | /** 95 | * Composable to build the Navigation Host 96 | */ 97 | @Composable 98 | fun NavigationHost.NavigationGraphBuilder.composable( 99 | route: String, 100 | content: @Composable () -> Unit 101 | ) { 102 | if (navController.currentScreen.value == route) { 103 | content() 104 | } 105 | } 106 | ``` 107 | 108 | #### Create enum class for your screens (You can create your own with more parameters) 109 | ``` 110 | /** 111 | * Screens 112 | */ 113 | enum class Screen( 114 | val label: String, 115 | val icon: ImageVector 116 | ) { 117 | HomeScreen( 118 | label = "Home", 119 | icon = Icons.Filled.Home 120 | ), 121 | NotificationsScreen( 122 | label = "Notifications", 123 | icon = Icons.Filled.Notifications 124 | ), 125 | SettingsScreen( 126 | label = "Settings", 127 | icon = Icons.Filled.Settings 128 | ), 129 | ProfileScreens( 130 | label = "User Profile", 131 | icon = Icons.Filled.VerifiedUser 132 | ) 133 | } 134 | ``` 135 | 136 | 137 | ##### Now, you are ready to use navigation on ***Compose for Desktop*** app 138 | 139 | ###### Just create your custom Navigation Host to handle navigation for different screens 140 | 141 | ``` 142 | @Composable 143 | fun CustomNavigationHost( 144 | navController: NavController 145 | ) { 146 | NavigationHost(navController) { 147 | composable(Screen.HomeScreen.name) { 148 | HomeScreen(navController) 149 | } 150 | 151 | composable(Screen.NotificationsScreen.name) { 152 | NotificationScreen(navController) 153 | } 154 | 155 | composable(Screen.SettingsScreen.name) { 156 | SettingScreen(navController) 157 | } 158 | 159 | composable(Screen.ProfileScreens.name) { 160 | ProfileScreen(navController) 161 | } 162 | 163 | }.build() 164 | } 165 | ``` 166 | 167 | Now you can use it in your ***App*** composable 168 | 169 | ``` 170 | @Composable 171 | fun App() { 172 | val screens = Screen.values().toList() 173 | val navController by rememberNavController(Screen.HomeScreen.name) 174 | val currentScreen by remember { 175 | navController.currentScreen 176 | } 177 | 178 | MaterialTheme { 179 | Surface( 180 | modifier = Modifier.background(color = MaterialTheme.colors.background) 181 | ) { 182 | Box( 183 | modifier = Modifier.fillMaxSize() 184 | ) { 185 | // I have used navigation rail to show how it works 186 | // You can use your own navbar 187 | NavigationRail( 188 | modifier = Modifier.align(Alignment.CenterStart).fillMaxHeight() 189 | ) { 190 | screens.forEach { 191 | NavigationRailItem( 192 | selected = currentScreen == it.name, 193 | icon = { 194 | Icon( 195 | imageVector = it.icon, 196 | contentDescription = it.label 197 | ) 198 | }, 199 | label = { 200 | Text(it.label) 201 | }, 202 | alwaysShowLabel = false, 203 | onClick = { 204 | navController.navigate(it.name) 205 | } 206 | ) 207 | } 208 | } 209 | 210 | Box( 211 | modifier = Modifier.fillMaxHeight() 212 | ) { 213 | 214 | // This is how you can use 215 | CustomNavigationHost(navController = navController) 216 | 217 | } 218 | } 219 | } 220 | } 221 | } 222 | ``` 223 | 224 | Thanks, for using it. 225 | Don't forget to give a star. 226 | 227 | [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/itheamc) 228 | -------------------------------------------------------------------------------- /build.gradle.kts: -------------------------------------------------------------------------------- 1 | import org.jetbrains.compose.compose 2 | import org.jetbrains.compose.desktop.application.dsl.TargetFormat 3 | import org.jetbrains.kotlin.gradle.tasks.KotlinCompile 4 | 5 | plugins { 6 | kotlin("jvm") version "1.5.31" 7 | id("org.jetbrains.compose") version "1.0.0" 8 | } 9 | 10 | group = "com.itheamc" 11 | version = "1.0" 12 | 13 | repositories { 14 | google() 15 | mavenCentral() 16 | maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") 17 | } 18 | 19 | dependencies { 20 | implementation(compose.desktop.currentOs) 21 | implementation(compose.materialIconsExtended) 22 | } 23 | 24 | tasks.withType { 25 | kotlinOptions.jvmTarget = "11" 26 | } 27 | 28 | compose.desktop { 29 | application { 30 | mainClass = "MainKt" 31 | nativeDistributions { 32 | targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb) 33 | packageName = "CustomNavigation" 34 | packageVersion = "1.0.0" 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | kotlin.code.style=official 2 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/itheamc/navigation-for-compose-for-desktop/62e6bdb7fc2147d862e68f687f546386a29ff84a/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.1-bin.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | ## 21 | ## Gradle start up script for UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MSYS* | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | 86 | # Determine the Java command to use to start the JVM. 87 | if [ -n "$JAVA_HOME" ] ; then 88 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 89 | # IBM's JDK on AIX uses strange locations for the executables 90 | JAVACMD="$JAVA_HOME/jre/sh/java" 91 | else 92 | JAVACMD="$JAVA_HOME/bin/java" 93 | fi 94 | if [ ! -x "$JAVACMD" ] ; then 95 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 96 | 97 | Please set the JAVA_HOME variable in your environment to match the 98 | location of your Java installation." 99 | fi 100 | else 101 | JAVACMD="java" 102 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 103 | 104 | Please set the JAVA_HOME variable in your environment to match the 105 | location of your Java installation." 106 | fi 107 | 108 | # Increase the maximum file descriptors if we can. 109 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 110 | MAX_FD_LIMIT=`ulimit -H -n` 111 | if [ $? -eq 0 ] ; then 112 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 113 | MAX_FD="$MAX_FD_LIMIT" 114 | fi 115 | ulimit -n $MAX_FD 116 | if [ $? -ne 0 ] ; then 117 | warn "Could not set maximum file descriptor limit: $MAX_FD" 118 | fi 119 | else 120 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 121 | fi 122 | fi 123 | 124 | # For Darwin, add options to specify how the application appears in the dock 125 | if $darwin; then 126 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 127 | fi 128 | 129 | # For Cygwin or MSYS, switch paths to Windows format before running java 130 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then 131 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 132 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 133 | 134 | JAVACMD=`cygpath --unix "$JAVACMD"` 135 | 136 | # We build the pattern for arguments to be converted via cygpath 137 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 138 | SEP="" 139 | for dir in $ROOTDIRSRAW ; do 140 | ROOTDIRS="$ROOTDIRS$SEP$dir" 141 | SEP="|" 142 | done 143 | OURCYGPATTERN="(^($ROOTDIRS))" 144 | # Add a user-defined pattern to the cygpath arguments 145 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 146 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 147 | fi 148 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 149 | i=0 150 | for arg in "$@" ; do 151 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 152 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 153 | 154 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 155 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 156 | else 157 | eval `echo args$i`="\"$arg\"" 158 | fi 159 | i=`expr $i + 1` 160 | done 161 | case $i in 162 | 0) set -- ;; 163 | 1) set -- "$args0" ;; 164 | 2) set -- "$args0" "$args1" ;; 165 | 3) set -- "$args0" "$args1" "$args2" ;; 166 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;; 167 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 168 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 169 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 170 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 171 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 172 | esac 173 | fi 174 | 175 | # Escape application args 176 | save () { 177 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 178 | echo " " 179 | } 180 | APP_ARGS=`save "$@"` 181 | 182 | # Collect all arguments for the java command, following the shell quoting and substitution rules 183 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 184 | 185 | exec "$JAVACMD" "$@" 186 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /settings.gradle.kts: -------------------------------------------------------------------------------- 1 | pluginManagement { 2 | repositories { 3 | google() 4 | gradlePluginPortal() 5 | maven("https://maven.pkg.jetbrains.space/public/p/compose/dev") 6 | } 7 | 8 | } 9 | rootProject.name = "CustomNavigation" 10 | 11 | -------------------------------------------------------------------------------- /src/main/kotlin/Main.kt: -------------------------------------------------------------------------------- 1 | // Copyright 2000-2021 JetBrains s.r.o. and contributors. Use of this source code is governed by the Apache 2.0 license that can be found in the LICENSE file. 2 | import androidx.compose.desktop.DesktopMaterialTheme 3 | import androidx.compose.desktop.ui.tooling.preview.Preview 4 | import androidx.compose.foundation.background 5 | import androidx.compose.foundation.layout.Box 6 | import androidx.compose.foundation.layout.fillMaxHeight 7 | import androidx.compose.foundation.layout.fillMaxSize 8 | import androidx.compose.foundation.layout.width 9 | import androidx.compose.material.* 10 | import androidx.compose.material.icons.Icons 11 | import androidx.compose.material.icons.filled.Home 12 | import androidx.compose.material.icons.filled.Notifications 13 | import androidx.compose.material.icons.filled.Settings 14 | import androidx.compose.material.icons.filled.VerifiedUser 15 | import androidx.compose.runtime.Composable 16 | import androidx.compose.runtime.getValue 17 | import androidx.compose.runtime.mutableStateOf 18 | import androidx.compose.runtime.remember 19 | import androidx.compose.runtime.setValue 20 | import androidx.compose.ui.Alignment 21 | import androidx.compose.ui.Modifier 22 | import androidx.compose.ui.graphics.vector.ImageVector 23 | import androidx.compose.ui.window.Window 24 | import androidx.compose.ui.window.application 25 | import navcontroller.NavController 26 | import navcontroller.NavigationHost 27 | import navcontroller.composable 28 | import navcontroller.rememberNavController 29 | import screens.HomeScreen 30 | import screens.NotificationScreen 31 | import screens.ProfileScreen 32 | import screens.SettingScreen 33 | 34 | @Composable 35 | @Preview 36 | fun App() { 37 | 38 | val screens = Screen.values().toList() 39 | val navController by rememberNavController(Screen.HomeScreen.name) 40 | val currentScreen by remember { 41 | navController.currentScreen 42 | } 43 | 44 | MaterialTheme { 45 | Surface( 46 | modifier = Modifier.background(color = MaterialTheme.colors.background) 47 | ) { 48 | Box( 49 | modifier = Modifier.fillMaxSize() 50 | ) { 51 | NavigationRail( 52 | modifier = Modifier.align(Alignment.CenterStart).fillMaxHeight() 53 | ) { 54 | screens.forEach { 55 | NavigationRailItem( 56 | selected = currentScreen == it.name, 57 | icon = { 58 | Icon( 59 | imageVector = it.icon, 60 | contentDescription = it.label 61 | ) 62 | }, 63 | label = { 64 | Text(it.label) 65 | }, 66 | alwaysShowLabel = false, 67 | onClick = { 68 | navController.navigate(it.name) 69 | } 70 | ) 71 | } 72 | } 73 | 74 | Box( 75 | modifier = Modifier.fillMaxHeight() 76 | ) { 77 | CustomNavigationHost(navController = navController) 78 | } 79 | } 80 | } 81 | } 82 | } 83 | 84 | fun main() = application { 85 | Window(onCloseRequest = ::exitApplication) { 86 | App() 87 | } 88 | } 89 | 90 | 91 | /** 92 | * Screens 93 | */ 94 | enum class Screen( 95 | val label: String, 96 | val icon: ImageVector 97 | ) { 98 | HomeScreen( 99 | label = "Home", 100 | icon = Icons.Filled.Home 101 | ), 102 | NotificationsScreen( 103 | label = "Notifications", 104 | icon = Icons.Filled.Notifications 105 | ), 106 | SettingsScreen( 107 | label = "Settings", 108 | icon = Icons.Filled.Settings 109 | ), 110 | ProfileScreens( 111 | label = "User Profile", 112 | icon = Icons.Filled.VerifiedUser 113 | ) 114 | } 115 | 116 | 117 | @Composable 118 | fun CustomNavigationHost( 119 | navController: NavController 120 | ) { 121 | NavigationHost(navController) { 122 | composable(Screen.HomeScreen.name) { 123 | HomeScreen(navController) 124 | } 125 | 126 | composable(Screen.NotificationsScreen.name) { 127 | NotificationScreen(navController) 128 | } 129 | 130 | composable(Screen.SettingsScreen.name) { 131 | SettingScreen(navController) 132 | } 133 | 134 | composable(Screen.ProfileScreens.name) { 135 | ProfileScreen(navController) 136 | } 137 | 138 | }.build() 139 | } -------------------------------------------------------------------------------- /src/main/kotlin/navcontroller/NavController.kt: -------------------------------------------------------------------------------- 1 | package navcontroller 2 | 3 | import androidx.compose.runtime.Composable 4 | import androidx.compose.runtime.MutableState 5 | import androidx.compose.runtime.mutableStateOf 6 | import androidx.compose.runtime.remember 7 | import androidx.compose.runtime.saveable.rememberSaveable 8 | 9 | /** 10 | * NavController Class 11 | */ 12 | class NavController( 13 | private val startDestination: String, 14 | private var backStackScreens: MutableSet = mutableSetOf() 15 | ) { 16 | // Variable to store the state of the current screen 17 | var currentScreen: MutableState = mutableStateOf(startDestination) 18 | 19 | // Function to handle the navigation between the screen 20 | fun navigate(route: String) { 21 | if (route != currentScreen.value) { 22 | if (backStackScreens.contains(currentScreen.value) && currentScreen.value != startDestination) { 23 | backStackScreens.remove(currentScreen.value) 24 | } 25 | 26 | if (route == startDestination) { 27 | backStackScreens = mutableSetOf() 28 | } else { 29 | backStackScreens.add(currentScreen.value) 30 | } 31 | 32 | currentScreen.value = route 33 | } 34 | } 35 | 36 | // Function to handle the back 37 | fun navigateBack() { 38 | if (backStackScreens.isNotEmpty()) { 39 | currentScreen.value = backStackScreens.last() 40 | backStackScreens.remove(currentScreen.value) 41 | } 42 | } 43 | } 44 | 45 | 46 | /** 47 | * Composable to remember the state of the navcontroller 48 | */ 49 | @Composable 50 | fun rememberNavController( 51 | startDestination: String, 52 | backStackScreens: MutableSet = mutableSetOf() 53 | ): MutableState = rememberSaveable { 54 | mutableStateOf(NavController(startDestination, backStackScreens)) 55 | } 56 | 57 | -------------------------------------------------------------------------------- /src/main/kotlin/navcontroller/NavigationHost.kt: -------------------------------------------------------------------------------- 1 | package navcontroller 2 | 3 | import androidx.compose.runtime.Composable 4 | 5 | /** 6 | * NavigationHost class 7 | */ 8 | class NavigationHost( 9 | val navController: NavController, 10 | val contents: @Composable NavigationGraphBuilder.() -> Unit 11 | ) { 12 | 13 | @Composable 14 | fun build() { 15 | NavigationGraphBuilder().renderContents() 16 | } 17 | 18 | inner class NavigationGraphBuilder( 19 | val navController: NavController = this@NavigationHost.navController 20 | ) { 21 | @Composable 22 | fun renderContents() { 23 | this@NavigationHost.contents(this) 24 | } 25 | } 26 | } 27 | 28 | 29 | /** 30 | * Composable to build the Navigation Host 31 | */ 32 | @Composable 33 | fun NavigationHost.NavigationGraphBuilder.composable( 34 | route: String, 35 | content: @Composable () -> Unit 36 | ) { 37 | if (navController.currentScreen.value == route) { 38 | content() 39 | } 40 | 41 | } -------------------------------------------------------------------------------- /src/main/kotlin/screens/HomeScreen.kt: -------------------------------------------------------------------------------- 1 | package screens 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxSize 6 | import androidx.compose.material.Button 7 | import androidx.compose.material.Text 8 | import androidx.compose.runtime.Composable 9 | import androidx.compose.ui.Alignment 10 | import androidx.compose.ui.Modifier 11 | import navcontroller.NavController 12 | 13 | @Composable 14 | fun HomeScreen( 15 | navController: NavController 16 | ) { 17 | Column( 18 | modifier = Modifier.fillMaxSize(), 19 | verticalArrangement = Arrangement.Center, 20 | horizontalAlignment = Alignment.CenterHorizontally 21 | ) { 22 | Text(navController.currentScreen.value) 23 | Button( 24 | onClick = { 25 | navController.navigate(Screen.ProfileScreens.name) 26 | }) { 27 | Text("Navigate to Profile") 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /src/main/kotlin/screens/NotificationScreen.kt: -------------------------------------------------------------------------------- 1 | package screens 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxSize 6 | import androidx.compose.material.Text 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.ui.Alignment 9 | import androidx.compose.ui.Modifier 10 | import navcontroller.NavController 11 | 12 | @Composable 13 | fun NotificationScreen( 14 | navController: NavController 15 | ) { 16 | Column( 17 | modifier = Modifier.fillMaxSize(), 18 | verticalArrangement = Arrangement.Center, 19 | horizontalAlignment = Alignment.CenterHorizontally 20 | ) { 21 | Text(navController.currentScreen.value) 22 | } 23 | } -------------------------------------------------------------------------------- /src/main/kotlin/screens/ProfileScreen.kt: -------------------------------------------------------------------------------- 1 | package screens 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxSize 6 | import androidx.compose.material.Button 7 | import androidx.compose.material.Text 8 | import androidx.compose.runtime.Composable 9 | import androidx.compose.ui.Alignment 10 | import androidx.compose.ui.Modifier 11 | import navcontroller.NavController 12 | 13 | @Composable 14 | fun ProfileScreen( 15 | navController: NavController 16 | ) { 17 | Column( 18 | modifier = Modifier.fillMaxSize(), 19 | verticalArrangement = Arrangement.Center, 20 | horizontalAlignment = Alignment.CenterHorizontally 21 | ) { 22 | Text(navController.currentScreen.value) 23 | Button( 24 | onClick = { 25 | navController.navigate(Screen.NotificationsScreen.name) 26 | }) { 27 | Text("Navigate to Notification") 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /src/main/kotlin/screens/SettingScreen.kt: -------------------------------------------------------------------------------- 1 | package screens 2 | 3 | import androidx.compose.foundation.layout.Arrangement 4 | import androidx.compose.foundation.layout.Column 5 | import androidx.compose.foundation.layout.fillMaxSize 6 | import androidx.compose.material.Text 7 | import androidx.compose.runtime.Composable 8 | import androidx.compose.ui.Alignment 9 | import androidx.compose.ui.Modifier 10 | import navcontroller.NavController 11 | 12 | @Composable 13 | fun SettingScreen( 14 | navController: NavController 15 | ) { 16 | Column( 17 | modifier = Modifier.fillMaxSize(), 18 | verticalArrangement = Arrangement.Center, 19 | horizontalAlignment = Alignment.CenterHorizontally 20 | ) { 21 | Text(navController.currentScreen.value) 22 | } 23 | } --------------------------------------------------------------------------------