feat(components): finish navbar
This commit is contained in:
parent
b0d799ec69
commit
01fdb5bf41
@ -1,24 +1,35 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { log } from "~/lib/server/logger";
|
import { log } from "~/lib/server/logger";
|
||||||
|
import { MenuProps } from "ant-design-vue";
|
||||||
|
|
||||||
|
const { data, status } = useAuth();
|
||||||
const itemMap = {
|
const itemMap = {
|
||||||
bands: "/bands",
|
home: "/",
|
||||||
|
bands: "bands",
|
||||||
authors: "/authors",
|
authors: "/authors",
|
||||||
login: "/login",
|
forum: "/forum",
|
||||||
register: "/register",
|
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",
|
||||||
};
|
};
|
||||||
let cur = ref<string>(
|
let cur = ref<string>(
|
||||||
Object.keys(itemMap).find((a) => itemMap[a] === useRoute().path) ||
|
Object.keys(itemMap).find((a) => itemMap[a] === useRoute().path) ||
|
||||||
useRoute().path,
|
useRoute().path,
|
||||||
);
|
);
|
||||||
let selected: string[] = [cur.value];
|
let selected: string[] = [cur.value];
|
||||||
|
|
||||||
const clickFn = (minfo) => {
|
const clickFn = (minfo) => {
|
||||||
|
if (itemMap[minfo.key] === undefined) return;
|
||||||
cur.value = itemMap[minfo.key];
|
cur.value = itemMap[minfo.key];
|
||||||
selected = [cur.value];
|
selected = [cur.value];
|
||||||
navigateTo(itemMap[minfo.key]);
|
navigateTo(itemMap[minfo.key]);
|
||||||
};
|
};
|
||||||
console.log({ label: "client", message: cur.value });
|
console.log({ label: "client", value: cur.value, stat: status.value });
|
||||||
const { data } = useAuth();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -30,24 +41,38 @@
|
|||||||
height: '40px',
|
height: '40px',
|
||||||
alignSelf: 'center',
|
alignSelf: 'center',
|
||||||
justifyContent: 'stretch',
|
justifyContent: 'stretch',
|
||||||
// width: '100%'
|
width: '100%',
|
||||||
}"
|
}"
|
||||||
@click="clickFn"
|
@click="clickFn"
|
||||||
:active-key="cur"
|
: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="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-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>
|
</a-menu>
|
||||||
<div class="acbut" v-if="!data">
|
<div class="acbut" v-if="!data">
|
||||||
<a-button size="large" @click="() => navigateTo('/login')">
|
<a-button size="large" @click="() => navigateTo('/login')">
|
||||||
log in
|
Log In
|
||||||
</a-button>
|
</a-button>
|
||||||
<a-button
|
<a-button
|
||||||
size="large"
|
size="large"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="() => navigateTo('/register')"
|
@click="() => navigateTo('/register')"
|
||||||
>
|
>
|
||||||
register
|
Register
|
||||||
</a-button>
|
</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -55,13 +80,14 @@
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.navibar {
|
.navibar {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
flex-grow: 1;
|
|
||||||
/* min-width: max-content; */
|
/* min-width: max-content; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.acbut {
|
.acbut {
|
||||||
justify-content: space-around;
|
justify-content: space-between;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-grow: 0.01;
|
||||||
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.acbut > * + * {
|
.acbut > * + * {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user