<template>
    <div class="sidebar content-l">
        <h2>Verifoo</h2>
        <div class="content-s">
            <NuxtLink class="sidebar-link">Home</NuxtLink>
            <NuxtLink class="sidebar-link" v-for="realm in realms" :to="'/realms/' + realm.key">{{ realm.name }}</NuxtLink>
        </div>
    </div>
</template>

<script setup lang="ts">
import type {Realm} from "~/realm/Realm";

defineProps<{
    realms: Realm[]
}>()
</script>

<style scoped>
.sidebar {
    display: grid;
    grid-template-columns: 1fr;
    padding: 1rem 2rem;
    background-color: #f1f1f1;
    align-content: flex-start;
    border-right: 1px solid #dfdfdf;
}

.sidebar-link {
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.sidebar-link.router-link-active {
    background-color: #000000;
    color: white;
}
</style>