<script lang="ts">
	import { getContext } from 'svelte';
	import {
		MEMBER_MOBILE_MENU_KEY,
		type MemberMobileMenu
	} from '$lib/components/dashboard/member-menu-context';
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';

	const mobileMenu = getContext<MemberMobileMenu>(MEMBER_MOBILE_MENU_KEY);
</script>

<div class="flex shrink-0 items-center gap-1.5">
	<a href="/profil" class="btn-icon-back" aria-label="Profil saya">
		<OutlineIcon name="user" size="xs" />
	</a>
	<button
		type="button"
		class="btn-icon-back"
		aria-label="Buka menu lengkap"
		onclick={() => mobileMenu?.toggle()}
	>
		<OutlineIcon name="menu" size="xs" />
	</button>
</div>
