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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

//! # `NavItem`
//!
//! Semantic list item wrapper for navigation links.
//! Renders a `<li>` with `role="listitem"` and optional disabled state.
//!
//! # Example
//!
//! ```rust
//! use yew::prelude::*;
//! use yew_nav_link::{NavItem, NavLink, NavList};
//! use yew_router::prelude::*;
//!
//! # #[derive(Clone, PartialEq, Routable)]
//! # enum Route {
//! #     #[at("/")]
//! #     Home,
//! # }
//! #[component]
//! fn Nav() -> Html {
//!     html! {
//!         <NavList>
//!             <NavItem>
//!                 <NavLink<Route> to={Route::Home}>{ "Home" }</NavLink<Route>>
//!             </NavItem>
//!             <NavItem disabled=true>
//!                 { "Settings (disabled)" }
//!             </NavItem>
//!         </NavList>
//!     }
//! }
//! ```
//!
//! # CSS Classes
//!
//! | Class | Condition |
//! |-------|-----------|
//! | `nav-item` | Always applied |
//! | `disabled` | Applied when `disabled` is `true` |
//!
//! # Props
//!
//! | Prop | Type | Default | Description |
//! |------|------|---------|-------------|
//! | `disabled` | `bool` | `false` | Disabled state |
//! | `classes` | `Classes` | — | Additional CSS classes |
//! | `children` | `Children` | — | Item content |

use yew::prelude::*;

/// Properties for the [`NavItem`] component.
///
/// | Prop | Type | Default | Description |
/// |------|------|---------|-------------|
/// | `disabled` | `bool` | `false` | Disabled state |
/// | `classes` | `Classes` | — | Additional CSS classes |
/// | `children` | `Children` | — | Item content |
#[derive(Properties, Clone, PartialEq, Debug)]
pub struct NavItemProps {
    /// Additional CSS classes applied to the item.
    #[prop_or_default]
    pub classes: Classes,

    /// Whether the navigation item is disabled.
    #[prop_or_default]
    pub disabled: bool,

    /// Content rendered inside the item, typically a
    /// [`NavLink`](crate::NavLink).
    #[prop_or_default]
    pub children: Children
}

/// Semantic list item wrapper for navigation links.
///
/// Renders a `<li>` element with `role="listitem"`.
///
/// # CSS Classes
///
/// - `nav-item` - Always applied
/// - `disabled` - Applied when `disabled` is `true`
#[function_component]
pub fn NavItem(props: &NavItemProps) -> Html {
    let mut classes = props.classes.clone();
    classes.push("nav-item");

    if props.disabled {
        classes.push("disabled");
        html! {
            <li {classes} role="listitem" aria-disabled="true">
                { for props.children.iter() }
            </li>
        }
    } else {
        html! {
            <li {classes} role="listitem">
                { for props.children.iter() }
            </li>
        }
    }
}

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

    #[test]
    fn nav_item_props_default() {
        let props = NavItemProps {
            classes:  Classes::default(),
            disabled: false,
            children: Children::new(vec![])
        };

        assert!(props.classes.is_empty());
        assert!(!props.disabled);
    }

    #[test]
    fn nav_item_props_disabled() {
        let props = NavItemProps {
            classes:  Classes::default(),
            disabled: true,
            children: Children::new(vec![])
        };

        assert!(props.disabled);
    }

    #[test]
    fn nav_item_props_with_class() {
        let props = NavItemProps {
            classes:  Classes::from("my-item"),
            disabled: false,
            children: Children::new(vec![])
        };

        assert!(props.classes.contains("my-item"));
    }

    #[test]
    fn nav_item_props_clone() {
        let props1 = NavItemProps {
            classes:  Classes::from("test"),
            disabled: true,
            children: Children::new(vec![])
        };

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

    #[test]
    fn nav_item_disabled_state() {
        let enabled = NavItemProps {
            classes:  Classes::default(),
            disabled: false,
            children: Children::new(vec![])
        };

        let disabled = NavItemProps {
            classes:  Classes::default(),
            disabled: true,
            children: Children::new(vec![])
        };

        assert_ne!(enabled, disabled);
    }
}