<script lang="ts">
	import Button from './Button.svelte';

	let show = false;
	export let links: Array<LinkConfig>;

	function clickOutside(node) {
		const handleClick = (event) => {
			if (
				node &&
				!node.contains(event.target) &&
				!event.defaultPrevented &&
				node.offsetParent !== null
			) {
				node.dispatchEvent(new CustomEvent('click_outside', node));
			}
		};

		document.addEventListener('click', handleClick, true);

		return {
			destroy() {
				document.removeEventListener('click', handleClick, true);
			}
		};
	}
</script>

<!--  small device menu button -->
<Button
	class="md:hidden"
	on:click={() => {
		show = true;
	}}
>
	<i class="fa fa-bars" />
</Button>

<!-- small device menu -->
<div
	use:clickOutside
	on:click_outside={() => {
		show = false;
	}}
	class:hidden={!show}
	class="min-w-40 absolute left-0 top-0 block flex flex-col gap-1 rounded border border-neutral-600 bg-neutral-600 p-1 transition-all"
>
	{#each links as link}
		<a
			class="rounded p-2 transition-all hover:bg-neutral-500 active:bg-neutral-600 dark:hover:bg-neutral-700"
			href={link.url}
			target="_blank"
		>
			{#if link.icon}
				<i class={link.icon} />
			{/if}
			<span class="link-label">{link.title}</span>
		</a>
	{/each}
</div>

<!-- medium device menu -->
<div class="hidden flex-row justify-start gap-4 md:flex">
	{#each links as link}
		<a href={link.url} target="_blank">
			{#if link.icon}
				<i class={link.icon} />
			{/if}
			<span class="link-label">{link.title}</span>
		</a>
	{/each}
</div>
