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

<script setup lang="ts">

</script>

<style scoped>
.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>