feat(components): finish navbar

This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2023-10-09 20:07:26 -04:00
parent b0d799ec69
commit 01fdb5bf41
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C

View File

@ -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 > * + * {