<template>
    <div class="app">
        <div class="page">
            <div class="sidebar">
                <div>
                    <NuxtLink class="link left-center" :class="{ active: useRoute().fullPath === '/' }" to="/"><UiIcon>home</UiIcon>Home</NuxtLink>
                    <NuxtLink class="link left-center" :class="{ active: useRoute().fullPath.startsWith('/artifacts') }" to="/artifacts"><UiIcon>box</UiIcon>Artifacts</NuxtLink>
                </div>
                <NuxtLink class="link left-center" :class="{ active: useRoute().fullPath.startsWith('/settings') }" to="/settings"><UiIcon>settings</UiIcon>Settings</NuxtLink>
            </div>
            <NuxtPage></NuxtPage>
        </div>
        <PopupTemplate v-if="popup" :heading="popup.config.heading" :size="popup.config.size">
            <component :is="popup.component"></component>
        </PopupTemplate>
    </div>
</template>

<script setup lang="ts">
import {usePopup} from "~/components/ui/popup/Popup";
import PopupTemplate from "~/components/ui/popup/PopupTemplate.vue";
import {useAccountStore} from "~/auth/useAccountStore";

const popup = computed(() => usePopup().get());

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

<style>
.app {
    height: 100vh;
    width: 100vw;
}
.page {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    min-height: 100%;
}
.page > * {
    padding: 1rem;
}
.sidebar {
    background-color: var(--tile-color);
    border-right: 1px solid #cddaff;
    display: grid;
    grid-template-rows: 1fr auto;
}
.link {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
}
.link.active, .link.active * {
    background-color: #3c74ff;
    color: white;
}
</style>