73 lines
1.5 KiB
Svelte
73 lines
1.5 KiB
Svelte
<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>
|