Hornwitser
7a95d6c3c4
Start component names with the kind of element it creates on the page (button, input, table, card, etc), then follow it with an hierarchy like set of parts describing what part of the system it operates on. This makes related components stick together in the directory listing of components and auto-complete work better.
58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<template>
|
|
<header>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<NuxtLink to="/">Home</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink to="/schedule">Schedule</NuxtLink>
|
|
</li>
|
|
<li v-if="accountStore.canEdit">
|
|
<NuxtLink to="/edit">Edit</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="account">
|
|
<template v-if="accountStore.valid">
|
|
{{ accountStore.name }}
|
|
(s:{{ sessionStore.id }} a:{{ accountStore.id }}{{ sessionStore.push ? " push" : null }})
|
|
{{ accountStore.type }}
|
|
<NuxtLink to="/account/settings">Settings</NuxtLink>
|
|
<ButtonLogOut v-if="accountStore.type !== 'anonymous'"/>
|
|
</template>
|
|
<template v-else>
|
|
<NuxtLink to="/login">Log In</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const accountStore = useAccountStore();
|
|
const sessionStore = useSessionStore();
|
|
</script>
|
|
|
|
<style scoped>
|
|
header {
|
|
line-height: 1.5; /* Prevent layout shift from log out button */
|
|
display: flex;
|
|
column-gap: 1em;
|
|
flex-wrap: wrap;
|
|
border-bottom: 1px solid var(--foreground);
|
|
margin-block-start: 1rem;
|
|
}
|
|
.account {
|
|
display: flex;
|
|
justify-content: end;
|
|
flex-grow: 1;
|
|
column-gap: 0.5em;
|
|
flex-wrap: wrap;
|
|
}
|
|
nav ul {
|
|
padding: 0;
|
|
display: flex;
|
|
column-gap: 0.5em;
|
|
list-style: none;
|
|
}
|
|
</style>
|