mirror of
https://github.com/sern-handler/website
synced 2026-06-17 13:22:23 +00:00
98 lines
2.2 KiB
Plaintext
98 lines
2.2 KiB
Plaintext
---
|
|
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>
|