From 5cce9afcb91f1c4fce68572549c3e49d3a2b4ed5 Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Thu, 4 Jan 2024 23:32:58 +0800
Subject: [PATCH] demo: adaptive mobile (#68)

* demo: adaptive mobile

* fix: demo callback
---
 demo/Cargo.toml                    |   3 +-
 demo/src/components/site_header.rs | 207 +++++++++++++++++++++--------
 demo/src/pages/components.rs       |  22 ++-
 demo/src/pages/guide.rs            |  22 ++-
 demo_markdown/src/lib.rs           |   2 +-
 demo_markdown/src/markdown/mod.rs  |  18 +--
 6 files changed, 210 insertions(+), 64 deletions(-)

diff --git a/demo/Cargo.toml b/demo/Cargo.toml
index bf623f8..8a3001a 100644
--- a/demo/Cargo.toml
+++ b/demo/Cargo.toml
@@ -10,7 +10,7 @@ edition = "2021"
 leptos = { version = "0.5.4" }
 leptos_meta = { version = "0.5.4" }
 leptos_router = { version = "0.5.4" }
-leptos_devtools = "0.0.1"
+leptos_devtools = { version = "0.0.1", optional = true}
 thaw = { path = "../thaw", default-features = false }
 icondata = { version = "0.1.0", features = [
     "AiCloseOutlined",
@@ -18,6 +18,7 @@ icondata = { version = "0.1.0", features = [
     "AiGithubOutlined",
     "AiUserOutlined",
     "AiSearchOutlined",
+    "AiUnorderedListOutlined"
 ] }
 demo_markdown = { path = "../demo_markdown" }
 
diff --git a/demo/src/components/site_header.rs b/demo/src/components/site_header.rs
index d667b20..8daa5f7 100644
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@@ -1,5 +1,6 @@
 use leptos::*;
-use leptos_router::use_navigate;
+use leptos_meta::Style;
+use leptos_router::{use_location, use_navigate};
 use thaw::*;
 
 #[component]
@@ -8,23 +9,21 @@ pub fn SiteHeader() -> impl IntoView {
     let theme_name = create_memo(move |_| {
         theme.with(|theme| {
             if theme.name == *"light" {
-                "Dark"
+                "Dark".to_string()
             } else {
-                "Light"
+                "Light".to_string()
             }
         })
     });
-    let on_theme = move |_| {
+    let change_theme = Callback::new(move |_| {
         if theme_name.get_untracked() == "Light" {
-            theme.set(Theme::light())
+            theme.set(Theme::light());
         } else {
-            theme.set(Theme::dark())
+            theme.set(Theme::dark());
         }
-    };
+    });
     let style = create_memo(move |_| {
-        theme.with(|theme| {
-            format!("height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid {}", theme.common.border_color)
-        })
+        theme.with(|theme| format!("border-bottom: 1px solid {}", theme.common.border_color))
     });
     let search_value = create_rw_signal(String::new());
     let search_all_options = store_value(gen_search_all_options());
@@ -77,18 +76,58 @@ pub fn SiteHeader() -> impl IntoView {
         }
     });
     on_cleanup(move || handle.remove());
-    view! {
-        <LayoutHeader style>
-            <Space>
-                <img src="/thaw/logo.svg" style="width: 36px"/>
-                <div
-                    style="cursor: pointer; display: flex; align-items: center; height: 100%; font-weight: 600; font-size: 20px"
-                    on:click=move |_| {
-                        let navigate = use_navigate();
-                        navigate("/", Default::default());
-                    }
-                >
 
+    let menu_value = use_menu_value(change_theme);
+    view! {
+        <Style id="demo-header">
+            "
+                .demo-header {
+                    height: 64px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0 20px;
+                }
+                .demo-name {
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    font-weight: 600;
+                    font-size: 20px;
+                }
+                .demo-header__menu-mobile {
+                    display: none;
+                }
+                .demo-header__menu-popover-mobile {
+                    padding: 0;
+                }
+                @media screen and (max-width: 600px) {
+                    .demo-header {
+                        padding: 0 8px;
+                    }
+                    .demo-name {
+                        display: none;
+                    }
+                }
+                @media screen and (max-width: 1200px) {
+                    .demo-header__right-btn {
+                        display: none;
+                    }
+                    .demo-header__menu-mobile {
+                        display: block;
+                    }
+                }
+            "
+        </Style>
+        <LayoutHeader class="demo-header" style>
+            <Space
+                on:click=move |_| {
+                let navigate = use_navigate();
+                navigate("/", Default::default());
+            }>
+                <img src="/thaw/logo.svg" style="width: 36px"/>
+                <div class="demo-name">
                     "Thaw UI"
                 </div>
             </Space>
@@ -105,39 +144,62 @@ pub fn SiteHeader() -> impl IntoView {
                         <Icon icon=icondata::Icon::from(icondata::AiIcon::AiSearchOutlined) style="font-size: 18px; color: var(--thaw-placeholder-color);"/>
                     </AutoCompletePrefix>
                 </AutoComplete>
-                <Button
-                    variant=ButtonVariant::Text
-                    on_click=move |_| {
-                        let navigate = use_navigate();
-                        navigate("/guide/installation", Default::default());
-                    }
-                >
+                <Popover placement=PopoverPlacement::BottomEnd class="demo-header__menu-popover-mobile">
+                    <PopoverTrigger slot class="demo-header__menu-mobile">
+                        <Button
+                            variant=ButtonVariant::Text
+                            icon=icondata::AiIcon::AiUnorderedListOutlined
+                            style="font-size: 22px; padding: 0px 6px;"
+                        />
+                    </PopoverTrigger>
+                    <div style="height: 70vh; overflow: auto;">
+                        <Menu value=menu_value>
+                            <MenuItem key=theme_name label=theme_name />
+                            <MenuItem key="github" label="Github" />
+                            {
+                                use crate::pages::{gen_guide_menu_data, gen_menu_data};
+                                vec![
+                                    gen_guide_menu_data().into_view(),
+                                    gen_menu_data().into_view(),
+                                ]
+                            }
+                        </Menu>
+                    </div>
+                </Popover>
+                <Space class="demo-header__right-btn">
+                    <Button
+                        variant=ButtonVariant::Text
+                        on_click=move |_| {
+                            let navigate = use_navigate();
+                            navigate("/guide/installation", Default::default());
+                        }
+                    >
 
-                    "Guide"
-                </Button>
-                <Button
-                    variant=ButtonVariant::Text
-                    on_click=move |_| {
-                        let navigate = use_navigate();
-                        navigate("/components/button", Default::default());
-                    }
-                >
-
-                    "Components"
-                </Button>
-                <Button variant=ButtonVariant::Text on_click=on_theme>
-                    {move || theme_name.get()}
-                </Button>
-                <Button
-                    variant=ButtonVariant::Text
-                    icon=icondata::AiIcon::AiGithubOutlined
-                    round=true
-                    style="font-size: 22px; padding: 0px 6px;"
-                    on_click=move |_| {
-                        _ = window().open_with_url("http://github.com/thaw-ui/thaw");
-                    }
-                />
+                        "Guide"
+                    </Button>
+                    <Button
+                        variant=ButtonVariant::Text
+                        on_click=move |_| {
+                            let navigate = use_navigate();
+                            navigate("/components/button", Default::default());
+                        }
+                    >
 
+                        "Components"
+                    </Button>
+                    <Button variant=ButtonVariant::Text on_click=Callback::new(move |_| change_theme.call(()))>
+                        {move || theme_name.get()}
+                    </Button>
+                    <Button
+                        variant=ButtonVariant::Text
+                        icon=icondata::AiIcon::AiGithubOutlined
+                        round=true
+                        style="font-size: 22px; padding: 0px 6px;"
+                        on_click=move |_| {
+                            _ = window().open_with_url("http://github.com/thaw-ui/thaw");
+                        }
+                    />
+                </Space>
             </Space>
 
         </LayoutHeader>
@@ -163,3 +225,44 @@ fn gen_search_all_options() -> Vec<AutoCompleteOption> {
     }));
     options
 }
+
+fn use_menu_value(change_theme: Callback<()>) -> RwSignal<String> {
+    use crate::pages::gen_guide_menu_data;
+    let guide = store_value(gen_guide_menu_data());
+    let navigate = use_navigate();
+    let loaction = use_location();
+
+    let menu_value = create_rw_signal({
+        let mut pathname = loaction.pathname.get_untracked();
+        if pathname.starts_with("/thaw/components/") {
+            pathname.drain(17..).collect()
+        } else if pathname.starts_with("/thaw/guide/") {
+            pathname.drain(12..).collect()
+        } else {
+            String::new()
+        }
+    });
+
+    _ = menu_value.watch(move |name| {
+        if name == "Dark" || name == "Light" {
+            change_theme.call(());
+            return;
+        } else if name == "github" {
+            _ = window().open_with_url("http://github.com/thaw-ui/thaw");
+            return;
+        }
+        let pathname = loaction.pathname.get_untracked();
+        if guide.with_value(|menu| {
+            menu.iter()
+                .any(|group| group.children.iter().any(|item| &item.value == name))
+        }) {
+            if !pathname.eq(&format!("/thaw/guide/{name}")) {
+                navigate(&format!("/guide/{name}"), Default::default());
+            }
+        } else if !pathname.eq(&format!("/thaw/components/{name}")) {
+            navigate(&format!("/components/{name}"), Default::default());
+        }
+    });
+
+    menu_value
+}
diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
index da98a42..8d30d67 100644
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@@ -1,5 +1,6 @@
 use crate::components::SiteHeader;
 use leptos::*;
+use leptos_meta::Style;
 use leptos_router::{use_location, use_navigate, Outlet};
 use thaw::*;
 
@@ -26,10 +27,29 @@ pub fn ComponentsPage() -> impl IntoView {
         }
     });
     view! {
+        <Style>
+            "
+            .demo-components__component {
+                width: 896px;
+                margin: 0 auto;
+            }
+            .demo-md-table-box {
+                overflow: auto;
+            }
+            @media screen and (max-width: 1200px) {
+                .demo-components__sider {
+                    display: none;
+                }
+                .demo-components__component {
+                    width: 100%;
+                }
+            }
+            "
+        </Style>
         <Layout position=LayoutPosition::Absolute>
             <SiteHeader/>
             <Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
-                <LayoutSider>
+                <LayoutSider class="demo-components__sider">
                     <Menu value=select_name>
 
                         {gen_menu_data().into_view()}
diff --git a/demo/src/pages/guide.rs b/demo/src/pages/guide.rs
index 079905e..a0962e6 100644
--- a/demo/src/pages/guide.rs
+++ b/demo/src/pages/guide.rs
@@ -1,5 +1,6 @@
 use crate::components::SiteHeader;
 use leptos::*;
+use leptos_meta::Style;
 use leptos_router::{use_location, use_navigate, Outlet};
 use thaw::*;
 
@@ -25,10 +26,29 @@ pub fn GuidePage() -> impl IntoView {
         selected
     });
     view! {
+        <Style>
+            "
+            .demo-components__component {
+                width: 896px;
+                margin: 0 auto;
+            }
+            .demo-md-table-box {
+                overflow: auto;
+            }
+            @media screen and (max-width: 1200px) {
+                .demo-guide__sider {
+                    display: none;
+                }
+                .demo-components__component {
+                    width: 100%;
+                }
+            }
+            "
+        </Style>
         <Layout position=LayoutPosition::Absolute>
             <SiteHeader/>
             <Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
-                <LayoutSider>
+                <LayoutSider class="demo-guide__sider">
                     <Menu value=selected>
 
                         {gen_guide_menu_data().into_view()}
diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs
index acf398d..3c02911 100644
--- a/demo_markdown/src/lib.rs
+++ b/demo_markdown/src/lib.rs
@@ -124,7 +124,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
                 #(#demos)*
 
                 view! {
-                    <div style="width: 896px; margin: 0 auto;">
+                    <div class="demo-components__component">
                         #body
                     </div>
                 }
diff --git a/demo_markdown/src/markdown/mod.rs b/demo_markdown/src/markdown/mod.rs
index 8fc8fbc..8e77e9b 100644
--- a/demo_markdown/src/markdown/mod.rs
+++ b/demo_markdown/src/markdown/mod.rs
@@ -83,14 +83,16 @@ fn iter_nodes<'a>(node: &'a AstNode<'a>, demos: &mut Vec<String>) -> TokenStream
             let header_children: Vec<TokenStream> = children.drain(0..header_index).collect();
 
             quote!(
-                <Table single_column=true>
-                    <thead>
-                        #(#header_children)*
-                    </thead>
-                    <tbody>
-                        #(#children)*
-                    </tbody>
-                </Table>
+                <div class="demo-md-table-box">
+                    <Table single_column=true>
+                        <thead>
+                            #(#header_children)*
+                        </thead>
+                        <tbody>
+                            #(#children)*
+                        </tbody>
+                    </Table>
+                </div>
             )
         }
         NodeValue::TableRow(_) => {