✨ feat: add layout-sider component

gh-pages/src/components/mod.rs

@@ -0,0 +1,3 @@
+mod site_header;
+
+pub use site_header::*;

gh-pages/src/components/site_header.rs

@@ -0,0 +1,24 @@
+use leptos::*;
+use leptos_router::use_navigate;
+use melt_ui::*;
+
+#[component]
+pub fn SiteHeader(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <LayoutHeader
+            style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #efeff6"
+        >
+            <span style="cursor: pointer" on:click=move |_| {
+                let navigate = use_navigate(cx);
+                _ = navigate("/", Default::default());
+            }>
+                "Melt UI"
+            </span>
+            <Button type_=ButtonType::TEXT on:click=move |_| {
+                _ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
+            }>
+                "Github"
+            </Button>
+        </LayoutHeader>
+    }
+}

gh-pages/src/main.rs

@@ -1,4 +1,5 @@
 mod app;
+mod components;
 mod pages;
 
 use app::*;

gh-pages/src/pages/components.rs

@@ -1,3 +1,4 @@
+use crate::components::SiteHeader;
 use leptos::*;
 use leptos_router::{use_location, use_navigate, Outlet};
 use melt_ui::*;
@@ -30,8 +31,10 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
         selected
     });
     view! {cx,
-        <div class="components-page-box">
+        <Layout position=LayoutPosition::ABSOLUTE>
-            <aside>
+            <SiteHeader />
+            <Layout has_sider=true position=LayoutPosition::ABSOLUTE style="top: 54px;">
+                <LayoutSider>
                     <Menu selected>
                         <MenuItem key="menu" label="menu" />
                         <MenuItem key="slider" label="slider" />
@@ -44,10 +47,11 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
                         <MenuItem key="checkbox" label="checkbox" />
                         <MenuItem key="toast" label="toast" />
                     </Menu>
-            </aside>
+                </LayoutSider>
-            <main>
+                <Layout>
                     <Outlet />
-            </main>
+                </Layout>
-        </div>
+            </Layout>
+        </Layout>
     }
 }

gh-pages/src/pages/home.rs

@@ -1,3 +1,4 @@
+use crate::components::*;
 use leptos::*;
 use leptos_router::{use_navigate, use_query_map};
 use melt_ui::*;
@@ -14,16 +15,7 @@ pub fn Home(cx: Scope) -> impl IntoView {
     }
     view! { cx,
         <Layout position=LayoutPosition::ABSOLUTE>
-            <LayoutHeader
+            <SiteHeader />
-                style="height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #efeff6"
-                >
-                "Melt UI"
-                <Button type_=ButtonType::TEXT on:click=move |_| {
-                    _ = window().open_with_url("http://github.com/luoxiaozero/melt-ui");
-                }>
-                    "Github"
-                </Button>
-            </LayoutHeader>
             <Layout position=LayoutPosition::ABSOLUTE style="top: 54px; display: flex; align-items: center; justify-content: center; flex-direction: column;">
                 <p>"A Leptos UI Library"</p>
                 <Button on:click=move |_| {

src/layout/layout-sider.css

@@ -0,0 +1,4 @@
+.melt-layout-sider {
+    position: relative;
+    min-width: 260px;
+}

src/layout/layout_sider.rs

@@ -0,0 +1,15 @@
+use crate::utils::mount_style::mount_style;
+use leptos::*;
+use stylers::style_sheet_str;
+
+#[component]
+pub fn LayoutSider(cx: Scope, children: Children) -> impl IntoView {
+    let class_name = mount_style("layout-sider", || {
+        style_sheet_str!("./src/layout/layout-sider.css")
+    });
+    view! { cx, class=class_name,
+        <div class="melt-layout-sider">
+            { children(cx) }
+        </div>
+    }
+}

src/layout/mod.rs

@@ -1,7 +1,9 @@
 mod layout_header;
+mod layout_sider;
 
 use crate::utils::mount_style::mount_style;
 pub use layout_header::*;
+pub use layout_sider::*;
 use leptos::*;
 use stylers::style_sheet_str;
 
@@ -26,9 +28,18 @@ pub fn Layout(
     cx: Scope,
     #[prop(optional, into)] style: MaybeSignal<String>,
     #[prop(optional)] position: LayoutPosition,
+    #[prop(optional, into)] has_sider: MaybeSignal<bool>,
     children: Children,
 ) -> impl IntoView {
     let class_name = mount_style("layout", || style_sheet_str!("./src/layout/layout.css"));
+
+    let style = create_memo(cx, move |_| {
+        let mut style = style.get();
+        if has_sider.get() {
+            style.push_str("display: flex; flex-wrap: nowrap; flex-direction: row; width: 100;%")
+        }
+        style
+    });
     view! { cx, class=class_name,
         <div class="melt-layout" class=("melt-layout--absolute-positioned", position == LayoutPosition::ABSOLUTE) style=move || style.get()>
             { children(cx) }