Adds a responsive menu

src/lib/components/LinkMenu.svelte

@@ -0,0 +1,72 @@
+<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>