42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<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> |