dioxus_material/
navigation_rail.rs

1use crate::use_theme;
2use dioxus::prelude::*;
3
4#[component]
5pub fn NavigationRail(children: Element) -> Element {
6    rsx!(
7        nav {
8            ul {
9                display: "flex",
10                flex_direction: "column",
11                align_items: "center",
12                width: "50px",
13                list_style: "none",
14                margin: 0,
15                padding: "0 10px",
16                {children}
17            }
18        }
19    )
20}
21
22#[component]
23pub fn NavigationRailItem(
24    icon: Element,
25    label: Element,
26    is_selected: bool,
27    onselect: EventHandler<MouseEvent>,
28) -> Element {
29    let theme = use_theme();
30
31    rsx!(
32        li {
33            display: "flex",
34            flex_direction: "column",
35            align_items: "center",
36            width: "100%",
37            list_style: "none",
38            padding: "10px 0",
39            cursor: "pointer",
40            font_family: "sans-serif",
41            onclick: move |event| onselect.call(event),
42            div {
43                width: "100%",
44                padding: "5px 0",
45                text_align: "center",
46                border_radius: "{theme.border_radius_medium}",
47                background: if is_selected { Some(theme.secondary_container_color.to_string()) } else { None },
48                {icon}
49            }
50            div {
51                margin_top: "5px",
52                font_size: "{theme.label_small}px",
53                line_height: "16px",
54                {label}
55            }
56        }
57    )
58}
dioxus_material/navigation_rail.rs

dioxus_material/
navigation_rail.rs
