55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<template>
|
|
<div class="sidebar content-l">
|
|
<h2>Verifoo</h2>
|
|
<div class="inner-sidebar">
|
|
<div class="content-s">
|
|
<NuxtLink class="sidebar-link" to="/">Home</NuxtLink>
|
|
<NuxtLink class="sidebar-link" v-for="realm in realms" :to="'/realms/' + realm.key + '/home'">{{ realm.name }}</NuxtLink>
|
|
</div>
|
|
<div class="content-s">
|
|
<UiButton icon="add" reverse @click="addRealm">Create</UiButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type {Realm} from "~/realm/Realm";
|
|
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
|
|
import RealmAdd from "~/realm/RealmAdd.vue";
|
|
|
|
defineProps<{
|
|
realms: Realm[]
|
|
}>()
|
|
|
|
function addRealm()
|
|
{
|
|
usePopup().open(Popup.component(RealmAdd).setConfig({ heading: 'Add Realm', size: PopupSize.MEDIUM }));
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sidebar {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 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;
|
|
}
|
|
.inner-sidebar {
|
|
display: grid;
|
|
grid-template-rows: 1fr auto;
|
|
}
|
|
</style> |