activist/src/components/TopBar.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>