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

<script setup lang="ts">
import Sidebar from "~/components/Sidebar.vue";
import PopupSlot from '~/components/ui/popup/PopupSlot.vue';
import {useRealmStore} from "~/realm/RealmStore";

const realms = computed(() => useRealmStore().getRealms());

onMounted(() => {
    useRealmStore().init();
})
</script>

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