From 1e576394901a0b9dd1217f9b5bd65645c32799e7 Mon Sep 17 00:00:00 2001
From: luoxiao <luoxiaozero@163.com>
Date: Sun, 4 Jun 2023 17:14:41 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20NavBar=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Cargo.toml                              |  2 +-
 examples/basic/src/app.rs               |  6 +++
 examples/basic/src/pages/components.rs  |  3 +-
 examples/basic/src/pages/mod.rs         |  2 +
 examples/basic/src/pages/nav_bar/mod.rs | 11 +++++
 src/mobile/mod.rs                       |  4 +-
 src/mobile/nav_bar/mod.rs               | 61 +++++++++++++++++++++++++
 src/mobile/nav_bar/nav-bar.css          | 40 ++++++++++++++++
 8 files changed, 126 insertions(+), 3 deletions(-)
 create mode 100644 examples/basic/src/pages/nav_bar/mod.rs
 create mode 100644 src/mobile/nav_bar/mod.rs
 create mode 100644 src/mobile/nav_bar/nav-bar.css

diff --git a/Cargo.toml b/Cargo.toml
index c94036a..7696f92 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -17,7 +17,7 @@ leptos = { version = "0.3.0", features = ["stable"] }
 stylers = "0.3.1"
 web-sys = { version = "0.3.62", features = ["DomRect"] }
 leptos_dom = { version = "0.3.0" }
-leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined"] }
+leptos_icons = { version = "0.0.10", features = ["AiCloseOutlined", "AiCheckOutlined", "AiLeftOutlined"] }
 wasm-bindgen = "0.2.85"
 
 [workspace]
diff --git a/examples/basic/src/app.rs b/examples/basic/src/app.rs
index 33517dc..203a334 100644
--- a/examples/basic/src/app.rs
+++ b/examples/basic/src/app.rs
@@ -28,6 +28,9 @@ pub fn App(cx: Scope) -> impl IntoView {
                     <Route path="/tabbar" view=move |cx| view! {cx,
                         <MobilePage path="/mobile/tabbar" />
                     } />
+                    <Route path="/nav-bar" view=move |cx| view! {cx,
+                        <MobilePage path="/mobile/nav-bar" />
+                    } />
                     <Route path="/input" view=move |cx| view! {cx,
                         <InputPage />
                     } />
@@ -43,6 +46,9 @@ pub fn App(cx: Scope) -> impl IntoView {
                 <Route path="/tabbar" view=move |cx| view! {cx,
                     <TabbarPage />
                 } />
+                <Route path="/nav-bar" view=move |cx| view! {cx,
+                    <NavBarPage />
+                } />
             </Routes>
         </Router>
     }
diff --git a/examples/basic/src/pages/components.rs b/examples/basic/src/pages/components.rs
index 5c836cf..506701e 100644
--- a/examples/basic/src/pages/components.rs
+++ b/examples/basic/src/pages/components.rs
@@ -1,5 +1,5 @@
 use leptos::*;
-use leptos_router::{use_location, Outlet, use_navigate};
+use leptos_router::{use_location, use_navigate, Outlet};
 use melt_ui::*;
 use regex::Regex;
 
@@ -39,6 +39,7 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
                     <MenuItem key="input" label="input" />
                     <MenuItem key="image" label="image" />
                     <MenuItem key="modal" label="madal" />
+                    <MenuItem key="nav-bar" label="nav-bar" />
                 </Menu>
             </aside>
             <main>
diff --git a/examples/basic/src/pages/mod.rs b/examples/basic/src/pages/mod.rs
index 6db75d7..4fabbef 100644
--- a/examples/basic/src/pages/mod.rs
+++ b/examples/basic/src/pages/mod.rs
@@ -5,6 +5,7 @@ mod input;
 mod menu;
 mod mobile;
 mod modal;
+mod nav_bar;
 mod slider;
 mod tabbar;
 
@@ -15,5 +16,6 @@ pub use input::*;
 pub use menu::*;
 pub use mobile::*;
 pub use modal::*;
+pub use nav_bar::*;
 pub use slider::*;
 pub use tabbar::*;
diff --git a/examples/basic/src/pages/nav_bar/mod.rs b/examples/basic/src/pages/nav_bar/mod.rs
new file mode 100644
index 0000000..5e21699
--- /dev/null
+++ b/examples/basic/src/pages/nav_bar/mod.rs
@@ -0,0 +1,11 @@
+use leptos::*;
+use melt_ui::mobile::NavBar;
+
+#[component]
+pub fn NavBarPage(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <div style="height: 100vh; background: #f5f5f5">
+            <NavBar title="Home" left_arrow=true left_text="back" right_text="add"/>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/mobile/mod.rs b/src/mobile/mod.rs
index 008e1f8..4ea22ba 100644
--- a/src/mobile/mod.rs
+++ b/src/mobile/mod.rs
@@ -1,3 +1,5 @@
 mod tabbar;
+mod nav_bar;
 
-pub use tabbar::*;
\ No newline at end of file
+pub use tabbar::*;
+pub use nav_bar::*;
\ No newline at end of file
diff --git a/src/mobile/nav_bar/mod.rs b/src/mobile/nav_bar/mod.rs
new file mode 100644
index 0000000..5dcf6b1
--- /dev/null
+++ b/src/mobile/nav_bar/mod.rs
@@ -0,0 +1,61 @@
+use crate::utils::mount_style::mount_style;
+use leptos::*;
+use leptos_icons::*;
+use stylers::style_sheet_str;
+
+#[component]
+pub fn NavBar(
+    cx: Scope,
+    #[prop(optional, into)] title: MaybeSignal<String>,
+    #[prop(optional, into)] left_arrow: MaybeSignal<bool>,
+    #[prop(optional, into)] left_text: MaybeSignal<String>,
+    #[prop(optional, into)] right_text: MaybeSignal<String>,
+) -> impl IntoView {
+    let class_name = mount_style("nav-bar", || style_sheet_str!("./src/mobile/nav_bar/nav-bar.css"));
+
+    view! { cx, class=class_name,
+        <div class="melt-nav-bar">
+            {
+                move || {
+                    let left_text = left_text.get();
+                    if left_arrow.get() || !left_text.is_empty() {
+                        view! { cx, class=class_name,
+                            <div class="melt-nav-bar__left">
+                                {
+                                    if left_arrow.get() {
+                                        view! { cx,
+                                            <Icon icon=AiIcon::AiLeftOutlined/>
+                                        }.into()
+                                    } else {
+                                        None
+                                    }
+                                }
+                                { left_text }
+                            </div>
+                        }.into()
+                    } else {
+                        None
+                    }
+                }
+            }
+            <div class="melt-nav-bar__center">
+                { move || title.get() }
+            </div>
+            {
+                move || {
+                    let right_text = right_text.get();
+                    if !right_text.is_empty() {
+                        view! { cx, class=class_name,
+                            <div class="melt-nav-bar__right">
+                                { right_text }
+                            </div>
+                        }.into()
+                    } else {
+                        None
+                    }
+                }
+            }
+            
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/mobile/nav_bar/nav-bar.css b/src/mobile/nav_bar/nav-bar.css
new file mode 100644
index 0000000..bc5195a
--- /dev/null
+++ b/src/mobile/nav_bar/nav-bar.css
@@ -0,0 +1,40 @@
+.melt-nav-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 46px;
+    line-height: 46px;
+    background-color: #fff;
+}
+
+.melt-nav-bar__center {
+    max-width: 60%;
+    font-weight: 600;
+    text-align: center;
+    margin: 0 auto;
+}
+
+.melt-nav-bar__left {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    padding: 0 12px;
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+}
+
+.melt-nav-bar__right {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0 12px;
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+}