Skip to main content

dioxus_docs_kit/components/
mobile_drawer.rs

1use dioxus::prelude::*;
2use dioxus_free_icons::Icon;
3use dioxus_free_icons::icons::ld_icons::LdX;
4
5use crate::DocsContext;
6
7use super::sidebar::DocsSidebar;
8
9/// Slide-in sidebar drawer for mobile screens.
10#[component]
11pub fn MobileDrawer(mut open: Signal<bool>) -> Element {
12    let ctx = use_context::<DocsContext>();
13
14    // Auto-close on path change
15    let current_path = ctx.current_path;
16    use_effect(move || {
17        let _ = current_path();
18        open.set(false);
19    });
20
21    let is_open = open();
22
23    let backdrop_class = if is_open {
24        "fixed inset-0 z-[60] bg-black/50 lg:hidden transition-opacity duration-300 opacity-100"
25    } else {
26        "fixed inset-0 z-[60] bg-black/50 lg:hidden transition-opacity duration-300 opacity-0 pointer-events-none"
27    };
28
29    let panel_class = if is_open {
30        "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"
31    } else {
32        "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"
33    };
34
35    rsx! {
36        // Backdrop
37        div {
38            class: "{backdrop_class}",
39            onclick: move |_| open.set(false),
40        }
41
42        // Drawer panel
43        div {
44            class: "{panel_class}",
45            onclick: move |e| e.stop_propagation(),
46
47            // Header
48            div { class: "flex items-center justify-between px-4 py-3 border-b border-base-300",
49                span { class: "font-semibold text-sm", "Navigation" }
50                button {
51                    class: "btn btn-ghost btn-xs btn-square",
52                    onclick: move |_| open.set(false),
53                    Icon { class: "size-4", icon: LdX }
54                }
55            }
56
57            // Sidebar content
58            div { class: "overflow-y-auto h-[calc(100%-3.5rem)] p-6",
59                DocsSidebar {}
60            }
61        }
62    }
63}