rockfic/next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): navbar updates

Browse Source 
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:
✑ ☙◦❀ The Tablet ☯ GamerGirlandCo ❀◦❧ 2024-07-09 20:31:53 -04:00
parent e28f6b6974
commit a7b8c07952
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/layouts/navbar.vue
View File

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