<script lang="ts">
	import type { Forum } from '$lib/data/types';

	export let forums: Forum[];

	import { _ } from 'svelte-i18n';
	$: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
</script>

<ul class="p-0 pl-2">
	{#each sortedForums as forum}
		<li class="block text-left mb-5">
			<a class="no-underline text-blue-600 visited:text-purple-500" href="/f/{forum.id}">
				<span aria-hidden="true" class="block text-2xl {forum.glyph}">{forum.glyph}</span>
				<span class="navigation-label">{$_(forum.label)}</span>
			</a>
		</li>
	{/each}
</ul>

<style>
	.☽ {
		font-size: 2rem;
	}
</style>
