jjj 0.2.1

A modal interface for Jujutsu.
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

---
import Icon from '../user-components/Icon.astro';
---

<starlight-menu-button class="print:hidden">
	<button
		aria-expanded="false"
		aria-label={Astro.locals.t('menuButton.accessibleLabel')}
		aria-controls="starlight__sidebar"
		class="sl-flex md:sl-hidden"
	>
		<Icon name="bars" />
	</button>
</starlight-menu-button>

<script>
	class StarlightMenuButton extends HTMLElement {
		btn = this.querySelector('button')!;

		constructor() {
			super();
			// Toggle `aria-expanded` state when a user clicks the button.
			this.btn.addEventListener('click', () => this.toggleExpanded());

			// Close the menu when a user presses the escape key.
			const parentNav = this.closest('nav');
			if (parentNav) {
				parentNav.addEventListener('keyup', (e) => this.closeOnEscape(e));
			}
		}

		setExpanded(expanded: boolean) {
			this.setAttribute('aria-expanded', String(expanded));
			document.body.toggleAttribute('data-mobile-menu-expanded', expanded);
		}

		toggleExpanded() {
			this.setExpanded(this.getAttribute('aria-expanded') !== 'true');
		}

		closeOnEscape(e: KeyboardEvent) {
			if (e.code === 'Escape') {
				this.setExpanded(false);
				this.btn.focus();
			}
		}
	}

	customElements.define('starlight-menu-button', StarlightMenuButton);
</script>

<style>
	button {
		position: fixed;
		top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
		inset-inline-end: var(--sl-nav-pad-x);
		z-index: var(--sl-z-index-navbar);
		border: 0;
		border-radius: 50%;
		width: var(--sl-menu-button-size);
		height: var(--sl-menu-button-size);
		padding: 0.5rem;
		background-color: var(--sl-color-white);
		color: var(--sl-color-black);
		box-shadow: var(--sl-shadow-md);
		cursor: pointer;
	}

	[aria-expanded='true'] button {
		background-color: var(--sl-color-gray-2);
		box-shadow: none;
	}

	:global([data-theme='light']) button {
		background-color: var(--sl-color-black);
		color: var(--sl-color-white);
	}

	:global([data-theme='light']) [aria-expanded='true'] button {
		background-color: var(--sl-color-gray-5);
	}
</style>

<style is:global>
	[data-mobile-menu-expanded] {
		overflow: hidden;
	}

	@media (min-width: 50rem) {
		[data-mobile-menu-expanded] {
			overflow: auto;
		}
	}
</style>