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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
use dioxus::prelude::*;
use crate::components::avatar::{AvatarImageSize, AvatarShape, ImageAvatar};
use crate::components::sidebar::{
Sidebar, SidebarCollapsible, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel,
SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuButtonSize, SidebarMenuItem,
SidebarRail, SidebarVariant,
};
use crate::dashboard::common::{FolderId, IconKind, LucideIcon, AVATAR_PROFILE_OPTIONS, FOLDERS};
use super::state::{EmailClientState, EmailClientStateStoreExt, EmailClientStateStoreImplExt};
#[component]
pub(super) fn EmailSidebar(mut state: Store<EmailClientState>) -> Element {
rsx! {
Sidebar {
variant: SidebarVariant::Sidebar,
collapsible: SidebarCollapsible::Icon,
SidebarContent {
SidebarGroup {
SidebarMenu {
SidebarMenuItem {
SidebarMenuButton {
class: "ec-compose",
tooltip: rsx! { "Compose (C)" },
r#as: move |attrs: Vec<Attribute>| rsx! {
button { r#type: "button", onclick: move |_| state.open_compose(), ..attrs,
LucideIcon { kind: IconKind::Pen }
span { "Compose" }
}
},
}
}
}
}
SidebarGroup {
SidebarGroupLabel { "Folders" }
SidebarMenu {
for f in FOLDERS.iter() {
FolderItem {
key: "{f.id.as_str()}",
folder_id: f.id,
label: f.label,
icon: f.icon,
count: Some(state.folder_count(f.id)),
state,
}
}
}
}
}
SidebarFooter {
SidebarMenu {
SidebarMenuItem {
SidebarMenuButton {
size: SidebarMenuButtonSize::Lg,
tooltip: rsx! { "You" },
ImageAvatar {
size: AvatarImageSize::Small,
shape: AvatarShape::Rounded,
src: "{AVATAR_PROFILE_OPTIONS[0].src}",
alt: "You",
"Y"
}
div { class: "dx-sidebar-info-block",
span { class: "dx-sidebar-info-title", "You" }
span { class: "dx-sidebar-info-subtitle", "you@yourcompany.com" }
}
}
}
}
}
SidebarRail {}
}
}
}
#[component]
fn FolderItem(
folder_id: FolderId,
label: &'static str,
icon: IconKind,
count: Option<u32>,
mut state: Store<EmailClientState>,
) -> Element {
let is_active = state.active_folder().cloned() == folder_id;
rsx! {
SidebarMenuItem {
SidebarMenuButton {
is_active,
tooltip: rsx! {
{label}
},
r#as: move |attrs: Vec<Attribute>| rsx! {
button {
r#type: "button",
onclick: move |_| {
state.set_active_folder(folder_id);
},
..attrs,
LucideIcon { kind: icon }
span { {label} }
}
},
}
if let Some(c) = count {
SidebarMenuBadge { "{c}" }
}
}
}
}