59 lines
1.9 KiB
Vue
59 lines
1.9 KiB
Vue
<template>
|
|
<div class="app">
|
|
<div class="page">
|
|
<div class="sidebar">
|
|
<div>
|
|
<NuxtLink class="link left-center" :class="{ active: useRoute().fullPath === '/' }" to="/"><UiIcon>house</UiIcon>Home</NuxtLink>
|
|
<NuxtLink class="link left-center" :class="{ active: useRoute().fullPath.startsWith('/artifacts') }" to="/artifacts"><UiIcon>box</UiIcon>Artifacts</NuxtLink>
|
|
<NuxtLink class="link left-center" :class="{ active: useRoute().fullPath.startsWith('/groups') }" to="/groups"><UiIcon>stacks</UiIcon>Groups</NuxtLink>
|
|
</div>
|
|
<NuxtLink class="link left-center" :class="{ active: useRoute().fullPath.startsWith('/settings') }" to="/settings"><UiIcon>settings</UiIcon>Settings</NuxtLink>
|
|
<a class="link left-center" :href="useRuntimeConfig().public.logoutUrl"><UiIcon>logout</UiIcon> Log Out</a>
|
|
</div>
|
|
<div class="page-content">
|
|
<NuxtPage></NuxtPage>
|
|
</div>
|
|
</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";
|
|
|
|
const popup = computed(() => usePopup().get());
|
|
</script>
|
|
|
|
<style>
|
|
.app {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
.page {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
.page-content {
|
|
padding: 2rem;
|
|
}
|
|
.sidebar {
|
|
padding: 1rem;
|
|
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> |