69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
<template>
|
|
<aside>
|
|
<nav class="flex flex-col flex-nowrap">
|
|
<nuxt-link
|
|
v-for="(navigation, index) in primaryNavigation"
|
|
:key="`navigation-${index}`"
|
|
:to="localePath(navigation.target)"
|
|
class="nav-link"
|
|
>
|
|
<i v-if="navigation.icon" class="material-icons">
|
|
{{ navigation.icon }}
|
|
</i>
|
|
<div v-if="navigation.svg" class="h-4 w-4">
|
|
<SmartIcon :name="navigation.svg" class="svg-icons" />
|
|
</div>
|
|
<span>{{ navigation.title }}</span>
|
|
</nuxt-link>
|
|
</nav>
|
|
</aside>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
primaryNavigation: [
|
|
{ target: "index", icon: "settings_ethernet", title: "REST" },
|
|
{ target: "graphql", svg: "graphql", title: "GraphQL" },
|
|
{ target: "realtime", icon: "language", title: "Realtime" },
|
|
{ target: "documentation", icon: "book", title: "Doc" },
|
|
{ target: "settings", icon: "settings", title: "Settings" },
|
|
],
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.nav-link {
|
|
@apply p-4;
|
|
@apply flex flex-col flex-1;
|
|
@apply items-center;
|
|
@apply justify-center;
|
|
@apply transition;
|
|
@apply hover:bg-primaryDark;
|
|
@apply hover:text-secondaryDark;
|
|
|
|
.material-icons,
|
|
.svg-icons {
|
|
@apply opacity-75;
|
|
}
|
|
|
|
span {
|
|
@apply mt-2;
|
|
@apply font-semibold;
|
|
}
|
|
|
|
&.active {
|
|
@apply text-accent;
|
|
@apply hover:text-accent;
|
|
|
|
.material-icons,
|
|
.svg-icons {
|
|
@apply opacity-100;
|
|
}
|
|
}
|
|
}
|
|
</style>
|