Extracted NavigationMenuItem

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/appskeleton/SideMenu.kt

@@ -32,6 +32,11 @@ private val HeaderBackground = Brush.linearGradient(
     )
 )
 
+private val ItemHeight = 48.dp
+
+private val itemModifier = Modifier.height(ItemHeight).widthIn(min = 300.dp).padding(start = 8.dp)
+
+
 @Composable
 fun SideMenu(appContent: @Composable () -> Unit) {
     val drawerState = uiState.drawerState.collectAsState().value
@@ -59,11 +64,11 @@ fun SideMenu(appContent: @Composable () -> Unit) {
                 Divider(color = Colors.DrawerDivider)
 
                 Column(Modifier.padding(horizontal = 16.dp, vertical = 24.dp)) {
-                    Column(Modifier.height(40.dp), verticalArrangement = Arrangement.Center) {
+                    Column(Modifier.height(ItemHeight), verticalArrangement = Arrangement.Center) {
                         Text("Konten", color = Colors.DrawerPrimaryText)
                     }
 
-                    BanksList(textColor = Colors.DrawerPrimaryText) { userAccount, bankAccount ->
+                    BanksList(textColor = Colors.DrawerPrimaryText, itemModifier = itemModifier) { userAccount, bankAccount ->
                         uiState.accountFilter.value = if (userAccount == null) {
                             emptyList()
                         } else {

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/BanksList.kt

@@ -1,11 +1,8 @@
 package net.codinux.banking.ui.composables
 
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
-import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
@@ -18,7 +15,7 @@ import net.codinux.banking.ui.config.DI
 
 private val uiState = DI.uiState
 
-private val IconTextSpacing = 36.dp
+private val IconTextSpacing = 24.dp
 
 @Composable
 fun BanksList(
@@ -30,40 +27,22 @@ fun BanksList(
 ) {
     val userAccounts = uiState.userAccounts.collectAsState()
 
-    Column(modifier) {
-        Row(
-            itemModifier.clickable {
-                accountSelected?.invoke(null, null)
-            },
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            BankIcon(null as? String?, Modifier.padding(end = IconTextSpacing), Modifier.size(iconSize), fallbackIcon = Res.drawable.account)
 
-            Text("Alle Konten", color = textColor)
+    Column(modifier) {
+        NavigationMenuItem(itemModifier, "Alle Konten", textColor, iconSize, IconTextSpacing, fallbackIcon = Res.drawable.account) {
+            accountSelected?.invoke(null, null)
         }
 
-        userAccounts.value.forEach { userAccount ->
+        userAccounts.value.sortedBy { it.displayIndex }.forEach { userAccount ->
             Spacer(Modifier.fillMaxWidth().height(12.dp))
 
-            Row(
+            NavigationMenuItem(itemModifier, userAccount.bankName, textColor, iconSize, IconTextSpacing, userAccount, fallbackIcon = Res.drawable.account) {
-                itemModifier.clickable {
+                accountSelected?.invoke(userAccount, null)
-                    accountSelected?.invoke(userAccount, null)
-               },
-                verticalAlignment = Alignment.CenterVertically
-            ) {
-                BankIcon(userAccount, Modifier.padding(end = IconTextSpacing), Modifier.size(iconSize), fallbackIcon = Res.drawable.account)
-
-                Text(userAccount.bankName, color = textColor)
             }
 
             userAccount.accounts.sortedBy { it.displayIndex }.forEach { account ->
-                Column(
+                NavigationMenuItem(itemModifier, account.productName ?: account.identifier, textColor, iconSize, IconTextSpacing) {
-                    itemModifier.clickable {
+                    accountSelected?.invoke(userAccount, account)
-                        accountSelected?.invoke(userAccount, account)
-                    }.padding(start = iconSize + IconTextSpacing),
-                    verticalArrangement = Arrangement.Center
-                ) {
-                    Text(account.productName ?: account.identifier, color = textColor)
                 }
             }
         }

composeApp/src/commonMain/kotlin/net/codinux/banking/ui/composables/NavigationMenuItem.kt

@@ -0,0 +1,36 @@
+package net.codinux.banking.ui.composables
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import net.codinux.banking.client.model.UserAccount
+import org.jetbrains.compose.resources.DrawableResource
+
+@Composable
+fun NavigationMenuItem(
+    modifier: Modifier = Modifier,
+    text: String,
+    textColor: Color = Color.White,
+    iconSize: Dp = 24.dp,
+    iconTextSpacing: Dp = 24.dp,
+    userAccount: UserAccount? = null,
+    fallbackIcon: DrawableResource? = null,
+    onClick: (() -> Unit)? = null
+) {
+    Row(
+        modifier.clickable { onClick?.invoke() },
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        BankIcon(userAccount, Modifier.padding(end = iconTextSpacing), Modifier.size(iconSize), fallbackIcon = fallbackIcon)
+
+        Text(text, color = textColor)
+    }
+}