blob: 2d19b169bc906fa1703396235d8e55af0739f205 (
plain)
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
|
---
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>
|
