86 lines
2.6 KiB
Vue
86 lines
2.6 KiB
Vue
<template>
|
|
<nav class="sidebar">
|
|
<div class="content-l">
|
|
<h2>Kubooboo</h2>
|
|
<div class="nav">
|
|
<NuxtLink class="resources" to="/dashboard/nodes">Nodes</NuxtLink>
|
|
<NuxtLink class="resources" to="/dashboard/ingresses">Ingresses</NuxtLink>
|
|
<NuxtLink class="resources" to="/dashboard/services">Services</NuxtLink>
|
|
<NuxtLink class="resources" to="/dashboard/deployments">Deployments</NuxtLink>
|
|
<NuxtLink class="resources" to="/dashboard/pods">Pods</NuxtLink>
|
|
</div>
|
|
<div class="divider" :class="{ hide: !inNamespaceScopedResource }"></div>
|
|
<div :class="{ hide: !inNamespaceScopedResource }">
|
|
<div class="namespace" :class="{ active: currentNamespace === undefined }" @click="() => namespaceStore.selectNamespace(undefined)">
|
|
<p>Alle</p>
|
|
</div>
|
|
<div class="namespace" v-for="namespace in namespaces" @click="() => namespaceStore.selectNamespace(namespace)" :class="{ active: namespace.metadata?.name === currentNamespace?.metadata?.name }">
|
|
<p v-if="namespace.metadata">{{ namespace.metadata.name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-center" v-if="user" @click="() => accountPopup.open()">
|
|
<UiIcon>account_circle</UiIcon>
|
|
<p>{{ user.username }}</p>
|
|
</div>
|
|
</nav>
|
|
<AccountPopup ref="accountPopup"></AccountPopup>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useNamespaceStore } from '#imports';
|
|
|
|
const namespaceStore = useNamespaceStore();
|
|
|
|
const namespaces = computed(namespaceStore.getNamespaces);
|
|
|
|
const currentNamespace = computed(namespaceStore.getCurrentNamespace)
|
|
|
|
const user = getUser();
|
|
|
|
const accountPopup = ref();
|
|
|
|
const inNamespaceScopedResource: ComputedRef<boolean> = computed(() => {
|
|
if(useRoute().fullPath.startsWith('/dashboard/nodes'))
|
|
{
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sidebar {
|
|
padding: 0.75rem;
|
|
background-color: rgb(29, 29, 29);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
height: 100%;
|
|
}
|
|
.sidebar * {
|
|
color: white;
|
|
}
|
|
.namespace, .resources {
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
.namespace.active, .resources.router-link-active {
|
|
background-color: var(--primary-color)
|
|
}
|
|
.namespace.active *, .resources.router-link-active {
|
|
color: white;
|
|
}
|
|
.divider {
|
|
height: 1px;
|
|
background-color: lightgray;
|
|
}
|
|
.nav > * {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
.hide {
|
|
visibility: hidden;
|
|
}
|
|
</style> |