Function DocsSidebar

preview/src/main.rs:696–754

(active_component: Option<&'static str>)

#[component]
fn DocsSidebar(active_component: Option<&'static str>) -> Element {
    let mut open = use_signal(|| false);
    let close = move |_| open.set(false);
    rsx! {
        button {
            class: "dx-docs-sidebar-toggle",
            r#type: "button",
            aria_label: "Open navigation",
            aria_expanded: open(),
            aria_controls: "dx-docs-sidebar-nav",
            onclick: move |_| open.set(true),
            Menu { size: "18" }
            span { "Menu" }
        }
        div {
            class: if open() { "dx-docs-sidebar-backdrop dx-docs-sidebar-backdrop-open" } else { "dx-docs-sidebar-backdrop" },
            aria_hidden: "true",
            onclick: close,
        }
        aside {
            id: "dx-docs-sidebar-nav",
            class: if open() { "dx-docs-sidebar dx-docs-sidebar-open" } else { "dx-docs-sidebar" },
            aria_label: "Docs navigation",
            button {
                class: "dx-docs-sidebar-close",
                r#type: "button",
                aria_label: "Close navigation",
                onclick: close,
                X { size: "18" }
            }
            div { class: "dx-docs-sidebar-scroll",
                nav {
                    aria_label: "Components",
                    onclick: close,
                    div { class: "dx-docs-sidebar-section",
                        p { class: "dx-docs-sidebar-heading", "Start" }
                        Link {
                            to: Route::docs(),
                            class: if active_component.is_none() { "dx-docs-sidebar-link dx-docs-sidebar-link-active" } else { "dx-docs-sidebar-link" },
                            "Overview"
                        }
                    }
                    for cat in components::ComponentCategory::ALL.iter().copied() {
                        div { class: "dx-docs-sidebar-section",
                            p { class: "dx-docs-sidebar-heading", "{cat.label()}" }
                            for component in components::DEMOS.iter().filter(|c| components::category_of(c.name) == cat) {
                                Link {
                                    to: Route::component(component.name),
                                    class: if active_component == Some(component.name) { "dx-docs-sidebar-link dx-docs-sidebar-link-active" } else { "dx-docs-sidebar-link" },
                                    {component.name.replace("_", " ")}
                                }
                            }
                        }
                    }
                }
            }
        }
    }