<script lang="ts">
- import { _ } from 'svelte-i18n';
- export let forums;
+ import type { Forum } from '$lib/data/types';
- $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
+ export let forums: Forum[];
+
+ import { _ } from 'svelte-i18n';
+ $: sortedForums = forums
+ .slice()
+ .sort((a, b) => a.position - b.position);
</script>
-<ul>
- {#each sortedForums as forum}
- <li>
- <a href="/f/{forum.id}">
- <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
- <span class="navigation-label">{$_(forum.label)}</span>
- </a>
- </li>
- {/each}
+<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>
- ul {
- padding: 0;
- }
-
- li {
- display: block;
- text-align: left;
- margin-bottom: 20px;
- }
-
- .navigation-glyph {
- font-size: 1.5rem;
- display: block;
- }
-
.☽ {
font-size: 2rem;
}
-
- a {
- text-decoration: none;
- }
</style>