activist/src/components/Sidebar.vue

<script lang="ts" setup>
import {ref} from "vue";

import Avatar from 'primevue/avatar';
import Menu from "primevue/menu";

import { userActions } from "@/stores/userActionsStore";
import { useUserStore } from "@/stores/userStore";
import Navigation from "@/components/Navigation.vue";


const userStore = useUserStore();

const logout = () => {
  userStore.logout();
};

// Attach handlers.
userActions.map((item) => {
  if (item.cmd === 'logout') {
    item.command = logout;
  }
});
const items = ref(userActions);
const menu = ref();

const toggle = (event) => { menu.value.toggle(event); };
</script>

<template>
  <aside>
    <Navigation></Navigation>
    <div class="mt-auto act-avatar">
      <a class="nav-item" @click="toggle">
        <div v-if="userStore.isAnonymous">
          <Avatar icon="pi pi-user" size="large" shape="circle" />
        </div>
        <div v-else>
          <Avatar v-bind:label="userStore.initials" size="large" shape="circle" />
        </div>
        <span class="inline lg:hidden">{{ userStore.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 || !userStore.isAnonymous">
            <span v-bind:class="item.icon" />
            <span>{{ item.label }}</span>
          </a>
        </template>
      </Menu>
    </div>
  </aside>
</template>

<style scoped>
@import "@/assets/nav-items.css";
aside {
  background-color: #333;
  display: flex;
  flex-direction: row;
  height: 100%;
  .act-avatar {
    display: none;
  }
}
@media (screen(sm)) {
  aside {
    flex-direction: column;
    .act-avatar {
      display: block;
    }
  }
}
</style>