shadow_design/
drawer.rs

1use crate::icon::{Icon, IconKind};
2use dioxus::prelude::*;
3
4#[derive(Clone, Copy, PartialEq, Debug, Default)]
5pub enum DrawerPosition {
6    Left,
7    #[default]
8    Right,
9}
10
11#[derive(Clone, Copy, PartialEq, Debug, Default)]
12pub enum DrawerSize {
13    Sm,
14    #[default]
15    Md,
16    Lg,
17}
18
19impl DrawerSize {
20    pub fn scss_class(&self) -> &'static str {
21        match self {
22            DrawerSize::Sm => "sd-drawer-panel--sm",
23            DrawerSize::Md => "sd-drawer-panel--md",
24            DrawerSize::Lg => "sd-drawer-panel--lg",
25        }
26    }
27}
28
29#[component]
30pub fn Drawer(
31    is_open: Signal<bool>,
32    #[props(default)] title: Option<String>,
33    #[props(default)] position: DrawerPosition,
34    #[props(default)] size: DrawerSize,
35    #[props(default)] glow: Option<bool>,
36    #[props(default)] class: String,
37    children: Element,
38) -> Element {
39    if !*is_open.read() {
40        return rsx! {};
41    }
42
43    #[cfg(feature = "theme")]
44    let theme = crate::theme::use_theme();
45    #[cfg(feature = "theme")]
46    let has_glow = theme().is_component_glow_enabled("drawer", glow);
47    #[cfg(not(feature = "theme"))]
48    let has_glow = glow.unwrap_or(false);
49
50    let glow_class = if has_glow {
51        "sd-drawer-panel--glow"
52    } else {
53        ""
54    };
55
56    #[cfg(feature = "animation")]
57    let anim_class = match position {
58        DrawerPosition::Left => crate::animation::Animations::DRAWER_LEFT,
59        DrawerPosition::Right => crate::animation::Animations::DRAWER_RIGHT,
60    };
61    #[cfg(not(feature = "animation"))]
62    let anim_class = match position {
63        DrawerPosition::Left => "animate-drawer-slide-left",
64        DrawerPosition::Right => "animate-drawer-slide-right",
65    };
66
67    let pos_class = match position {
68        DrawerPosition::Left => "sd-drawer-panel--left",
69        DrawerPosition::Right => "sd-drawer-panel--right",
70    };
71    let size_class = size.scss_class();
72
73    rsx! {
74        div {
75            class: "sd-drawer-backdrop",
76            onclick: move |_| *is_open.write() = false,
77            div {
78                class: "sd-drawer-panel {pos_class} {size_class} {glow_class} {anim_class} {class}",
79                onclick: move |e| e.stop_propagation(),
80                div { class: "sd-drawer__header",
81                    h3 { class: "sd-drawer__title",
82                        "{title.as_deref().unwrap_or_default()}"
83                    }
84                    button {
85                        r#type: "button",
86                        class: "sd-drawer__close",
87                        onclick: move |_| *is_open.write() = false,
88                        Icon { kind: IconKind::X, size: 16 }
89                    }
90                }
91                div { class: "sd-drawer__body",
92                    {children}
93                }
94            }
95        }
96    }
97}
shadow_design/drawer.rs

shadow_design/
drawer.rs
