feature: add support for complex NavBar elements (#81)

* feature: add support for complex NavBar elements

* pref: nav bar slot

* feature: add support for complex NavBar elements

---------

Co-authored-by: Cristobal Andrada <kandrelczyk@gmail.com>
Co-authored-by: luoxiao <luoxiaozero@163.com>

demo/src/pages/nav_bar/mod.rs

@@ -1,7 +1,8 @@
 use super::NavBarMdPage;
 use crate::pages::MobilePage;
 use leptos::*;
-use thaw::mobile::NavBar;
+use thaw::mobile::{NavBar, NavBarRight};
+use thaw::Icon;
 
 #[component]
 pub fn NavBarPage() -> impl IntoView {
@@ -27,11 +28,15 @@ pub fn NavBarDemoPage() -> impl IntoView {
                 title="Home"
                 left_arrow=true
                 left_text="back"
-                right_text="add"
                 on_click_left=on_click_left
                 on_click_right=on_click_right
-            />
+            >
+                <NavBarRight slot>
+                     <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/> 
+                </NavBarRight>
+            </NavBar>
             <div style="padding-top: 50px">{move || click_text.get()}</div>
         </div>
     }
 }
+

demo_markdown/docs/_mobile/nav_bar/mod.md

@@ -13,10 +13,13 @@ view! {
             title="Home"
             left_arrow=true
             left_text="back"
-            right_text="add"
             on_click_left=on_click_left
             on_click_right=on_click_right
-        />
+        >
+            <NavBarRight slot>
+                 <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/> 
+            </NavBarRight>
+        </NavBar>
         <div style="padding-top: 50px">{move || click_text.get()}</div>
     </div>
 }
@@ -33,3 +36,9 @@ view! {
 | on_click_left | `Option<Callback<ev::MouseEvent>>` | `Default::default()` | NavBar left click. |
 | right_text | `MaybeSignal<String>` | `Default::default()` | NavBar right text. |
 | on_click_right | `Option<Callback<ev::MouseEvent>>` | `Default::default()` | NavBar right click. |
+
+### NavBarLeft and NavBarRight Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the element. |

thaw/src/mobile/nav_bar/mod.rs

@@ -10,13 +10,29 @@ use crate::{
 use leptos::*;
 pub use theme::NavBarTheme;
 
+#[slot]
+pub struct NavBarLeft {
+    #[prop(optional, into)]
+    class: MaybeSignal<String>,
+    children: Children,
+}
+
+#[slot]
+pub struct NavBarRight {
+    #[prop(optional, into)]
+    class: MaybeSignal<String>,
+    children: Children,
+}
+
 #[component]
 pub fn NavBar(
     #[prop(optional, into)] title: MaybeSignal<String>,
     #[prop(optional, into)] left_arrow: MaybeSignal<bool>,
     #[prop(optional, into)] left_text: MaybeSignal<String>,
+    #[prop(optional)] nav_bar_left: Option<NavBarLeft>,
     #[prop(optional, into)] on_click_left: Option<Callback<ev::MouseEvent>>,
     #[prop(optional, into)] right_text: MaybeSignal<String>,
+    #[prop(optional)] nav_bar_right: Option<NavBarRight>,
     #[prop(optional, into)] on_click_right: Option<Callback<ev::MouseEvent>>,
     #[prop(optional, into)] class: MaybeSignal<String>,
 ) -> impl IntoView {
@@ -48,26 +64,50 @@ pub fn NavBar(
 
     view! {
         <div class=class_list!["thaw-nav-bar", move || class.get()] style=move || css_vars.get()>
-            <If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
+            {
-                <Then slot>
+                if let Some(NavBarLeft { class, children }) = nav_bar_left {
-                    <div class="thaw-nav-bar__left" on:click=on_click_left>
+                    view! {
-                        <If cond=left_arrow>
+                        <div class=class_list!["thaw-nav-bar__left", move || class.get()] on:click=on_click_left>
+                            {children()}
+                        </div>
+                    }.into_view()
+                } else {
+                    view! {
+                        <If cond=MaybeSignal::derive(move || left_arrow.get() || !left_text.get().is_empty())>
                             <Then slot>
-                                <Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
+                                <div class="thaw-nav-bar__left" on:click=on_click_left>
+                                    <If cond=left_arrow>
+                                        <Then slot>
+                                            <Icon icon=Icon::from(AiIcon::AiLeftOutlined)/>
+                                        </Then>
+                                    </If>
+                                    {move || left_text.get()}
+                                </div>
                             </Then>
                         </If>
-                        {move || left_text.get()}
+                    }.into_view()
-                    </div>
+                }
-                </Then>
+            }
-            </If>
             <div class="thaw-nav-bar__center">{move || title.get()}</div>
-            <If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
+            {
-                <Then slot>
+                if let Some(NavBarRight { class, children }) = nav_bar_right {
-                    <div class="thaw-nav-bar__right" on:click=on_click_right>
+                    view! {
-                        {move || right_text.get()}
+                        <div class=class_list!["thaw-nav-bar__right", move || class.get()] on:click=on_click_right>
-                    </div>
+                            {children()}
-                </Then>
+                        </div>
-            </If>
+                    }.into_view()
+                } else {
+                    view! {
+                        <If cond=MaybeSignal::derive(move || !right_text.get().is_empty())>
+                            <Then slot>
+                                <div class="thaw-nav-bar__right" on:click=on_click_right>
+                                    {move || right_text.get()}
+                                </div>
+                            </Then>
+                        </If>
+                    }.into_view()
+                }
+            }
         </div>
     }
 }