Skip to content

Commit 5b2c17f

Browse files
nsh07nsh07
committed
feat: Add a basic UI
1 parent de91636 commit 5b2c17f

File tree

12 files changed

+224
-40
lines changed

12 files changed

+224
-40
lines changed

‎composeApp/build.gradle.kts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ kotlin {
3333
commonMain.dependencies {
3434
implementation(compose.runtime)
3535
implementation(compose.foundation)
36-
implementation(compose.material3)
36+
implementation("org.jetbrains.compose.material3:material3:1.9.0-beta03")
3737
implementation(compose.ui)
3838
implementation(compose.components.resources)
3939
implementation(compose.components.uiToolingPreview)

‎composeApp/src/wasmJsMain/composeResources/drawable/filled_home.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="960"
5+
android:viewportHeight="960">
6+
<path
7+
android:fillColor="#e3e3e3"
8+
android:pathData="M160,760v-360q0,-19 8.5,-36t23.5,-28l240,-180q21,-16 48,-16t48,16l240,180q15,11 23.5,28t8.5,36v360q0,33 -23.5,56.5T720,840L600,840q-17,0 -28.5,-11.5T560,800v-200q0,-17 -11.5,-28.5T520,560h-80q-17,0 -28.5,11.5T400,600v200q0,17 -11.5,28.5T360,840L240,840q-33,0 -56.5,-23.5T160,760Z" />
9+
</vector>

‎composeApp/src/wasmJsMain/composeResources/drawable/filled_info.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="960"
5+
android:viewportHeight="960">
6+
<path
7+
android:fillColor="#e3e3e3"
8+
android:pathData="M480,680q17,0 28.5,-11.5T520,640v-160q0,-17 -11.5,-28.5T480,440q-17,0 -28.5,11.5T440,480v160q0,17 11.5,28.5T480,680ZM480,360q17,0 28.5,-11.5T520,320q0,-17 -11.5,-28.5T480,280q-17,0 -28.5,11.5T440,320q0,17 11.5,28.5T480,360ZM480,880q-83,0 -156,-31.5T197,763q-54,-54 -85.5,-127T80,480q0,-83 31.5,-156T197,197q54,-54 127,-85.5T480,80q83,0 156,31.5T763,197q54,54 85.5,127T880,480q0,83 -31.5,156T763,763q-54,54 -127,85.5T480,880Z" />
9+
</vector>

‎composeApp/src/wasmJsMain/composeResources/drawable/outline_home.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="960"
5+
android:viewportHeight="960">
6+
<path
7+
android:fillColor="#e3e3e3"
8+
android:pathData="M240,760h120v-200q0,-17 11.5,-28.5T400,520h160q17,0 28.5,11.5T600,560v200h120v-360L480,220 240,400v360ZM160,760v-360q0,-19 8.5,-36t23.5,-28l240,-180q21,-16 48,-16t48,16l240,180q15,11 23.5,28t8.5,36v360q0,33 -23.5,56.5T720,840L560,840q-17,0 -28.5,-11.5T520,800v-200h-80v200q0,17 -11.5,28.5T400,840L240,840q-33,0 -56.5,-23.5T160,760ZM480,490Z" />
9+
</vector>

‎composeApp/src/wasmJsMain/composeResources/drawable/outline_info.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="24dp"
3+
android:height="24dp"
4+
android:viewportWidth="960"
5+
android:viewportHeight="960">
6+
<path
7+
android:fillColor="#e3e3e3"
8+
android:pathData="M480,680q17,0 28.5,-11.5T520,640v-160q0,-17 -11.5,-28.5T480,440q-17,0 -28.5,11.5T440,480v160q0,17 11.5,28.5T480,680ZM480,360q17,0 28.5,-11.5T520,320q0,-17 -11.5,-28.5T480,280q-17,0 -28.5,11.5T440,320q0,17 11.5,28.5T480,360ZM480,880q-83,0 -156,-31.5T197,763q-54,-54 -85.5,-127T80,480q0,-83 31.5,-156T197,197q54,-54 127,-85.5T480,80q83,0 156,31.5T763,197q54,54 85.5,127T880,480q0,83 -31.5,156T763,763q-54,54 -127,85.5T480,880ZM480,800q134,0 227,-93t93,-227q0,-134 -93,-227t-227,-93q-134,0 -227,93t-93,227q0,134 93,227t227,93ZM480,480Z" />
9+
</vector>

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/App.kt‎

Lines changed: 4 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,17 @@
11
package org.nsh07.nsh07
22

3-
import androidx.compose.foundation.layout.Arrangement
4-
import androidx.compose.foundation.layout.Box
5-
import androidx.compose.foundation.layout.Spacer
6-
import androidx.compose.foundation.layout.fillMaxHeight
73
import androidx.compose.foundation.layout.fillMaxSize
8-
import androidx.compose.foundation.layout.height
9-
import androidx.compose.foundation.lazy.LazyColumn
10-
import androidx.compose.material3.CircularWavyProgressIndicator
11-
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
12-
import androidx.compose.material3.Scaffold
13-
import androidx.compose.material3.Text
4+
import androidx.compose.material3.Surface
145
import androidx.compose.runtime.Composable
15-
import androidx.compose.ui.Alignment
166
import androidx.compose.ui.Modifier
17-
import androidx.compose.ui.text.style.TextAlign
18-
import androidx.compose.ui.unit.dp
19-
import androidx.compose.ui.unit.sp
7+
import org.nsh07.nsh07.ui.AppScreen
208
import org.nsh07.nsh07.ui.theme.Nsh07Theme
219

22-
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
2310
@Composable
2411
fun App() {
2512
Nsh07Theme {
26-
Scaffold {
27-
Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
28-
LazyColumn(
29-
horizontalAlignment = Alignment.CenterHorizontally,
30-
verticalArrangement = Arrangement.Center,
31-
modifier = Modifier.fillMaxHeight()
32-
) {
33-
item {
34-
CircularWavyProgressIndicator()
35-
Spacer(Modifier.height(16.dp))
36-
Text(
37-
"Coming Soon...",
38-
fontSize = 64.sp,
39-
textAlign = TextAlign.Center,
40-
lineHeight = 68.sp
41-
)
42-
}
43-
}
44-
}
13+
Surface {
14+
AppScreen(modifier = Modifier.fillMaxSize())
4515
}
4616
}
4717
}

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/AppScreen.kt‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
package org.nsh07.nsh07.ui
2+
3+
import androidx.compose.animation.AnimatedContent
4+
import androidx.compose.animation.Crossfade
5+
import androidx.compose.foundation.layout.Row
6+
import androidx.compose.foundation.layout.fillMaxWidth
7+
import androidx.compose.material3.Icon
8+
import androidx.compose.material3.MaterialTheme.typography
9+
import androidx.compose.material3.Text
10+
import androidx.compose.material3.WideNavigationRail
11+
import androidx.compose.material3.WideNavigationRailItem
12+
import androidx.compose.material3.WideNavigationRailState
13+
import androidx.compose.material3.WideNavigationRailValue
14+
import androidx.compose.material3.rememberWideNavigationRailState
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.Modifier
21+
import androidx.compose.ui.util.fastForEach
22+
import nsh07.composeapp.generated.resources.Res
23+
import nsh07.composeapp.generated.resources.filled_home
24+
import nsh07.composeapp.generated.resources.filled_info
25+
import nsh07.composeapp.generated.resources.outline_home
26+
import nsh07.composeapp.generated.resources.outline_info
27+
import org.jetbrains.compose.resources.painterResource
28+
import org.nsh07.nsh07.ui.about.AboutScreen
29+
import org.nsh07.nsh07.ui.home.HomeScreen
30+
31+
@Composable
32+
fun AppScreen(modifier: Modifier = Modifier) {
33+
val state: WideNavigationRailState =
34+
rememberWideNavigationRailState(WideNavigationRailValue.Expanded)
35+
36+
var currentPortfolioScreen by remember { mutableStateOf(PortfolioScreen.HOME) }
37+
38+
val railItems = remember {
39+
listOf(
40+
RailItem(
41+
"Home",
42+
Res.drawable.outline_home,
43+
Res.drawable.filled_home,
44+
PortfolioScreen.HOME
45+
),
46+
RailItem(
47+
"About me",
48+
Res.drawable.outline_info,
49+
Res.drawable.filled_info,
50+
PortfolioScreen.ABOUT
51+
),
52+
)
53+
}
54+
55+
Row(modifier.fillMaxWidth()) {
56+
WideNavigationRail(state = state) {
57+
railItems.fastForEach {
58+
val selected = it.portfolioScreen == currentPortfolioScreen
59+
WideNavigationRailItem(
60+
selected = selected,
61+
onClick = { currentPortfolioScreen = it.portfolioScreen },
62+
icon = {
63+
Crossfade(selected) { targetState ->
64+
when (targetState) {
65+
true -> Icon(painterResource(it.selectedIcon), null)
66+
else -> Icon(painterResource(it.unselectedIcon), null)
67+
}
68+
}
69+
},
70+
label = { Text(it.name, style = typography.labelLarge) },
71+
railExpanded = state.targetValue == WideNavigationRailValue.Expanded
72+
)
73+
}
74+
}
75+
76+
AnimatedContent(currentPortfolioScreen) {
77+
when (it) {
78+
PortfolioScreen.HOME -> HomeScreen()
79+
PortfolioScreen.ABOUT -> AboutScreen()
80+
PortfolioScreen.PROJECTS -> {}
81+
}
82+
}
83+
}
84+
}

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/PortfolioScreen.kt‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
package org.nsh07.nsh07.ui
2+
3+
import org.jetbrains.compose.resources.DrawableResource
4+
5+
enum class PortfolioScreen {
6+
HOME, ABOUT, PROJECTS
7+
}
8+
9+
data class RailItem(
10+
val name: String,
11+
val unselectedIcon: DrawableResource,
12+
val selectedIcon: DrawableResource,
13+
val portfolioScreen: PortfolioScreen
14+
)

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/about/AboutScreen.kt‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
package org.nsh07.nsh07.ui.about
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Box
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.Spacer
7+
import androidx.compose.foundation.layout.fillMaxHeight
8+
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.height
10+
import androidx.compose.material3.CircularProgressIndicator
11+
import androidx.compose.material3.MaterialTheme.colorScheme
12+
import androidx.compose.material3.Scaffold
13+
import androidx.compose.material3.Text
14+
import androidx.compose.runtime.Composable
15+
import androidx.compose.ui.Alignment
16+
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.text.style.TextAlign
18+
import androidx.compose.ui.unit.dp
19+
import androidx.compose.ui.unit.sp
20+
21+
@Composable
22+
fun AboutScreen(modifier: Modifier = Modifier) {
23+
Scaffold(modifier.fillMaxSize()) {
24+
Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
25+
Column(
26+
horizontalAlignment = Alignment.CenterHorizontally,
27+
verticalArrangement = Arrangement.Center,
28+
modifier = Modifier.fillMaxHeight()
29+
) {
30+
CircularProgressIndicator(trackColor = colorScheme.secondaryContainer)
31+
Spacer(Modifier.height(16.dp))
32+
Text(
33+
"Coming Soon...",
34+
fontSize = 64.sp,
35+
textAlign = TextAlign.Center,
36+
lineHeight = 68.sp
37+
)
38+
}
39+
}
40+
}
41+
}

‎composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/home/HomeScreen.kt‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
package org.nsh07.nsh07.ui.home
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Box
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.Spacer
7+
import androidx.compose.foundation.layout.fillMaxHeight
8+
import androidx.compose.foundation.layout.fillMaxSize
9+
import androidx.compose.foundation.layout.height
10+
import androidx.compose.material3.CircularProgressIndicator
11+
import androidx.compose.material3.MaterialTheme.colorScheme
12+
import androidx.compose.material3.Scaffold
13+
import androidx.compose.material3.Text
14+
import androidx.compose.runtime.Composable
15+
import androidx.compose.ui.Alignment
16+
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.text.style.TextAlign
18+
import androidx.compose.ui.unit.dp
19+
import androidx.compose.ui.unit.sp
20+
21+
@Composable
22+
fun HomeScreen(modifier: Modifier = Modifier) {
23+
Scaffold(modifier.fillMaxSize()) {
24+
Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
25+
Column(
26+
horizontalAlignment = Alignment.CenterHorizontally,
27+
verticalArrangement = Arrangement.Center,
28+
modifier = Modifier.fillMaxHeight()
29+
) {
30+
CircularProgressIndicator(trackColor = colorScheme.secondaryContainer)
31+
Spacer(Modifier.height(16.dp))
32+
Text(
33+
"Coming Soon...",
34+
fontSize = 64.sp,
35+
textAlign = TextAlign.Center,
36+
lineHeight = 68.sp
37+
)
38+
}
39+
}
40+
}
41+
}

0 commit comments

Comments
 (0)