---
import { ChevronDownIcon, Bars3Icon, XMarkIcon } from '@heroicons/react/20/solid'
---

<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"
	>
		<Bars3Icon name="open" className="open-menu" />	
		<XMarkIcon name="close" className="close-menu" />	
	</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>
	@layer starlight.core {
		button {
			position: fixed;
			bottom: var(--sl-nav-pad-y);
			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;
		}

		[aria-expanded='true'] button .open-menu {
			display: none;
		}

		:not([aria-expanded='true']) button .close-menu {
			display: none;
		}

		:global button {
			background-color: var(--sl-color-black);
			color: var(--sl-color-white);
		}

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

<style is:global>
	@layer starlight.core {
		[data-mobile-menu-expanded] {
			overflow: hidden;
		}

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