✨ feat: add NavBar component

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]

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>
     }

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>

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::*;

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>
+    }
+}

src/mobile/mod.rs

@@ -1,3 +1,5 @@
 mod tabbar;
+mod nav_bar;
 
-pub use tabbar::*;
+pub use tabbar::*;
+pub use nav_bar::*;

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>
+    }
+}

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;
+}