142 lines
4.4 KiB
Vue
142 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import { useRouter } from "vue-router";
|
|
import { useRoute } from 'vue-router';
|
|
|
|
import { useSessionStore } from "@/stores/sessionStore";
|
|
import { type UserAction, userActions } from "@/stores/userActionsStore";
|
|
|
|
import Button from 'primevue/button';
|
|
import Menu from "primevue/menu";
|
|
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const page_title = ref();
|
|
const sessionStore = useSessionStore();
|
|
|
|
watch(() => route.meta, (newVal, oldVal) => {
|
|
page_title.value = newVal.title;
|
|
})
|
|
|
|
const toggle = (event: Event) => {
|
|
menu.value.toggle(event);
|
|
};
|
|
const logout = () => {
|
|
sessionStore.logout();
|
|
};
|
|
const profile = () => {
|
|
router.push({name: "profile"});
|
|
};
|
|
|
|
|
|
const menu = ref();
|
|
const localActions = [{
|
|
command: () => { router.push('/88ae126f-b19a-4287-abe0-a8f5ac763cb7'); },
|
|
icon: 'pi pi-tag',
|
|
label: 'Claim 88ae',
|
|
needsAuth: false,
|
|
}, {
|
|
icon: 'pi pi-question',
|
|
label: 'About',
|
|
needsAuth: false,
|
|
}];
|
|
const allActions = [...userActions, ...localActions];
|
|
allActions.map((item: UserAction) => {
|
|
switch (item.cmd) {
|
|
case "logout":
|
|
item.command = logout;
|
|
break;
|
|
case "profile":
|
|
item.command = profile;
|
|
break;
|
|
}
|
|
});
|
|
const items = ref(allActions);
|
|
</script>
|
|
|
|
<template>
|
|
<header class="flex justify-between items-center px-4">
|
|
<div class="flex">
|
|
<RouterLink to="/">
|
|
<svg
|
|
class="Icon"
|
|
style="height: 32px; width: 32px;"
|
|
viewBox="0 0 512 512"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g class="" style="" transform="translate(0,0)">
|
|
<path
|
|
d="M329.8 235.69l62.83-82.71 42.86 32.56-62.83 82.75zm-12.86-9.53l66.81-88-45-34.15-66.81 88zm-27.48-97.78l-19.3 39.57 57-75-42.51-32.3-36.24 47.71zm-20.74-73.24l-46.64-35.43-42 55.31 53.67 26.17zm107 235.52l-139-102.71-9.92.91 4.56 2 62.16 138.43-16.52 2.25-57.68-128.5-40-17.7-4-30.84 39.41 19.42 36.36-3.33 17-34.83-110.9-54.09-80.68 112.51L177.6 346.67l-22.7 145.62H341V372.62l35.29-48.93L387 275.77z"
|
|
fill="#000"
|
|
fill-opacity="1">
|
|
</path>
|
|
</g>
|
|
</svg>
|
|
</RouterLink>
|
|
<span class="title">{{ page_title }}</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<Button
|
|
as="router-link"
|
|
:to="{name: 'login', query: {next: route.fullPath }}"
|
|
v-if="sessionStore.isAnonymous">
|
|
<i class="pi pi-sign-in" />
|
|
<span>Login</span>
|
|
</Button>
|
|
<Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
|
|
<Menu ref="menu" id="overlay_menu" :model="items" :popup="true">
|
|
<template #start>
|
|
<span class="inline-flex items-center gap-1 px-2 py-2">
|
|
<svg
|
|
class="Icon"
|
|
style="height: 32px; width: 32px;"
|
|
viewBox="0 0 512 512"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<g class="" style="" transform="translate(0,0)">
|
|
<path
|
|
d="M329.8 235.69l62.83-82.71 42.86 32.56-62.83 82.75zm-12.86-9.53l66.81-88-45-34.15-66.81 88zm-27.48-97.78l-19.3 39.57 57-75-42.51-32.3-36.24 47.71zm-20.74-73.24l-46.64-35.43-42 55.31 53.67 26.17zm107 235.52l-139-102.71-9.92.91 4.56 2 62.16 138.43-16.52 2.25-57.68-128.5-40-17.7-4-30.84 39.41 19.42 36.36-3.33 17-34.83-110.9-54.09-80.68 112.51L177.6 346.67l-22.7 145.62H341V372.62l35.29-48.93L387 275.77z"
|
|
fill="#000"
|
|
fill-opacity="1">
|
|
</path>
|
|
</g>
|
|
</svg>
|
|
<span class="text-xl font-semibold">ACTIVISM<span class="text-primary">APP</span></span>
|
|
</span>
|
|
</template>
|
|
<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>
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
header {
|
|
background-color: white;
|
|
border-bottom: 1px solid #BBB;
|
|
.title {
|
|
font-size: 160%;
|
|
}
|
|
}
|
|
.act-menubar {
|
|
border: none !important;
|
|
//width: 10em;
|
|
}
|
|
.act-menubar-end {
|
|
margin-left: 0 !important;
|
|
}
|
|
@media (screen(sm)) {
|
|
.act-useraction {
|
|
background-color: red;
|
|
display: none; // sidebar will have them
|
|
}
|
|
}
|
|
</style>
|