dioxus-docs-kit 0.4.1

Reusable documentation site shell for Dioxus applications
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::ld_icons::LdX;

use crate::BlogContext;
use crate::blog::registry::BlogRegistry;

use super::tag_filter::TagFilter;

/// Slide-in drawer for mobile screens (blog variant).
#[component]
pub fn BlogMobileDrawer(mut open: Signal<bool>) -> Element {
    let ctx = use_context::<BlogContext>();
    let registry = use_context::<&'static BlogRegistry>();

    let current_slug = ctx.current_slug;
    use_effect(move || {
        let _ = current_slug();
        open.set(false);
    });

    let is_open = open();

    let backdrop_class = if is_open {
        "fixed inset-0 z-[60] bg-black/50 lg:hidden transition-opacity duration-300 opacity-100"
    } else {
        "fixed inset-0 z-[60] bg-black/50 lg:hidden transition-opacity duration-300 opacity-0 pointer-events-none"
    };

    let panel_class = if is_open {
        "fixed left-0 top-0 bottom-0 z-[70] w-72 bg-base-200 lg:hidden transition-transform duration-300 translate-x-0 shadow-2xl"
    } else {
        "fixed left-0 top-0 bottom-0 z-[70] w-72 bg-base-200 lg:hidden transition-transform duration-300 -translate-x-full shadow-2xl"
    };

    rsx! {
        div {
            class: "{backdrop_class}",
            onclick: move |_| open.set(false),
        }

        div {
            class: "{panel_class}",
            onclick: move |e| e.stop_propagation(),

            div { class: "flex items-center justify-between px-4 py-3 border-b border-base-300",
                span { class: "font-semibold text-sm", "Blog" }
                button {
                    class: "btn btn-ghost btn-xs btn-square",
                    onclick: move |_| open.set(false),
                    Icon { class: "size-4", icon: LdX }
                }
            }

            div { class: "overflow-y-auto h-[calc(100%-3.5rem)] p-4",
                if !registry.all_tags().is_empty() {
                    div { class: "mb-6",
                        h3 { class: "font-semibold text-sm text-base-content/70 uppercase tracking-wider mb-3",
                            "Tags"
                        }
                        TagFilter {}
                    }
                }

                div {
                    h3 { class: "font-semibold text-sm text-base-content/70 uppercase tracking-wider mb-3",
                        "Recent Posts"
                    }
                    ul { class: "space-y-1",
                        for post in registry.all_posts().iter().take(10) {
                            {
                                let href = format!("{}/{}", ctx.base_path, post.slug);
                                let is_active = current_slug() == post.slug;
                                let active_class = if is_active {
                                    "bg-primary/10 text-primary font-medium"
                                } else {
                                    "text-base-content/70 hover:text-base-content hover:bg-base-200"
                                };
                                rsx! {
                                    li {
                                        Link {
                                            to: NavigationTarget::Internal(href),
                                            class: "block px-3 py-2 text-sm rounded-lg transition-colors {active_class}",
                                            "{post.frontmatter.title}"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}