refactor(components): navbar updates

add `key` attribute to `a-menu` element
only show "new story" button to logged in users
change `data` check to check for `data.user`
This commit is contained in:
parent e28f6b6974
commit a7b8c07952
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Grid } from "ant-design-vue";
import { Grid, ItemType } from "ant-design-vue";
const bp = Grid.useBreakpoint();
const { data, status } = useAuth();
const itemMap = ref({
@ -22,6 +22,7 @@
let selected: string[] = [cur.value];
const clickFn = (minfo) => {
console.log("clicky", minfo);
if (itemMap.value[minfo.key] === undefined) return;
cur.value = itemMap.value[minfo.key];
selected = [cur.value];
@ -43,12 +44,13 @@
}"
@click="clickFn"
:active-key="cur"
:key="data?.user?._id"
>
<a-menu-item key="home"> Home </a-menu-item>
<a-menu-item key="bands"> Bands </a-menu-item>
<a-menu-item key="authors"> Authors </a-menu-item>
<a-menu-item key="forum"> Message Board</a-menu-item>
<a-sub-menu title="My Stuff" v-if="!!data?.user" key="group/my-stuff">
<a-sub-menu :disabled="!data?.user" v-if="!!data?.user" title="My Stuff" key="group/my-stuff">
<a-menu-item key="account"> Account </a-menu-item>
<a-menu-item key="edit-profile"> Edit Profile </a-menu-item>
<a-menu-item key="profile"> View Profile </a-menu-item>
@ -60,9 +62,9 @@
<a-menu-item key="admin" v-if="data?.user?.profile.isAdmin || false"> Admin </a-menu-item>
<a-menu-item key="logout" v-if="!!data?.user"> Logout </a-menu-item>
</a-menu>
<div>
<div v-if="data?.user">
<nuxt-link to="/new-story">
<a-button v-if="data?.user" type="primary" tooltip="Post a New Story">
<a-button type="primary" tooltip="Post a New Story">
<!-- <template #icon>
</template> -->
<icon istyle="regular" name="file-plus" />
@ -70,7 +72,7 @@
</a-button>
</nuxt-link>
</div>
<div class="acbut" v-if="!data">
<div class="acbut" v-if="!data?.user">
<a-button size="large" @click="() => navigateTo('/auth/login')"> Login </a-button>
<a-button size="large" type="primary" @click="() => navigateTo('/auth/register')"> Register </a-button>
</div>