Brian DeRocher
929f22abeb
Use user_id in places we were using username. Still debating this. Start getting this working with API backend, until there were calls to /api/sticker which don't exist in the API yet. Then I rediscovered the local json-server. So now there are 2 api backends. We'll incrementally migrate from the first version to the second. SCSS and tailwind weren't working for nav-items.css. The browser just saw the raw version. So for now, just inlined that. Probably these nav items will become components (if they are shared).
104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<script lang="ts" setup>
|
|
import {ref} from "vue";
|
|
import {useRouter} from "vue-router";
|
|
|
|
import Avatar from 'primevue/avatar';
|
|
import Menu from "primevue/menu";
|
|
|
|
import { type UserAction, userActions } from "@/stores/userActionsStore";
|
|
import { useSessionStore } from "@/stores/sessionStore";
|
|
import Navigation from "@/components/Navigation.vue";
|
|
|
|
|
|
const sessionStore = useSessionStore();
|
|
const router = useRouter();
|
|
|
|
const logout = () => {
|
|
sessionStore.logout();
|
|
};
|
|
const profile = () => {
|
|
router.push({name: "profile"});
|
|
};
|
|
|
|
// Attach handlers.
|
|
userActions.map((item: UserAction) => {
|
|
switch (item.cmd) {
|
|
case "logout":
|
|
item.command = logout;
|
|
break;
|
|
case "profile":
|
|
item.command = profile;
|
|
break;
|
|
}
|
|
});
|
|
const items = ref(userActions);
|
|
const menu = ref();
|
|
|
|
const toggle = (event: Event) => { menu.value.toggle(event); };
|
|
</script>
|
|
|
|
<template>
|
|
<aside>
|
|
<Navigation></Navigation>
|
|
<div class="mt-auto act-avatar">
|
|
<!-- TODO -->
|
|
<a class="nav-item" @click="toggle">
|
|
<div v-if="sessionStore.isAnonymous">
|
|
<Avatar icon="pi pi-user" size="large" shape="circle" />
|
|
</div>
|
|
<div v-else>
|
|
<Avatar v-bind:label="sessionStore.initials" size="large" shape="circle" />
|
|
</div>
|
|
<span>{{ sessionStore.user.name }}</span>
|
|
</a>
|
|
<Menu ref="menu" id="overlay_menu" :model="items" :popup="true">
|
|
<template #item="{ item, props }">
|
|
<a
|
|
class="flex items-center"
|
|
v-bind:class="{ 'act-useraction': item.needsAuth }"
|
|
v-bind="props.action"
|
|
v-if="!item.needsAuth || !sessionStore.isAnonymous">
|
|
<span v-bind:class="item.icon" />
|
|
<span>{{ item.label }}</span>
|
|
</a>
|
|
</template>
|
|
</Menu>
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "tailwindcss";
|
|
@reference "tailwindcss-primeui";
|
|
|
|
aside {
|
|
background-color: #333;
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 100%;
|
|
.act-avatar {
|
|
display: none;
|
|
}
|
|
}
|
|
/* Duplicated in Navigation.vue. */
|
|
.nav-item {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
|
|
@apply hover:bg-surface-800 rounded-border text-surface-300 hover:text-white;
|
|
span {
|
|
@apply text-base;
|
|
text-align: center;
|
|
}
|
|
}
|
|
@media (min-width: 640px) {
|
|
aside {
|
|
flex-direction: column;
|
|
.act-avatar {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
</style>
|