Skip to main content

euv_ui/component/doc_layout/view/
fn.rs

1use super::*;
2
3/// A generic documentation page layout aligned with common site frameworks
4/// (VuePress default theme `Page`, Docusaurus doc item): a fluid content
5/// column with the page body as children, `euv_pagination` prev/next links
6/// and an optional footer, plus a sticky right `euv_toc` anchor column that
7/// collapses on narrow viewports.
8///
9/// # Arguments
10///
11/// - `VirtualNode<EuvDocLayoutProps>` - The props node.
12///
13/// # Returns
14///
15/// - `VirtualNode` - The doc page layout virtual DOM tree.
16#[component]
17pub fn euv_doc_layout(node: VirtualNode<EuvDocLayoutProps>) -> VirtualNode {
18    let EuvDocLayoutProps {
19        toc_title,
20        toc_items,
21        prev_label,
22        next_label,
23        prev,
24        next,
25        footer,
26    }: EuvDocLayoutProps = node.try_get_props().unwrap_or_default();
27    let children: VirtualNode = node.get_child_node();
28    html! {
29        div {
30            class: c_euv_doc_layout()
31            div {
32                class: c_euv_doc_content()
33                children
34                euv_pagination {
35                    prev_label
36                    next_label
37                    prev
38                    next
39                }
40                if { !footer.is_empty() } {
41                    footer {
42                        class: c_euv_footer()
43                        {
44                            footer
45                        }
46                    }
47                }
48            }
49            if { !toc_items.is_empty() } {
50                div {
51                    class: c_euv_doc_toc()
52                    euv_toc {
53                        title: toc_title
54                        items: toc_items
55                    }
56                }
57            }
58        }
59    }
60}