<script lang="ts" setup> import { Grid } from "ant-design-vue"; const bp = Grid.useBreakpoint(); const { data, status } = useAuth(); const itemMap = ref({ home: "/", bands: "/bands", authors: "/authors", forum: "/forum", account: "/my-stuff", "edit-profile": "/my-stuff/profile", stories: "/my-stuff/stories", drafts: "/my-stuff/drafts", reviews: "/my-stuff/reviews", messages: "/messages", profile: `/user/${data?.value?.user?._id || 0}`, admin: "/admin", logout: "/auth/logout", }); const propo = defineProps<{ inline: boolean }>(); let cur = ref<string>(Object.keys(itemMap.value).find((a) => itemMap.value[a] === useRoute().path) || useRoute().path); let selected: string[] = [cur.value]; const clickFn = (minfo) => { if (itemMap.value[minfo.key] === undefined) return; cur.value = itemMap.value[minfo.key]; selected = [cur.value]; navigateTo(itemMap.value[minfo.key]); }; console.log({ label: "client", value: cur.value, stat: status.value }); </script> <template> <div class="some-wrapper" :style="{ flexDirection: inline ? 'column' : 'row' }"> <a-menu :mode="inline ? 'inline' : 'horizontal'" class="navibar" :style="{ height: !inline ? '40px' : '100%', alignSelf: 'center', justifyContent: 'stretch', width: '100%', }" @click="clickFn" :active-key="cur" > <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-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> <a-menu-item key="stories"> Stories </a-menu-item> <a-menu-item key="drafts"> Drafts </a-menu-item> <a-menu-item key="reviews"> Manage Reviews </a-menu-item> <a-menu-item key="messages"> Private Messages </a-menu-item> </a-sub-menu> <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> <nuxt-link to="/new-story"> <a-button v-if="data?.user" type="primary" tooltip="Post a New Story"> <!-- <template #icon> </template> --> <icon istyle="regular" name="file-plus" /> <span style="margin-left: 0.5em"> Post a New Story </span> </a-button> </nuxt-link> </div> <div class="acbut" v-if="!data"> <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> </div> </template> <style scoped> .navibar { align-self: stretch; /* min-width: max-content; */ } .acbut { justify-content: space-between; display: flex; flex-grow: 0.01; margin-left: auto; } .acbut > * + * { margin-left: 0.7em; } .some-wrapper { display: flex; flex-grow: 1.2; justify-content: stretch; } </style>