ghostguild-org/app/components/TopStrip.vue

42 lines
965 B
Vue

<template>
<div class="top-strip">
<span>
<slot name="left">ghostguild.org{{ pagePath ? ` / ${pagePath}` : '' }}</slot>
</span>
<span>
<slot name="right">
<template v-if="memberData">
Signed in as {{ memberData.name }}
<template v-if="memberData.circle">
&middot; {{ memberData.circle }}
</template>
</template>
<template v-else>
A cooperative for game developers
</template>
</slot>
</span>
</div>
</template>
<script setup>
defineProps({
pagePath: { type: String, default: '' },
})
const { memberData } = useAuth()
</script>
<style scoped>
.top-strip {
padding: 16px 32px;
border-bottom: 1px dashed var(--border);
font-size: 12px;
color: var(--text-dim);
display: flex;
justify-content: space-between;
align-items: center;
}
.top-strip a { color: var(--text-faint); }
.top-strip a:hover { color: var(--candle); }
</style>