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