<template>
    <div id="app" v-if="realms.data">
        <Sidebar :realms="realms.data"></Sidebar>
        <div id="page">
            <NuxtPage></NuxtPage>
        </div>
        <PopupSlot></PopupSlot>
    </div>
</template>

<script setup lang="ts">
import {useGet} from "~/utils/HttpUtils";
import type {Realm} from "~/realm/Realm";
import Sidebar from "~/components/Sidebar.vue";
import PopupSlot from '~/components/ui/popup/PopupSlot.vue';

const realms = useGet<Realm[]>("/api/realms");
</script>

<style scoped>
#app {
    display: grid;
    grid-template-columns: auto 1fr;
}
#page {
    padding: 1rem;
}
</style>