☙◦ The Tablet ❀ GamerGirlandCo ◦❧
4b6771c0dd
- unwrap add story button from div and nuxt-link - use `onclick` handler to navigate to the "new story" page - better align the new story button with the rest of the navbar on tablet+ viewports
109 lines
3.2 KiB
Vue
109 lines
3.2 KiB
Vue
<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) => {
|
|
console.log("clicky", 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"
|
|
: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 :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>
|
|
<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>
|
|
<a-button class="new-btn" type="primary" tooltip="Post a New Story" @click="() => navigateTo(`/new-story`)" v-if="data?.user">
|
|
<!-- <template #icon>
|
|
</template> -->
|
|
<icon istyle="regular" name="file-plus" />
|
|
<span style="margin-left: 0.5em"> Post a New Story </span>
|
|
</a-button>
|
|
<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>
|
|
</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;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
.acbut > * + * {
|
|
margin-left: 0.7em;
|
|
}
|
|
|
|
.some-wrapper {
|
|
display: flex;
|
|
flex-grow: 1.2;
|
|
justify-content: stretch;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.new-btn {
|
|
align-self: self-end;
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
</style>
|