beet_design 0.0.8

Design system and components for beet rsx
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

use crate::prelude::*;

#[template]
pub fn SidebarItem(node: SidebarNode, root: bool) -> impl Bundle {
	let SidebarNode {
		display_name,
		path,
		children,
		expanded,
	} = node;
	// let items = tree.
	let class = if root { "root" } else { "" };

	let inner = if children.is_empty()
		&& let Some(path) = path
	{
		rsx! {
			<a class="leaf bm-c-sidebar__link" href=path.to_string()>
				// aria-current={
				// // handled in js but this avoids FOUC
				// entry.isCurrent && 'page'
				// }
				// class:list={[{ large: root }]}
				{display_name}
			</a>
		}
		.any_bundle()
	} else {
		let children = children
			.into_iter()
			.map(|node| rsx! {<SidebarItem node=node root=false/>})
			.collect::<Vec<_>>();

		let item = if let Some(path) = path {
			rsx! {
				<a class="large bm-c-sidebar__link" href=path.to_string()>
					{display_name}
				</a>
			}
			.any_bundle()
		} else {
			rsx! { <span class="large">{display_name}</span> }.any_bundle()
		};

		rsx! {
			// {group}
			<details class="bm-c-sidebar__sublist" data-always-expand=expanded>
				// open is handled in js
				<summary>{item}</summary>
				<ul class=class>{children}</ul>
			</details>
		}
		.any_bundle()
	};

	rsx! {
		<li class=class>{inner}</li>
		<style src="./sidebar_item.css" />
	}
}