impulse_thaw/drawer/
inline_drawer.rs1use super::{DrawerPosition, DrawerSize};
2use leptos::prelude::*;
3use thaw_components::CSSTransition;
4use thaw_utils::{class_list, mount_style, Model};
5
6#[component]
7pub fn InlineDrawer(
8 #[prop(optional, into)] class: MaybeProp<String>,
9 #[prop(into)]
11 open: Model<bool>,
12 #[prop(optional, into)]
14 position: Signal<DrawerPosition>,
15 #[prop(optional, into)]
17 size: Signal<DrawerSize>,
18 children: Children,
19) -> impl IntoView {
20 mount_style("drawer", include_str!("./drawer.css"));
21 mount_style("inline-drawer", include_str!("./inline-drawer.css"));
22 let open_drawer: RwSignal<bool> = RwSignal::new(open.get_untracked());
23
24 Effect::new(move |_| {
25 let is_open = open.get();
26 open_drawer.set(is_open);
27 });
28
29 view! {
30 <CSSTransition
31 appear=open_drawer.get_untracked()
32 show=open_drawer
33 name=Memo::new(move |_| {
34 format!("slide-in-from-{}-transition", position.get().as_str())
35 })
36 >
37 <div
38 class=class_list![
39 "thaw-inline-drawer",
40 move || format!("thaw-inline-drawer--position-{}", position.get().as_str()),
41 class
42 ]
43 style=move || format!("--thaw-drawer--size: {}", size.get().as_size_str(position))
44 >
45 {children()}
46 </div>
47 </CSSTransition>
48 }
49}