fc_dioxus/components/
masthead.rs

1//! The application header, from masthead.css.
2use crate::{
3    core::{assets, attrs::component_attributes},
4    prelude::*,
5    theme::use_stylesheets,
6};
7const BEM: Bem = Bem::new("fc-masthead");
8
9/// The top bar: brand, primary navigation, and global actions.
10#[component]
11pub fn Masthead(
12    brand: Element,
13    /// Where the brand links, usually the home page.
14    #[props(default)]
15    href: Option<String>,
16    /// A decorative logo mark before the brand name.
17    #[props(default)]
18    mark: Option<Element>,
19    /// Names the navigation landmark.
20    nav_label: AccessibleName,
21    /// [`MastheadLink`]s.
22    #[props(default)]
23    nav: Option<Element>,
24    #[props(default)] actions: Option<Element>,
25    #[props(default)] class: Option<String>,
26    #[props(extends = GlobalAttributes)] attributes: Vec<Attribute>,
27) -> Element {
28    let attributes = component_attributes(
29        attributes,
30        ClassList::new(BEM.block()).extend(class.as_deref()),
31        &[],
32    );
33    rsx! {
34        if use_stylesheets() { document::Stylesheet { href: assets::COMPONENTS_MASTHEAD_CSS } }
35        header { ..attributes,
36            a { class: BEM.element("brand"), href,
37                if let Some(mark) = mark { span { class: BEM.element("mark"), aria_hidden: "true", {mark} } }
38                {brand}
39            }
40            if let Some(nav) = nav {
41                nav { aria_label: nav_label.to_string(), ul { class: BEM.element("nav"), {nav} } }
42            }
43            if let Some(actions) = actions { div { class: BEM.element("actions"), {actions} } }
44        }
45    }
46}
47
48/// One destination in a [`Masthead`]: a link, or a button given `onclick` and no `href`.
49#[component]
50pub fn MastheadLink(
51    #[props(default)] href: Option<String>,
52    #[props(default)] onclick: Option<EventHandler<MouseEvent>>,
53    #[props(default)] current: bool,
54    #[props(default)] availability: Availability,
55    children: Element,
56) -> Element {
57    rsx! {
58        li { {super::nav_target(BEM.element("link"), href, onclick, current, &availability, Vec::new(), children)} }
59    }
60}
fc_dioxus/components/masthead.rs

fc_dioxus/components/
masthead.rs
