Clement
1593fa3493
Reviewed-on: #13 Co-authored-by: Clement <c.boesmier@aptatio.com> Co-committed-by: Clement <c.boesmier@aptatio.com>
30 lines
1019 B
Plaintext
30 lines
1019 B
Plaintext
---
|
|
export interface Props {
|
|
label?: string;
|
|
class?: string;
|
|
}
|
|
|
|
const {
|
|
label = 'Toggle Menu',
|
|
class: className = 'flex flex-col h-12 w-12 rounded justify-center items-center cursor-pointer group',
|
|
} = Astro.props;
|
|
---
|
|
|
|
<button type="button" class={className} aria-label={label} data-aw-toggle-menu>
|
|
<span class="sr-only">{label}</span>
|
|
<slot>
|
|
<span
|
|
aria-hidden="true"
|
|
class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:rotate-45 group-[.expanded]:translate-y-2.5"
|
|
></span>
|
|
<span
|
|
aria-hidden="true"
|
|
class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:opacity-0"
|
|
></span>
|
|
<span
|
|
aria-hidden="true"
|
|
class="h-0.5 w-6 my-1 rounded-full bg-black dark:bg-white transition ease transform duration-200 opacity-80 group-[.expanded]:-rotate-45 group-[.expanded]:-translate-y-2.5"
|
|
></span>
|
|
</slot>
|
|
</button>
|