Improve support of navbars

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 0.1.3
 
+* Improve support of navbars
+
 ## 0.1.2
 
 * New typealias `AttrsWithContentBuilder`

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt

@@ -1,11 +1,25 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.*
-import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLElement
 
+@Composable
+fun Navbar(
+    attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
+    contentBuilder: ContentBuilder<HTMLElement>
+) {
+    Nav(
+        {
+            include(UIKitNavbar, UIKitNavbar.Container)
+            attributesCustomizer()
+        }
+    ) {
+        contentBuilder
+    }
+}
+
 @Composable
 fun Navbar(
     leftBuilder: NavbarNavBuilder? = null,
@@ -14,22 +28,20 @@ fun Navbar(
     vararg navModifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
 ) {
-    Nav(
+    Navbar(
         {
-            attr("uk-navbar", "")
-            classes("uk-navbar-container", "uk-navbar")
             include(*navModifiers)
             attributesCustomizer()
         }
     ) {
         leftBuilder ?.let {
-            Div({ classes("uk-navbar-left") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Left) }) { it.draw() }
         }
         centerBuilder ?.let {
-            Div({ classes("uk-navbar-center") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Center) }) { it.draw() }
         }
         rightBuilder ?.let {
-            Div({ classes("uk-navbar-right") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Right) }) { it.draw() }
         }
     }
 }

src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt

@@ -1,8 +1,7 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.*
-import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.attributes.AttrsScope
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLLIElement
@@ -46,8 +45,7 @@ class NavbarNavBuilder(
     fun draw() {
         Ul(
             {
-                classes("uk-navbar-nav")
+                include(UIKitNavbar.Nav, *modifiers)
-                include(*modifiers)
                 attributesCustomizer()
             }
         ) {

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNavbar.kt

@@ -1,17 +1,86 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitNavbar(suffix: String) : UIKitModifier {
+import dev.inmo.jsuikit.types.Dropdown
-    override val classes: Array<String> = arrayOf("uk-navbar-$suffix")
+import dev.inmo.jsuikit.utils.*
 
-    object Transparent : UIKitNavbar("transparent")
+sealed class UIKitNavbar(vararg classes: String) : UIKitModifier {
-    sealed class Dropdown(suffix: String?) : UIKitNavbar("dropdown${suffix ?.let { "-$it" } ?: ""}") {
+    override val classes: Array<String> = classes as Array<String>
+
+    object Transparent : UIKitNavbar("uk-navbar-transparent")
+    object Container : UIKitNavbar("uk-navbar-container")
+    sealed class Dropdown(suffix: String?) : UIKitNavbar("uk-navbar-dropdown${suffix ?.let { "-$it" } ?: ""}") {
         object Nav : Dropdown("nav")
 
+        sealed class Width(suffix: String) : Dropdown(suffix) {
+            object Two : Width("width-2")
+            object Three : Width("width-3")
+            object Four : Width("width-4")
+            object Five : Width("width-5")
+        }
+
         companion object : Dropdown(null)
     }
-    object Item : UIKitNavbar("item")
+    sealed class Alignment(val suffix: String) : UIKitNavbar("uk-navbar-$suffix") {
+        object Left : Alignment("left")
+        sealed class Center(suffix: String) : Alignment(suffix) {
+            object Left : Center("center-left")
+            object Right : Center("center-right")
 
-    companion object {
+            companion object : Center("center")
+        }
+        object Right : Alignment("right")
+    }
+    object Item : UIKitNavbar("uk-navbar-item")
+    object Nav : UIKitNavbar("uk-navbar-nav")
+    object Subtitle : UIKitNavbar("uk-navbar-subtitle")
+    object Toggle : UIKitNavbar("uk-navbar-toggle")
+    object Sticky : UIKitNavbar("uk-navbar-sticky")
+
+    class Component internal constructor(
+        override val otherAttrs: Map<String, String>
+    ) : UIKitNavbar(*UIKitNavbar.classes)
+
+    companion object : UIKitNavbar("uk-navbar") {
         val Logo = UIKitUtility.Logo
+
+        operator fun invoke(
+            align: String? = null,
+            mode: String? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            boundary: String? = null,
+            boundaryAlign: Boolean? = null,
+            offset: Pixels? = null,
+            dropbar: Boolean? = null,
+            duration: Milliseconds? = null
+        ): Component {
+            return Component(
+                mapOf(
+                    buildAttribute(UIKitNavbar.classes.first()) {
+                        "align" to align
+                        "mode" to mode
+                        "delay-show" to delayShow
+                        "delay-hide" to delayHide
+                        "boundary" to boundary
+                        "boundary-align" to boundaryAlign
+                        "offset" to offset
+                        "dropbar" to dropbar
+                        "duration" to duration
+                    }
+                )
+            )
+        }
+
+        operator fun invoke(
+            align: Alignment? = null,
+            mode: UIKitDropdown.Mode? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            boundary: String? = null,
+            boundaryAlign: Boolean? = null,
+            offset: Pixels? = null,
+            dropbar: Boolean? = null,
+            duration: Milliseconds? = null
+        ): Component = invoke(align ?.suffix, mode ?.name, delayShow, delayHide, boundary, boundaryAlign, offset, dropbar, duration)
     }
 }