38 lines
809 B
Vue
38 lines
809 B
Vue
<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> |