zino_dioxus/navigation/
navbar.rs

1use crate::{class::Class, extension::VNodeExt};
2use dioxus::prelude::*;
3use dioxus_router::{components::Link, navigation::NavigationTarget};
4
5/// A responsive navigation header.
6pub fn Navbar(props: NavbarProps) -> Element {
7    let children = props.children?;
8    if children.has_component("NavbarBrand") {
9        rsx! {
10            nav {
11                class: props.class,
12                { children }
13            }
14        }
15    } else {
16        rsx! {
17            nav {
18                class: props.class,
19                NavbarMenu {
20                    { children }
21                }
22            }
23        }
24    }
25}
26
27/// The [`Navbar`] properties struct for the configuration of the component.
28#[derive(Clone, PartialEq, Props)]
29pub struct NavbarProps {
30    /// The class attribute for the component.
31    #[props(into, default = "navbar is-link")]
32    pub class: Class,
33    /// The children to render within the component.
34    children: Element,
35}
36
37/// A container for the logo and optionally some links or icons.
38pub fn NavbarBrand(props: NavbarBrandProps) -> Element {
39    rsx! {
40        div {
41            class: props.class,
42            { props.children }
43        }
44    }
45}
46
47/// The [`NavbarBrand`] properties struct for the configuration of the component.
48#[derive(Clone, PartialEq, Props)]
49pub struct NavbarBrandProps {
50    /// The class attribute for the component.
51    #[props(into, default = "navbar-brand")]
52    pub class: Class,
53    /// The children to render within the component.
54    children: Element,
55}
56
57/// A horizontal menu used in the navigation header.
58pub fn NavbarMenu(props: NavbarMenuProps) -> Element {
59    rsx! {
60        div {
61            class: props.class,
62            { props.children }
63        }
64    }
65}
66
67/// The [`NavbarMenu`] properties struct for the configuration of the component.
68#[derive(Clone, PartialEq, Props)]
69pub struct NavbarMenuProps {
70    /// The class attribute for the component.
71    #[props(into, default = "navbar-menu is-active")]
72    pub class: Class,
73    /// The children to render within the component.
74    children: Element,
75}
76
77/// The left section of the navbar menu.
78pub fn NavbarStart(props: NavbarStartProps) -> Element {
79    rsx! {
80        div {
81            class: props.class,
82            { props.children }
83        }
84    }
85}
86
87/// The [`NavbarStart`] properties struct for the configuration of the component.
88#[derive(Clone, PartialEq, Props)]
89pub struct NavbarStartProps {
90    /// The class attribute for the component.
91    #[props(into, default = "navbar-start")]
92    pub class: Class,
93    /// The children to render within the component.
94    children: Element,
95}
96
97/// The middle section of the navbar menu.
98pub fn NavbarCenter(props: NavbarCenterProps) -> Element {
99    rsx! {
100        div {
101            class: props.class,
102            { props.children }
103        }
104    }
105}
106
107/// The [`NavbarCenter`] properties struct for the configuration of the component.
108#[derive(Clone, PartialEq, Props)]
109pub struct NavbarCenterProps {
110    /// The class attribute for the component.
111    #[props(into, default = "navbar-center")]
112    pub class: Class,
113    /// The children to render within the component.
114    children: Element,
115}
116
117/// The right section of the navbar menu.
118pub fn NavbarEnd(props: NavbarEndProps) -> Element {
119    rsx! {
120        div {
121            class: props.class,
122            { props.children }
123        }
124    }
125}
126
127/// The [`NavbarEnd`] properties struct for the configuration of the component.
128#[derive(Clone, PartialEq, Props)]
129pub struct NavbarEndProps {
130    /// The class attribute for the component.
131    #[props(into, default = "navbar-end")]
132    pub class: Class,
133    /// The children to render within the component.
134    children: Element,
135}
136
137/// An interactive dropdown menu in the navbar.
138pub fn NavbarDropdown(props: NavbarDropdownProps) -> Element {
139    rsx! {
140        div {
141            class: "navbar-item has-dropdown is-hoverable",
142            a {
143                class: "{props.button_class}",
144                class: if props.arrowless { "is-arrowless" },
145                { props.button }
146            }
147            div {
148                class: props.class,
149                { props.children }
150            }
151        }
152    }
153}
154
155/// The [`NavbarDropdown`] properties struct for the configuration of the component.
156#[derive(Clone, PartialEq, Props)]
157pub struct NavbarDropdownProps {
158    /// The class attribute for the component.
159    #[props(into, default = "navbar-dropdown")]
160    pub class: Class,
161    /// A class to apply to the trigger button element.
162    #[props(into, default = "navbar-link")]
163    pub button_class: Class,
164    /// A flag to indicate whether the trigger button has an arrow or not.
165    #[props(default)]
166    pub arrowless: bool,
167    /// The trigger button for the dropdown menu.
168    pub button: Element,
169    /// The children to render within the component.
170    children: Element,
171}
172
173/// A link to navigate to another route in the navigation header.
174pub fn NavbarLink(props: NavbarLinkProps) -> Element {
175    rsx! {
176        Link {
177            class: props.class.to_string(),
178            active_class: props.active_class.to_string(),
179            to: props.to,
180            { props.children }
181        }
182    }
183}
184
185/// The [`NavbarLink`] properties struct for the configuration of the component.
186#[derive(Clone, PartialEq, Props)]
187pub struct NavbarLinkProps {
188    /// The class attribute for the component.
189    #[props(into, default = "navbar-item")]
190    pub class: Class,
191    /// A class to apply to the generate HTML anchor tag if the `target` route is active.
192    #[props(into, default = "is-active")]
193    pub active_class: Class,
194    /// The navigation target. Roughly equivalent to the href attribute of an HTML anchor tag.
195    #[props(into)]
196    pub to: NavigationTarget,
197    /// The children to render within the component.
198    children: Element,
199}
200
201/// A container for each single item of the navbar.
202pub fn NavbarItem(props: NavbarItemProps) -> Element {
203    rsx! {
204        div {
205            class: props.class,
206            { props.children }
207        }
208    }
209}
210
211/// The [`NavbarItem`] properties struct for the configuration of the component.
212#[derive(Clone, PartialEq, Props)]
213pub struct NavbarItemProps {
214    /// The class attribute for the component.
215    #[props(into, default = "navbar-item")]
216    pub class: Class,
217    /// The children to render within the component.
218    children: Element,
219}
zino_dioxus/navigation/navbar.rs

zino_dioxus/navigation/
navbar.rs
