Add the NavigationBar and NavigationBarItem composables and test them in the demo

The corresponding commit: huanshankeji/compose-html-material@414a42d

Author: ShreckYe

compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/ext/NavigationBar.androidxCommon.kt

@@ -0,0 +1,39 @@
+package com.huanshankeji.compose.material3.ext
+
+import androidx.compose.material3.NavigationBarItem
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.foundation.layout.PlatformRowScope
+import com.huanshankeji.compose.toContentWithoutModifier
+import com.huanshankeji.compose.ui.Modifier
+
+@Composable
+actual fun NavigationBar(
+    modifier: Modifier,
+    content: @Composable NavigationBarScope.() -> Unit
+) =
+    androidx.compose.material3.NavigationBar(modifier.platformModifier) {
+        NavigationBarScope(this).content()
+    }
+
+actual class NavigationBarScope(val rowScope: PlatformRowScope)
+
+@Composable
+actual fun NavigationBarScope.NavigationBarItem(
+    selected: Boolean,
+    onClick: () -> Unit,
+    selectedIcon: @Composable (Modifier) -> Unit,
+    unselectedIcon: @Composable (Modifier) -> Unit,
+    modifier: Modifier,
+    enabled: Boolean,
+    label: String?,
+    alwaysShowLabel: Boolean
+) =
+    rowScope.NavigationBarItem(
+        selected,
+        onClick,
+        (if (selected) selectedIcon else unselectedIcon).toContentWithoutModifier(),
+        modifier.platformModifier,
+        enabled,
+        label.toNullableInlineText(),
+        alwaysShowLabel
+    )

compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/NavigationBar.kt

@@ -0,0 +1,47 @@
+package com.huanshankeji.compose.material3.ext
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.material.icons.Icon
+import com.huanshankeji.compose.ui.Modifier
+
+@Composable
+expect fun NavigationBar(
+    modifier: Modifier = Modifier,
+    content: @Composable NavigationBarScope.() -> Unit
+)
+
+expect class NavigationBarScope
+
+@Composable
+expect fun NavigationBarScope.NavigationBarItem(
+    selected: Boolean,
+    onClick: () -> Unit,
+    selectedIcon: @Composable (Modifier) -> Unit,
+    unselectedIcon: @Composable (Modifier) -> Unit = selectedIcon,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    label: String? = null,
+    alwaysShowLabel: Boolean = true,
+)
+
+@Composable
+fun NavigationBarScope.NavigationBarItemWithMaterialIcons(
+    selected: Boolean,
+    onClick: () -> Unit,
+    selectedIcon: Icon,
+    unselectedIcon: Icon = selectedIcon,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    label: String? = null,
+    alwaysShowLabel: Boolean = true,
+) =
+    NavigationBarItem(
+        selected,
+        onClick,
+        selectedIcon.toContentWithModifier(),
+        unselectedIcon.toContentWithModifier(),
+        modifier,
+        enabled,
+        label,
+        alwaysShowLabel
+    )

compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/Text.kt

@@ -24,3 +24,9 @@ fun String.toTextWithModifier(): @Composable (Modifier) -> Unit =
 
 fun String?.toNullableTextWithModifier(): @Composable ((Modifier) -> Unit)? =
     this?.toTextWithModifier()
+
+fun String.toInlineText(): @Composable () -> Unit =
+    { InlineText(this) }
+
+fun String?.toNullableInlineText(): @Composable (() -> Unit)? =
+    this?.toInlineText()

compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/NavigationBar.js.kt

@@ -0,0 +1,53 @@
+package com.huanshankeji.compose.material3.ext
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.html.material3.MaterialWebLabsApi
+import com.huanshankeji.compose.html.material3.MdNavigationBar
+import com.huanshankeji.compose.html.material3.MdNavigationTab
+import com.huanshankeji.compose.html.material3.MdNavigationTabScope
+import com.huanshankeji.compose.ui.Modifier
+import com.huanshankeji.compose.ui.PlatformModifier
+import com.huanshankeji.compose.ui.toAttrs
+import com.huanshankeji.compose.ui.toCommonModifier
+import com.huanshankeji.compose.web.attributes.isFalseOrNull
+import com.huanshankeji.compose.web.attributes.isTrueOrNull
+import com.varabyte.kobweb.compose.ui.attrsModifier
+import org.jetbrains.compose.web.dom.ElementScope
+import org.w3c.dom.HTMLElement
+
+@Composable
+actual fun NavigationBar(
+    modifier: Modifier,
+    content: @Composable NavigationBarScope.() -> Unit
+) =
+    @OptIn(MaterialWebLabsApi::class)
+    MdNavigationBar(attrs = modifier.toAttrs()) {
+        NavigationBarScope(this).content()
+    }
+
+actual class NavigationBarScope(val elementScope: ElementScope<HTMLElement>)
+
+@Composable
+actual fun NavigationBarScope.NavigationBarItem(
+    selected: Boolean,
+    onClick: () -> Unit,
+    selectedIcon: @Composable (Modifier) -> Unit,
+    unselectedIcon: @Composable (Modifier) -> Unit,
+    modifier: Modifier,
+    enabled: Boolean,
+    label: String?,
+    alwaysShowLabel: Boolean
+) =
+    @OptIn(MaterialWebLabsApi::class)
+    MdNavigationTab(
+        enabled.isFalseOrNull(),
+        selected.isTrueOrNull(),
+        alwaysShowLabel.isFalseOrNull(),
+        label,
+        attrs = modifier.toAttrs()
+    ) {
+        selectedIcon(PlatformModifier.attrsModifier { slot(MdNavigationTabScope.Slot.ActiveIcon) }.toCommonModifier())
+        unselectedIcon(
+            PlatformModifier.attrsModifier { slot(MdNavigationTabScope.Slot.InactiveIcon) }.toCommonModifier()
+        )
+    }

demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt

@@ -164,5 +164,21 @@ fun Material3(modifier: Modifier) {
             ElevatedCard { Text("elevated card", contentPaddingModifier) }
             OutlinedCard { Text("outlined card", contentPaddingModifier) }
         }
+
+        var selectedIndex by remember { mutableStateOf(0) }
+        NavigationBar {
+            NavigationBarItemWithMaterialIcons(
+                selectedIndex == 0,
+                { selectedIndex = 0 },
+                Icons.Default.Add,
+                label = "Add"
+            )
+            NavigationBarItemWithMaterialIcons(
+                selectedIndex == 1,
+                { selectedIndex = 1 },
+                Icons.Default.Remove,
+                label = "Remove"
+            )
+        }
     }
 }