yew-nav-link 0.9.0

Navigation link component for Yew with automatic active state detection
Documentation 
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
117
118
119
120
121

//! # `NavHeader`
//!
//! Section header for labeling groups within a navigation list.
//! Renders a `<li>` with `role="presentation"` and the `nav-header` class.
//!
//! # Example
//!
//! ```rust
//! use yew::prelude::*;
//! use yew_nav_link::{NavHeader, NavItem, NavLink, NavList};
//! use yew_router::prelude::*;
//!
//! # #[derive(Clone, PartialEq, Routable)]
//! # enum Route {
//! #     #[at("/")]
//! #     Home,
//! #     #[at("/about")]
//! #     About,
//! # }
//! #[component]
//! fn Nav() -> Html {
//!     html! {
//!         <NavList>
//!             <NavHeader text="Main" />
//!             <NavItem><NavLink<Route> to={Route::Home}>{ "Home" }</NavLink<Route>></NavItem>
//!             <NavHeader text="Info" />
//!             <NavItem><NavLink<Route> to={Route::About}>{ "About" }</NavLink<Route>></NavItem>
//!         </NavList>
//!     }
//! }
//! ```
//!
//! # CSS Classes
//!
//! | Class | Condition |
//! |-------|-----------|
//! | `nav-header` | Always applied |
//! | `nav-header-text` | Inner text span |
//!
//! # Props
//!
//! | Prop | Type | Default | Description |
//! |------|------|---------|-------------|
//! | `text` | `Option<&'static str>` | `None` | Header text label |
//! | `classes` | `Classes` | — | Additional CSS classes |
//! | `children` | `Children` | — | Content when `text` is `None` |

use yew::prelude::*;

/// Properties for the [`NavHeader`] component.
///
/// | Prop | Type | Default | Description |
/// |------|------|---------|-------------|
/// | `text` | `Option<&'static str>` | `None` | Header text label |
/// | `classes` | `Classes` | — | Additional CSS classes |
/// | `children` | `Children` | — | Content when `text` is `None` |
#[derive(Properties, Clone, PartialEq, Debug)]
pub struct NavHeaderProps {
    /// Additional CSS classes applied to the header.
    #[prop_or_default]
    pub classes: Classes,

    /// Text label displayed in the header. If set, overrides `children`.
    #[prop_or_default]
    pub text: Option<&'static str>,

    /// Content rendered inside the header when `text` is `None`.
    #[prop_or_default]
    pub children: Children
}

/// Header component for labeling sections within a navigation list.
///
/// Renders a `<li>` with `role="presentation"` and the `nav-header` class.
#[function_component]
pub fn NavHeader(props: &NavHeaderProps) -> Html {
    let mut classes = props.classes.clone();
    classes.push("nav-header");

    if let Some(text) = props.text {
        html! {
            <li {classes} role="presentation">
                <span class="nav-header-text">{ text }</span>
            </li>
        }
    } else {
        html! {
            <li {classes} role="presentation">
                { for props.children.iter() }
            </li>
        }
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn nav_header_props_with_text() {
        let props = NavHeaderProps {
            classes:  Classes::default(),
            text:     Some("Header"),
            children: Children::new(vec![])
        };

        assert_eq!(props.text, Some("Header"));
    }

    #[test]
    fn nav_header_clone() {
        let props1 = NavHeaderProps {
            classes:  Classes::default(),
            text:     Some("Header"),
            children: Children::new(vec![])
        };

        let props2 = props1.clone();
        assert_eq!(props1.text, props2.text);
    }
}