repose_material/material3/
nav_bar.rs

1#![allow(non_snake_case)]
2
3use std::rc::Rc;
4use std::sync::atomic::{AtomicU64, Ordering};
5
6use repose_core::animation::AnimationSpec;
7use repose_core::*;
8use repose_ui::{
9    Box, Column, Row, Text, TextStyle,
10    ViewExt,
11    anim::{animate_color, animate_f32},
12};
13
14use super::*;
15
16static NAVBAR_COUNTER: AtomicU64 = AtomicU64::new(0);
17
18/// Configuration for [`NavigationBar`].
19#[derive(Clone, Debug)]
20pub struct NavigationBarConfig {
21    pub modifier: Modifier,
22    pub container_color: Color,
23    pub content_color: Color,
24    pub selected_icon_color: Color,
25    pub selected_text_color: Color,
26    pub unselected_icon_color: Color,
27    pub unselected_text_color: Color,
28    pub indicator_color: Color,
29    pub height: f32,
30    pub tonal_elevation: f32,
31    pub indicator_opacity: f32,
32    pub indicator_radius: f32,
33    pub item_spacing: f32,
34    pub indicator_width: f32,
35    pub indicator_height: f32,
36}
37
38impl Default for NavigationBarConfig {
39    fn default() -> Self {
40        Self {
41            modifier: Modifier::new(),
42            container_color: NavigationBarDefaults::container_color(),
43            content_color: NavigationBarDefaults::content_color(),
44            selected_icon_color: NavigationBarDefaults::selected_icon_color(),
45            selected_text_color: NavigationBarDefaults::selected_text_color(),
46            unselected_icon_color: NavigationBarDefaults::unselected_icon_color(),
47            unselected_text_color: NavigationBarDefaults::unselected_text_color(),
48            indicator_color: NavigationBarDefaults::indicator_color(),
49            height: NavigationBarDefaults::HEIGHT,
50            tonal_elevation: NavigationBarDefaults::TONAL_ELEVATION,
51            indicator_opacity: NavigationBarDefaults::ITEM_ACTIVE_INDICATOR_OPACITY,
52            indicator_radius: NavigationBarDefaults::INDICATOR_RADIUS,
53            item_spacing: NavigationBarDefaults::ITEM_SPACING,
54            indicator_width: NavigationBarDefaults::ACTIVE_INDICATOR_WIDTH,
55            indicator_height: NavigationBarDefaults::ACTIVE_INDICATOR_HEIGHT,
56        }
57    }
58}
59
60/// M3 Navigation Bar - a bottom navigation bar with animated selection.
61/// Colors and indicator background transition with 200ms FastOutSlowIn.
62pub fn NavigationBar(
63    selected_index: usize,
64    items: Vec<NavItem>,
65    config: NavigationBarConfig,
66) -> View {
67    let th = theme();
68    let id = remember(|| NAVBAR_COUNTER.fetch_add(1, Ordering::Relaxed));
69
70    let mut bar_m = Modifier::new()
71        .fill_max_size()
72        .min_height(config.height)
73        .background(config.container_color)
74        .then(config.modifier);
75
76    if config.tonal_elevation > 0.0 {
77        bar_m = bar_m.state_elevation(StateElevation {
78            default: config.tonal_elevation,
79            hovered: config.tonal_elevation,
80            pressed: config.tonal_elevation,
81            dragged: config.tonal_elevation,
82            disabled: 0.0,
83        });
84    }
85
86    Box(bar_m).child(
87        Row(Modifier::new()
88            .fill_max_size()
89            .align_items(AlignItems::CENTER)
90            .column_gap(config.item_spacing)
91            .semantics(Semantics::new(Role::Container).with_selectable_group()))
92        .child(
93            items
94                .into_iter()
95                .enumerate()
96                .map(|(i, item)| {
97                    let selected = i == selected_index;
98                    let is_enabled = item.enabled;
99                    let default_effects = AnimationSpec::spring_crit(40.0);
100                    let fg_icon = animate_color(
101                        format!("nb_fi_{}_{}", id, i),
102                        if selected {
103                            config.selected_icon_color
104                        } else {
105                            config.unselected_icon_color
106                        },
107                        default_effects,
108                    );
109                    let fg_label = animate_color(
110                        format!("nb_fl_{}_{}", id, i),
111                        if selected {
112                            config.selected_text_color
113                        } else {
114                            config.unselected_text_color
115                        },
116                        default_effects,
117                    );
118                    let bg_alpha = animate_f32(
119                        format!("nb_bg_{}_{}", id, i),
120                        if selected { 1.0 } else { 0.0 },
121                        default_effects,
122                    );
123                    let indicator_bg = config
124                        .indicator_color
125                        .with_alpha_f32(bg_alpha * config.indicator_opacity);
126                    let cb = item.on_click.clone();
127                    let nb_source: Rc<MutableInteractionSource> = item
128                        .interaction_source
129                        .clone()
130                        .map(Rc::new)
131                        .unwrap_or_else(|| remember(MutableInteractionSource::new));
132
133                    let mut item_m = Modifier::new()
134                        .flex_grow(1.0)
135                        .interaction_source(&*nb_source)
136                        .semantics(Semantics::new(Role::Tab).with_label(&item.label));
137
138                    if is_enabled {
139                        item_m = item_m.clickable().on_click({
140                            let cb = cb.clone();
141                            move || cb()
142                        });
143                    }
144
145                    Box(item_m).child(
146                        Column(
147                            Modifier::new()
148                                .fill_max_size()
149                                .align_items(AlignItems::CENTER)
150                                .justify_content(JustifyContent::CENTER),
151                        )
152                        .child((
153                            // Indicator pill behind icon
154                            Column(
155                                Modifier::new()
156                                    .align_items(AlignItems::CENTER)
157                                    .justify_content(JustifyContent::CENTER),
158                            )
159                            .child((
160                                Box(Modifier::new()
161                                    .absolute()
162                                    .offset(
163                                        Some((24.0 - config.indicator_width) / 2.0),
164                                        Some((24.0 - config.indicator_height) / 2.0),
165                                        None,
166                                        None,
167                                    )
168                                    .width(config.indicator_width)
169                                    .height(config.indicator_height)
170                                    .background(indicator_bg)
171                                    .clip_rounded(config.indicator_radius)
172                                    .state_colors(StateColors {
173                                        default: Color::TRANSPARENT,
174                                        hovered: th.on_surface.with_alpha_f32(0.08),
175                                        pressed: th.on_surface.with_alpha_f32(0.12),
176                                        dragged: th.on_surface.with_alpha_f32(0.12),
177                                        disabled: Color::TRANSPARENT,
178                                    })),
179                                with_content_color(fg_icon, move || item.icon),
180                            )),
181                            // 8dp gap: 4dp IndicatorVerticalPadding + 4dp IndicatorToLabelPadding
182                            Box(Modifier::new().height(8.0)),
183                            Text(item.label)
184                                .color(fg_label)
185                                .size(th.typography.label_medium)
186                                .single_line(),
187                        )),
188                    )
189                })
190                .collect::<Vec<_>>(),
191        ),
192    )
193}
194
195pub struct NavItem {
196    pub icon: View,
197    pub label: String,
198    pub on_click: Rc<dyn Fn()>,
199    pub enabled: bool,
200    pub interaction_source: Option<MutableInteractionSource>,
201}
repose_material/material3/nav_bar.rs

repose_material/material3/
nav_bar.rs
