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
61
62
63
64
65
66
67
68
69
70
71
72
73

// SIDEBAR RESIZE
const SCREEN_BREAKPOINT = 1024;

hideOnSmallScreen();
handleCurrentPage();
handleMenuToggle();

function hideOnSmallScreen() {
	const sidebar = document.getElementById("sidebar");
	if (!sidebar) return;

	const hide = () => sidebar.setAttribute("aria-hidden", "true");
	const show = () => sidebar.setAttribute("aria-hidden", "false");

	// Start hidden on small screens
	if (globalThis.innerWidth < SCREEN_BREAKPOINT) hide();

	// Hide/show on resize
	globalThis.addEventListener("resize", () => {
		if (globalThis.innerWidth >= SCREEN_BREAKPOINT) show();
		else hide();
	});
}

function handleMenuToggle() {
	const menuButton = document.getElementById("menu-button");
	const sidebar = document.getElementById("sidebar");

	if (!menuButton || !sidebar) return;
	menuButton.addEventListener("click", () => {
		const isHidden = sidebar.getAttribute("aria-hidden") === "true";
		sidebar.setAttribute("aria-hidden", isHidden ? "false" : "true");
	});
}

/** if the link's url matches the location href, give it the current page attribute */
function handleCurrentPage() {
	// const links = document.querySelectorAll<HTMLAnchorElement>('a.bm-c-sidebar__link')
	// const sublists = document.querySelectorAll<HTMLAnchorElement>('details.bm-c-sidebar__sublist')
	const links = document.querySelectorAll("a.bm-c-sidebar__link");
	const sublists = document.querySelectorAll("details.bm-c-sidebar__sublist");

	// console.log('location', globalThis.location.href)

	// handle show selected
	links.forEach((link) => {
		// console.log('links', link.href)
		if (link.href === globalThis.location.href) {
			link.setAttribute("aria-current", "page");
		} else link.removeAttribute("aria-current");
	});

	// handle open sublists
	sublists.forEach((sublist) => {
		if (
			sublist.hasAttribute("data-always-expand") ||
			sublist.querySelector('a[aria-current="page"]')
		) {
			sublist.setAttribute("open", "true");
		} else {
			sublist.removeAttribute("open");
		}
	});

	// handle sidebar toggle
	links.forEach((link) => {
		link.addEventListener("click", () => {
			if (globalThis.innerWidth < SCREEN_BREAKPOINT) {
				document.getElementById("sidebar").setAttribute("aria-hidden", "true");
			}
		});
	});
}