dioxus_bootstrap/
nav.rs

1use dioxus::prelude::*;
2use dioxus_router::navigation::NavigationTarget;
3use dioxus_router::components::Link;
4
5#[derive(Clone, Copy, PartialEq)]
6pub enum NavBarVariant {
7    Basic,
8    Primary,
9    Secondary,
10    Success,
11    Danger,
12    Warning,
13    Info,
14    Light,
15    Dark,
16    Link,
17}
18
19use super::size::Size;
20use super::background::BackGroundColor;
21
22#[derive(Clone, Props, PartialEq)]
23pub struct NavBarProps {
24    #[props(optional)]
25    id: String,
26    #[props(optional, default = Size::Large)]
27    size: Size,
28    #[props(optional, default = BackGroundColor::Secondary)]
29    background_color: BackGroundColor,
30    children: Element,
31    #[props(optional, default = Some("Navbar".to_string()))]
32    brand: Option<String>,
33    #[props(optional, default = None)]
34    brand_image: Option<Asset>,
35    #[props(optional, default = None)]
36    brand_link_to: Option<NavigationTarget>,
37    #[props(optional, default = None)]
38    toggler_id: Option<String>,
39
40}
41
42#[component]
43pub fn NavBar(props: NavBarProps) -> Element {
44    let size: &str = props.size.into();
45
46    let mut class_list = String::new();
47    class_list.push_str("navbar");
48    class_list.push_str(" ");
49    class_list.push_str(format!("navbar-expand-{}", size).as_str());
50    class_list.push_str(" ");
51    class_list.push_str("navbar-light");
52    class_list.push_str(" ");
53    class_list.push_str(props.background_color.into());
54
55    let img_element = match props.brand_image {
56        Some(img) => rsx! {
57            img {
58                src: img,
59                alt: props.brand.clone().unwrap_or("logo".to_string()),
60                width: "30",
61                height: "24",
62                class: "d-inline-block align-text-top",
63            }
64        },
65        None => rsx!{},
66    };
67
68    rsx! {
69        nav {
70            class: class_list,
71            div {
72                class: "container-fluid",
73                match props.brand {
74                    Some(brand) => match props.brand_link_to {
75                        Some(link_to) => rsx! {
76                            Link {
77                                to: link_to.clone(),
78                                class: "navbar-brand",
79                                {img_element}
80                                "{brand}"
81                            }
82                        },
83                        None => rsx! {
84                            a {
85                                href: "#",
86                                class: "navbar-brand",
87                                {img_element}
88                                "{brand}"
89                            }
90                        },
91                    },
92                    None => rsx!{},
93                }
94            }
95            match props.toggler_id {
96                Some(toggler_id) => rsx! {
97                    button {
98                        class: "navbar-toggler",
99                        type: "button",
100                        r#"data-bs-toggle"#: "collapse",
101                        r#"data-bs-target"#: format!("#{}", toggler_id).as_str(),
102                        aria_label: "toggle",
103                        aria_controls: {toggler_id.clone()},
104                        aria_expanded: "false",
105                        span {
106                            class: "navbar-toggler-icon",
107                        }
108                    }
109                    div {
110                        class: "collapse navbar-collapse",
111                        id: toggler_id,
112                        {props.children}
113                    }
114                },
115                None => props.children,
116            }
117        }
118    }
119}
120
121#[derive(Clone, Props, PartialEq)]
122pub struct NavBarItemProps {
123    #[props(optional)]
124    id: String,
125    #[props(optional)]
126    to: Option<NavigationTarget>,
127    #[props(optional)]
128    href: Option<String>,
129    #[props(optional)]
130    onclick: EventHandler<MouseEvent>,
131    #[props(optional)]
132    onmounted: EventHandler<MountedEvent>,
133}
134#[derive(Clone, Props, PartialEq)]
135pub struct NavBarCollapseProps {
136    #[props(optional)]
137    id: String,
138}
139#[derive(Clone, Props, PartialEq)]
140pub struct NavBarContentProps {
141    #[props(optional)]
142    id: String,
143}
dioxus_bootstrap/nav.rs

dioxus_bootstrap/
nav.rs
