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.

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: Add a custom NavigationSuiteScaffold #17

Merged
merged 3 commits into from
Aug 14, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -18,26 +18,18 @@

package com.infomaniak.swisstransfer.ui.screen.main

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.material3.adaptive.WindowAdaptiveInfo
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteDefaults
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffoldDefaults
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
import androidx.compose.material3.adaptive.navigationsuite.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.NavHostController
import com.infomaniak.swisstransfer.ui.navigation.MainNavigation
import com.infomaniak.swisstransfer.ui.navigation.NavigationItem
import com.infomaniak.swisstransfer.ui.theme.LocalCustomTypography
import com.infomaniak.swisstransfer.ui.screen.main.components.AppNavigationSuiteScaffold
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
import com.infomaniak.swisstransfer.ui.theme.Typography
import com.infomaniak.swisstransfer.ui.utils.PreviewMobile
import com.infomaniak.swisstransfer.ui.utils.PreviewTablet

Expand Down Expand Up @@ -65,50 +57,17 @@ private fun MainScaffold(
navigateToSelectedItem: (MainNavigation) -> Unit,
content: @Composable () -> Unit,
) {
val isNavigationBar = navType == NavigationSuiteType.NavigationBar

NavigationSuiteScaffold(
navigationSuiteItems = {
NavigationItem.entries.forEach { navigationItem ->
item(
icon = { NavigationIcon(isNavigationBar, navigationItem) },
label = { NavigationLabel(isNavigationBar, navigationItem) },
selected = currentDestination == navigationItem.destination,
onClick = { navigateToSelectedItem(navigationItem.destination) }
)
}
},
navigationSuiteColors = NavigationSuiteDefaults.colors(
navigationBarContainerColor = SwissTransferTheme.colors.navigationItemBackground,
navigationRailContainerColor = SwissTransferTheme.colors.navigationItemBackground,
navigationDrawerContainerColor = SwissTransferTheme.colors.navigationItemBackground,
),
layoutType = navType,
content = {
if (navType == NavigationSuiteType.None) {
content()
} else {
Column {
Box(modifier = Modifier.weight(1f)) {
content()
}
HorizontalDivider(color = SwissTransferTheme.colors.divider)
AppNavigationSuiteScaffold(navType, currentDestination, navigateToSelectedItem) {
if (navType == NavigationSuiteType.None) {
content()
} else {
Column {
Box(modifier = Modifier.weight(1f)) {
content()
}
HorizontalDivider(color = SwissTransferTheme.colors.divider)
}
},
)
}

@Composable
private fun NavigationIcon(isNavigationBar: Boolean, navigationItem: NavigationItem) {
val contentDescription = if (isNavigationBar) null else stringResource(navigationItem.label)
Icon(navigationItem.icon, contentDescription)
}

@Composable
private fun NavigationLabel(isNavigationBar: Boolean, navigationItem: NavigationItem) {
if (isNavigationBar) {
Text(stringResource(navigationItem.label))
}
}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
/*
* Infomaniak SwissTransfer - Android
* Copyright (C) 2024 Infomaniak Network SA
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

package com.infomaniak.swisstransfer.ui.screen.main.components

import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material3.*
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffoldLayout
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import com.infomaniak.swisstransfer.ui.navigation.MainNavigation
import com.infomaniak.swisstransfer.ui.navigation.NavigationItem
import com.infomaniak.swisstransfer.ui.theme.Margin
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme

@Composable
fun AppNavigationSuiteScaffold(
navType: NavigationSuiteType,
currentDestination: MainNavigation,
navigateToSelectedItem: (MainNavigation) -> Unit,
content: @Composable () -> Unit,
) {
val isNavigationBar = navType == NavigationSuiteType.NavigationBar
sirambd marked this conversation as resolved.
Show resolved Hide resolved

Surface(color = SwissTransferTheme.materialColors.background) {
NavigationSuiteScaffoldLayout(
navigationSuite = {
if (isNavigationBar) {
AppNavigationBar(currentDestination, navigateToSelectedItem)
} else {
AppNavigationRail(currentDestination, navigateToSelectedItem)
}
},
layoutType = navType,
) {
Box(
Modifier.consumeWindowInsets(
when (navType) {
NavigationSuiteType.NavigationBar ->
NavigationBarDefaults.windowInsets.only(WindowInsetsSides.Bottom)
NavigationSuiteType.NavigationRail ->
NavigationRailDefaults.windowInsets.only(WindowInsetsSides.Start)
else -> WindowInsets(0, 0, 0, 0)
}
)
) {
content()
}
}
}
}

@Composable
private fun AppNavigationBar(currentDestination: MainNavigation, navigateToSelectedItem: (MainNavigation) -> Unit) {
NavigationBar(containerColor = SwissTransferTheme.colors.navigationItemBackground) {
com.infomaniak.swisstransfer.ui.navigation.NavigationItem.entries.forEach { navigationItem ->
sirambd marked this conversation as resolved.
Show resolved Hide resolved
NavigationBarItem(
icon = { NavigationIcon(true, navigationItem) },
label = { NavigationLabel(navigationItem) },
selected = currentDestination == navigationItem.destination,
onClick = { navigateToSelectedItem(navigationItem.destination) },
)
}
}
}

@Composable
private fun AppNavigationRail(currentDestination: MainNavigation, navigateToSelectedItem: (MainNavigation) -> Unit) {
NavigationRail(
header = {
FloatingActionButton(onClick = {}, modifier = Modifier.padding(bottom = Margin.Large)) {
Icon(Icons.Default.Add, contentDescription = null)
}
},
containerColor = SwissTransferTheme.colors.navigationItemBackground
) {
com.infomaniak.swisstransfer.ui.navigation.NavigationItem.entries.forEach { navigationItem ->
sirambd marked this conversation as resolved.
Show resolved Hide resolved
NavigationRailItem(
icon = { NavigationIcon(false, navigationItem) },
label = {},
selected = currentDestination == navigationItem.destination,
onClick = { navigateToSelectedItem(navigationItem.destination) },
)
}
}
}

@Composable
private fun NavigationIcon(isNavigationBar: Boolean, navigationItem: NavigationItem) {
val contentDescription = if (isNavigationBar) null else stringResource(navigationItem.label)
Icon(navigationItem.icon, contentDescription)
}

@Composable
private fun NavigationLabel(navigationItem: NavigationItem) {
Text(stringResource(navigationItem.label))
}
Loading