<script lang="ts">
	import MemberSidebarPanel from '$lib/components/dashboard/MemberSidebarPanel.svelte';

	interface Props {
		open: boolean;
		memberName: string;
		memberEmail: string;
		onclose: () => void;
	}

	let { open, memberName, memberEmail, onclose }: Props = $props();
</script>

{#if open}
	<button
		type="button"
		class="fixed inset-0 z-[60] bg-black/40 backdrop-blur-[1px] lg:hidden"
		aria-label="Tutup menu"
		onclick={onclose}
	></button>
{/if}

<aside
	class="fixed inset-y-0 left-0 z-[61] w-[min(18rem,85vw)] shadow-2xl transition-transform duration-300 ease-out lg:hidden {open
		? 'translate-x-0'
		: '-translate-x-full pointer-events-none'}"
	aria-hidden={!open}
	aria-label="Menu navigasi"
>
	<MemberSidebarPanel {memberName} {memberEmail} onNavigate={onclose} />
</aside>
