---
import type { Props } from '../props';
import Icon from '../user-components/Icon.astro';

const { labels } = Astro.props;
---

<starlight-menu-button>
	<button
		aria-expanded="false"
		aria-label={labels['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>