yggdrasil/components/

header.rs

//! 顶部导航栏组件
//!
//! 提供站点 Logo、响应式导航菜单项与右侧自定义内容区，
//! 支持前台布局与后台布局复用，并包含小屏幕下的汉堡菜单。

use dioxus::prelude::*;
use dioxus::router::components::Link;

use crate::router::Route;

/// 导航项配置，用于描述 Header 中的一个链接。
///
/// 字段：
/// - `route`：目标路由
/// - `label`：显示文本
/// - `is_active`：当前是否处于激活状态
#[derive(Clone, PartialEq)]
pub struct NavItemConfig {
    /// 目标路由。
    pub route: Route,
    /// 显示文本。
    pub label: &'static str,
    /// 当前是否处于激活状态。
    pub is_active: bool,
}

/// 顶部导航栏组件。
///
/// Props：
/// - `nav_items`：导航项列表
/// - `right_content`：右侧自定义内容（如主题切换、登出按钮）
/// - `max_width`：内部导航的宽度类，需与正文 `max-w-*` 一致以保证左右边缘对齐。
///   默认 `max-w-3xl`（前台阅读宽度）；后台传 `max-w-5xl` 与之同宽。
/// - `menu_id`：小屏菜单的稳定 DOM ID；同页有多个 Header 时必须各不相同。
/// - `on_demo_navigate`：图鉴用局部导航回调；正式页面省略以保留 Link 行为。
/// - `page_shell`：图鉴实例设 false，避免被页面过渡系统识别为真实站点外壳。
#[component]
pub fn Header(
    nav_items: Vec<NavItemConfig>,
    right_content: Element,
    #[props(default = "max-w-3xl")] max_width: &'static str,
    #[props(default = "mobile-nav-menu")] menu_id: &'static str,
    #[props(default)] on_demo_navigate: Option<EventHandler<&'static str>>,
    #[props(default = true)] page_shell: bool,
) -> Element {
    let mut mobile_open = use_signal(|| false);

    let is_open = mobile_open();
    let burger_icon_class = if is_open {
        "w-6 h-6 absolute transition-all duration-300 transform rotate-90 opacity-0 scale-75"
    } else {
        "w-6 h-6 absolute transition-all duration-300 transform rotate-0 opacity-100 scale-100"
    };
    let close_icon_class = if is_open {
        "w-6 h-6 absolute transition-all duration-300 transform rotate-0 opacity-100 scale-100"
    } else {
        "w-6 h-6 absolute transition-all duration-300 transform -rotate-90 opacity-0 scale-75"
    };
    let panel_class = if is_open {
        "mobile-nav-panel md:hidden bg-paper-theme/95 backdrop-blur-sm is-open"
    } else {
        "mobile-nav-panel md:hidden bg-paper-theme/95 backdrop-blur-sm"
    };
    rsx! {
        header { "data-vt-shell": page_shell.then_some("frontend-header"), class: "sticky top-0 z-40 w-full bg-[var(--color-paper-theme)]/70 backdrop-blur-md transition-all duration-300",
            nav { class: "{max_width} mx-auto px-6 h-16 flex items-center justify-between",
                if let Some(on_navigate) = on_demo_navigate {
                    button {
                        class: "text-2xl font-extrabold tracking-tight text-[var(--color-paper-primary)] hover:text-[var(--color-paper-accent)] transition-colors duration-200",
                        r#type: "button",
                        onclick: move |_| on_navigate.call("首页"),
                        "Yggdrasil"
                    }
                } else {
                    Link {
                        class: "text-2xl font-extrabold tracking-tight text-[var(--color-paper-primary)] hover:text-[var(--color-paper-accent)] transition-colors duration-200",
                        to: Route::Home {},
                        "Yggdrasil"
                    }
                }
                div { class: "flex items-center gap-2",
                    // 桌面端导航
                    ul { class: "hidden md:flex items-center gap-1",
                        for item in nav_items.iter().cloned() {
                            NavItem {
                                key: "{item.label}",
                                route: item.route,
                                label: item.label,
                                is_active: item.is_active,
                                on_demo_navigate,
                            }
                        }
                    }

                    {right_content}

                    // 移动端汉堡菜单按钮
                    button {
                        class: "md:hidden p-2 rounded-lg text-paper-secondary hover:text-paper-primary hover:bg-paper-entry transition-colors relative flex items-center justify-center w-10 h-10 overflow-hidden",
                        r#type: "button",
                        aria_label: if is_open { "关闭导航菜单" } else { "打开导航菜单" },
                        aria_expanded: is_open,
                        aria_controls: menu_id,
                        onclick: move |_| mobile_open.set(!mobile_open()),
                        // 汉堡图标
                        svg {
                            class: "{burger_icon_class}",
                            fill: "none",
                            stroke: "currentColor",
                            view_box: "0 0 24 24",
                            path {
                                stroke_linecap: "round",
                                stroke_linejoin: "round",
                                stroke_width: "2",
                                d: "M4 6h16M4 12h16M4 18h16",
                            }
                        }
                        // 关闭图标（X）
                        svg {
                            class: "{close_icon_class}",
                            fill: "none",
                            stroke: "currentColor",
                            view_box: "0 0 24 24",
                            path {
                                stroke_linecap: "round",
                                stroke_linejoin: "round",
                                stroke_width: "2",
                                d: "M6 18L18 6M6 6l12 12",
                            }
                        }
                    }
                }
            }

            // 移动端导航面板（常驻 DOM 以支持展开/折叠双向平滑动画）
            div { id: menu_id, class: "{panel_class}",
                div { class: "mobile-nav-content",
                    ul { class: "py-2 px-6 space-y-1",
                        for item in nav_items.iter().cloned() {
                            li { key: "{item.label}", class: "mobile-nav-item",
                                MobileNavItem {
                                    route: item.route,
                                    label: item.label,
                                    is_active: item.is_active,
                                    on_demo_navigate,
                                    on_navigate: move |_| mobile_open.set(false),
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/// 单个桌面导航项组件，根据 `is_active` 切换高亮样式。
#[component]
fn NavItem(
    route: Route,
    label: &'static str,
    is_active: bool,
    on_demo_navigate: Option<EventHandler<&'static str>>,
) -> Element {
    let base_class =
        "relative inline-flex px-3 py-1 text-base rounded-lg transition-colors duration-200 whitespace-nowrap shrink-0";
    let class_str = if is_active {
        format!("{} font-medium text-paper-accent", base_class)
    } else {
        format!(
            "{} text-paper-secondary hover:text-paper-primary",
            base_class
        )
    };

    rsx! {
        li {
            if let Some(on_navigate) = on_demo_navigate {
                button {
                    class: "{class_str}",
                    r#type: "button",
                    aria_current: is_active.then_some("page"),
                    onclick: move |_| on_navigate.call(label),
                    "{label}"
                    if is_active { span { class: "nav-indicator", "aria-hidden": "true" } }
                }
            } else {
                Link {
                    class: "{class_str}",
                    to: route,
                    aria_current: is_active.then_some("page"),
                    "{label}"
                    if is_active { span { class: "nav-indicator", "aria-hidden": "true" } }
                }
            }
        }
    }
}

/// 单个移动端导航项组件，点击后关闭菜单。
#[component]
fn MobileNavItem(
    route: Route,
    label: &'static str,
    is_active: bool,
    on_demo_navigate: Option<EventHandler<&'static str>>,
    on_navigate: EventHandler<()>,
) -> Element {
    let class_str = if is_active {
        "block w-full px-3 py-2 text-base font-medium text-paper-accent rounded-lg bg-paper-entry transition-colors"
    } else {
        "block w-full px-3 py-2 text-base text-paper-secondary hover:text-paper-primary hover:bg-paper-entry rounded-lg transition-colors"
    };

    rsx! {
        if let Some(demo_navigate) = on_demo_navigate {
            button {
                class: "{class_str}",
                r#type: "button",
                aria_current: is_active.then_some("page"),
                onclick: move |_| {
                    demo_navigate.call(label);
                    on_navigate.call(());
                },
                "{label}"
            }
        } else {
            Link {
                class: "{class_str}",
                to: route,
                aria_current: is_active.then_some("page"),
                onclick: move |_| on_navigate.call(()),
                "{label}"
            }
        }
    }
}

/// 搜索图标链接：置于 Header 右侧（主题切换左边），点击跳转搜索页。
/// 顶部导航栏右侧的搜索入口链接。
///
/// 默认自动根据全局路由匹配判断激活状态；支持通过 `active` 属性显式覆盖，
/// 以及通过 `on_click` 拦截默认跳转行为以支持弹层或自定义检索交互。
/// 样式与 `ThemeToggle` 对齐（圆形 padding + currentColor 图标），保持右侧
/// 图标组视觉一致。图标采用项目标准线性放大镜（与 `/search` 页面风格一致）。
#[component]
pub fn SearchIconLink(
    /// 可选显式覆盖激活状态。默认为随全局路由自动感知 (`Route::Search`).
    #[props(default)]
    active: Option<bool>,
    /// 可选点击事件回调。若提供，将拦截默认路由跳转。
    #[props(default)]
    on_click: Option<EventHandler<MouseEvent>>,
) -> Element {
    let route_active = matches!(use_route::<Route>(), Route::Search {});
    let is_active = active.unwrap_or(route_active);
    let color = if is_active {
        "text-paper-accent"
    } else {
        "text-paper-secondary hover:text-paper-accent"
    };
    rsx! {
        Link {
            class: "relative p-2 rounded-full {color} transition-colors duration-200",
            to: Route::Search {},
            aria_current: is_active.then_some("page"),
            aria_label: "搜索",
            title: "搜索",
            onclick: move |e: MouseEvent| {
                if let Some(ref handler) = on_click {
                    e.prevent_default();
                    handler.call(e);
                }
            },
            svg {
                xmlns: "http://www.w3.org/2000/svg",
                class: "w-6 h-6 shrink-0",
                view_box: "0 0 24 24",
                fill: "none",
                stroke: "currentColor",
                stroke_width: "1.6",
                stroke_linecap: "round",
                stroke_linejoin: "round",
                "aria-hidden": "true",
                circle { cx: "10.75", cy: "10.75", r: "6.75" }
                path { d: "m16 16 4.5 4.5" }
            }
            if is_active {
                span { class: "nav-indicator hidden md:block", "aria-hidden": "true" }
            }
        }
    }
}