Merge pull request #301 from shariquerik/apps-switcher

feat: app switcher

frontend/src/components/Apps.vue

@@ -0,0 +1,68 @@
+<template>
+  <Popover placement="right-start" class="flex w-full">
+    <template #target="{ togglePopover }">
+      <button
+        :class="[
+          'group w-full flex h-7 items-center justify-between rounded px-2 text-base text-gray-800 hover:bg-gray-100',
+        ]"
+        @click.prevent="togglePopover()"
+      >
+        <div class="flex gap-2">
+          <AppsIcon class="size-4" />
+          <span class="whitespace-nowrap">
+            {{ __('Apps') }}
+          </span>
+        </div>
+        <FeatherIcon name="chevron-right" class="size-4 text-gray-600" />
+      </button>
+    </template>
+    <template #body>
+      <div
+        class="grid grid-cols-3 justify-between mx-3 p-2 rounded-lg border border-gray-100 bg-white shadow-xl"
+      >
+        <div v-for="app in apps.data" key="name">
+          <a
+            :href="app.route"
+            class="flex flex-col gap-1.5 rounded justify-center items-center py-2 px-3 hover:bg-gray-100"
+          >
+            <img class="size-8" :src="app.logo" />
+            <div class="text-sm" @click="app.onClick">
+              {{ app.title }}
+            </div>
+          </a>
+        </div>
+      </div>
+    </template>
+  </Popover>
+</template>
+<script setup>
+import AppsIcon from '@/components/Icons/AppsIcon.vue'
+import { Popover, createResource } from 'frappe-ui'
+
+const apps = createResource({
+  url: 'frappe.apps.get_apps',
+  cache: 'apps',
+  auto: true,
+  transform: (data) => {
+    let _apps = [
+      {
+        name: 'frappe',
+        logo: '/assets/crm/images/desk.png',
+        title: __('Desk'),
+        route: '/app',
+      },
+    ]
+    data.map((app) => {
+      if (app.name === 'crm') return
+      _apps.push({
+        name: app.name,
+        logo: app.logo,
+        title: __(app.title),
+        route: app.route,
+      })
+    })
+
+    return _apps
+  },
+})
+</script>

frontend/src/components/Icons/AppsIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    fill="none"
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class=""
+      clip-rule="evenodd"
+      d="M13.8496 4.69692L12.0062 6.54029C11.8109 6.73555 11.4944 6.73555 11.2991 6.54028L9.45572 4.69692C9.26046 4.50166 9.26046 4.18508 9.45572 3.98981L11.2991 2.14645C11.4944 1.95118 11.8109 1.95118 12.0062 2.14645L13.8496 3.98981C14.0448 4.18507 14.0448 4.50166 13.8496 4.69692ZM14.5567 3.28271C15.1425 3.86849 15.1425 4.81824 14.5567 5.40403L12.7133 7.24739C12.1275 7.83318 11.1778 7.83318 10.592 7.24739L8.74862 5.40402C8.16283 4.81824 8.16283 3.86849 8.74862 3.28271L10.592 1.43934C11.1778 0.853553 12.1275 0.853554 12.7133 1.43934L14.5567 3.28271ZM5.60691 4.34338C5.60691 5.3394 4.79948 6.14683 3.80346 6.14683C2.80743 6.14683 2 5.3394 2 4.34338C2 3.34736 2.80743 2.53992 3.80346 2.53992C4.79948 2.53992 5.60691 3.34736 5.60691 4.34338ZM6.60691 4.34338C6.60691 5.89168 5.35176 7.14683 3.80346 7.14683C2.25515 7.14683 1 5.89168 1 4.34338C1 2.79507 2.25515 1.53992 3.80346 1.53992C5.35176 1.53992 6.60691 2.79507 6.60691 4.34338ZM12.9565 10.3897H10.3495C10.0734 10.3897 9.84954 10.6136 9.84954 10.8897V13.4966C9.84954 13.7728 10.0734 13.9966 10.3495 13.9966H12.9565C13.2326 13.9966 13.4565 13.7728 13.4565 13.4966V10.8897C13.4565 10.6136 13.2326 10.3897 12.9565 10.3897ZM10.3495 9.38971C9.52112 9.38971 8.84954 10.0613 8.84954 10.8897V13.4966C8.84954 14.325 9.52111 14.9966 10.3495 14.9966H12.9565C13.7849 14.9966 14.4565 14.325 14.4565 13.4966V10.8897C14.4565 10.0613 13.7849 9.38971 12.9565 9.38971H10.3495ZM2.5 10.3897H5.10691C5.38305 10.3897 5.60691 10.6136 5.60691 10.8897V13.4966C5.60691 13.7728 5.38306 13.9966 5.10691 13.9966H2.5C2.22386 13.9966 2 13.7728 2 13.4966V10.8897C2 10.6136 2.22386 10.3897 2.5 10.3897ZM1 10.8897C1 10.0613 1.67157 9.38971 2.5 9.38971H5.10691C5.93534 9.38971 6.60691 10.0613 6.60691 10.8897V13.4966C6.60691 14.325 5.93534 14.9966 5.10691 14.9966H2.5C1.67157 14.9966 1 14.325 1 13.4966V10.8897Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    ></path>
+  </svg>
+</template>

frontend/src/components/UserDropdown.vue

@@ -50,10 +50,11 @@
 <script setup>
 import SettingsModal from '@/components/Settings/SettingsModal.vue'
 import CRMLogo from '@/components/Icons/CRMLogo.vue'
+import Apps from '@/components/Apps.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
 import { Dropdown } from 'frappe-ui'
-import { computed, ref } from 'vue'
+import { computed, ref, markRaw} from 'vue'
 
 const props = defineProps({
   isCollapsed: {
@@ -75,9 +76,7 @@ let dropdownOptions = ref([
     hideLabel: true,
     items: [
       {
-        icon: 'corner-up-left',
-        label: computed(() => __('Switch to Desk')),
-        onClick: () => window.location.replace('/app'),
+        component: markRaw(Apps),
       },
       {
         icon: 'life-buoy',