Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat #98] :: 바텀네비게이션 수정 #99

Merged
merged 1 commit into from
Jan 4, 2025
Merged

[feat #98] :: 바텀네비게이션 수정 #99

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 60 additions & 57 deletions composeApp/src/commonMain/kotlin/team/aliens/dms/kmp/ui/BottomNavigationBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@ package team.aliens.dms.kmp.ui
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.NavigationBarItemColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.currentBackStackEntryAsState
Expand All @@ -33,64 +34,66 @@ fun BottomNavigationBar(
navController: NavController = rememberNavController(),
) {
val selectedRoute = navController.currentBackStackEntryAsState().value?.destination?.route
BottomAppBar(
modifier = Modifier
.fillMaxHeight(0.08f)
.graphicsLayer {
clip = true
shape = RoundedCornerShape(
topStart = 24.dp,
topEnd = 24.dp,

Column {
HorizontalDivider(
modifier = Modifier.fillMaxWidth(),
thickness = 1.dp,
color = DmsTheme.colors.surface,
)
BottomAppBar(
modifier = Modifier
.fillMaxHeight(0.08f),
contentColor = DmsTheme.colors.background,
containerColor = DmsTheme.colors.background,
) {
bottomMenus.forEach {
val selected = selectedRoute == it.route
val color by animateColorAsState(
targetValue = if (selected) {
DmsTheme.colors.inversePrimary
} else {
DmsTheme.colors.inverseSurface
},
)
shadowElevation = 20f
},
contentColor = DmsTheme.colors.onBackground,
containerColor = DmsTheme.colors.onBackground,
) {
bottomMenus.forEach {
val selected = selectedRoute == it.route
val color by animateColorAsState(
targetValue = if (selected) {
DmsTheme.colors.onBackground
} else {
DmsTheme.colors.inverseSurface
},
)

NavigationBarItem(
selected = selected,
onClick = {
if (!selected) {
navController.navigate(it.route) {
launchSingleTop = true
restoreState = true
NavigationBarItem(
selected = selected,
onClick = {
if (!selected) {
navController.navigate(it.route) {
launchSingleTop = true
restoreState = true
}
}
},
icon = {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
) {
Icon(
painter = painterResource(resource = if (selected) it.selectedIcon else it.icon),
contentDescription = it.route,
tint = color,
)
DmsText(
text = it.title,
style = DmsTypography.Body3,
color = color,
)
}
}
},
icon = {
Column {
Icon(
painter = painterResource(resource = if (selected) it.selectedIcon else it.icon),
contentDescription = it.route,
tint = color,
)
DmsText(
text = it.title,
style = DmsTypography.Button4,
color = color,
)
}
},
colors = NavigationBarItemColors(
selectedIconColor = DmsTheme.colors.onBackground,
selectedTextColor = DmsTheme.colors.onBackground,
selectedIndicatorColor = DmsTheme.colors.onBackground,
unselectedIconColor = DmsTheme.colors.inverseSurface,
unselectedTextColor = DmsTheme.colors.inverseSurface,
disabledIconColor = DmsTheme.colors.inverseSurface,
disabledTextColor = DmsTheme.colors.inverseSurface,
),
)
},
colors = NavigationBarItemColors(
selectedIconColor = DmsTheme.colors.inversePrimary,
selectedTextColor = DmsTheme.colors.inversePrimary,
selectedIndicatorColor = DmsTheme.colors.background,
unselectedIconColor = DmsTheme.colors.inverseSurface,
unselectedTextColor = DmsTheme.colors.inverseSurface,
disabledIconColor = DmsTheme.colors.inverseSurface,
disabledTextColor = DmsTheme.colors.inverseSurface,
),
)
}
}
}
}
Loading