helpdesk/desk/src/components/Apps.vue

<template>
  <Popover
    placement="right-start"
    class="flex w-full"
    trigger="hover"
    :hoverDelay="0.1"
    :leaveDelay="0.1"
  >
    <template #target="{ togglePopover }">
      <button
        :class="[
          'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-ink-gray-8 hover:bg-surface-gray-2',
        ]"
        @click.prevent="togglePopover()"
      >
        <div class="flex gap-2">
          <AppsIcon />
          <span class="whitespace-nowrap">Apps</span>
        </div>
        <ChevronRight class="h-4 w-4 stroke-1.5" />
      </button>
    </template>
    <template #body>
      <div
        class="flex flex-col justify-between mx-3 p-1.5 rounded-lg border border-outline-gray-1 bg-surface-white shadow-xl"
      >
        <div v-for="app in apps.data" key="name">
          <a
            :href="app.route"
            class="flex gap-2 rounded items-center hover:bg-surface-gray-2 p-1.5"
          >
            <img class="size-6" :src="app.logo" />
            <div class="text-sm" @click="app.onClick">
              {{ app.title }}
            </div>
          </a>
        </div>
      </div>
    </template>
  </Popover>
</template>
<script setup>
import { Popover, createResource } from "frappe-ui";
import ChevronRight from "~icons/lucide/chevron-right";
import AppsIcon from "./icons/AppsIcon.vue";

const apps = createResource({
  url: "frappe.apps.get_apps",
  cache: "apps",
  auto: true,
  transform: (data) => {
    let _apps = [
      {
        name: "frappe",
        logo: "/assets/helpdesk/desk/desk.png",
        title: "Desk",
        route: "/desk/helpdesk",
      },
    ];
    data.map((app) => {
      if (app.name === "helpdesk") return;
      _apps.push({
        name: app.name,
        logo: app.logo,
        title: app.title,
        route: app.route,
      });
    });
    return _apps;
  },
});
</script>