From 93dd63c6b1778747f3296d94ff19767dacdfdb58 Mon Sep 17 00:00:00 2001
From: InsanusMokrassar <ovsyannikov.alexey95@gmail.com>
Date: Thu, 20 Jan 2022 19:56:46 +0600
Subject: [PATCH] nav support improving

---
 CHANGELOG.md                                  |  2 +
 .../kotlin/dev/inmo/jsuikit/elements/Nav.kt   | 68 ++++++++++++++++++-
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7d75992..1c6af24 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## 0.0.9
 
+* Improving of `Nav` support
+
 ## 0.0.8
 
 Removing of redundant non standard things
diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Nav.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Nav.kt
index e22c623..db843f1 100644
--- a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Nav.kt
+++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Nav.kt
@@ -1,12 +1,13 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.snapshots.SnapshotStateList
 import dev.inmo.jsuikit.buildAndAddAttribute
 import dev.inmo.jsuikit.modifiers.*
 import dev.inmo.jsuikit.utils.Milliseconds
 import org.jetbrains.compose.web.dom.*
-import org.w3c.dom.HTMLLIElement
-import org.w3c.dom.HTMLUListElement
+import org.jetbrains.compose.web.dom.Text
+import org.w3c.dom.*
 
 @Composable
 fun Nav(
@@ -35,6 +36,62 @@ fun Nav(
     }
 }
 
+@Composable
+fun <T> Nav(
+    title: String,
+    data: SnapshotStateList<T>,
+    vararg ulModifiers: UIKitModifier,
+    titleModifiers: Array<UIKitModifier> = emptyArray(),
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
+    titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
+) {
+    Ul(
+        {
+            buildAndAddAttribute("uk-nav") {
+                "multiple" to multiple ?.toString()
+                "collapsible" to collapsible ?.toString()
+                "animation" to animation
+                "duration" to duration ?.toString()
+            }
+            classes("uk-nav")
+            include(*ulModifiers)
+            ulCustomizer()
+        }
+    ) {
+        NavHeader(
+            title,
+            *titleModifiers,
+            attributesCustomizer = titleCustomizer
+        )
+        besidesTitleAndList ?.let { it() }
+        data.forEach {
+            elementAllocator(it)
+        }
+    }
+}
+
+@Composable
+fun NavHeader(
+    text: String,
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+) {
+    Li(
+        {
+            include(*modifiers, UIKitNav.Header)
+            attributesCustomizer()
+        }
+    ) {
+        Text(text)
+    }
+}
+
 @Composable
 fun NavElement(
     vararg modifiers: UIKitModifier,
@@ -44,9 +101,14 @@ fun NavElement(
     Li(
         {
             include(*modifiers)
-            attributesCustomizer
+            attributesCustomizer()
         }
     ) {
         contentAllocator()
     }
 }
+
+@Composable
+fun NavDivider() {
+    Li({ include(UIKitNav.Divider) })
+}