fix: customer portal sidebar options in mobile view

frappe · Sep 27, 2024 · 9fa4298 · 9fa4298
1 parent 6d9aa07
commit 9fa4298
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 124 deletions.
diff --git a/desk/src/components/layouts/MobileSidebar.vue b/desk/src/components/layouts/MobileSidebar.vue
@@ -80,72 +80,39 @@ import SidebarLink from "@/components/SidebarLink.vue";
 import { useNotificationStore } from "@/stores/notification";
 
 import { mobileSidebarOpened as sidebarOpened } from "@/composables/mobile";
-
-import LucideBookOpen from "~icons/lucide/book-open";
-import LucideCloudLightning from "~icons/lucide/cloud-lightning";
-import LucideContact2 from "~icons/lucide/contact-2";
-import LucideTicket from "~icons/lucide/ticket";
-import LucideUser from "~icons/lucide/user";
-import LucideUserCircle2 from "~icons/lucide/user-circle-2";
-import LucideUsers from "~icons/lucide/users";
 import LucideBell from "~icons/lucide/bell";
 
-import {
-  AGENT_PORTAL_AGENT_LIST,
-  AGENT_PORTAL_CONTACT_LIST,
-  AGENT_PORTAL_CUSTOMER_LIST,
-  AGENT_PORTAL_TEAM_LIST,
-  AGENT_PORTAL_TICKET_LIST,
-  CUSTOMER_PORTAL_LANDING,
-} from "@/router";
+import { CUSTOMER_PORTAL_LANDING, CUSTOMER_PORTAL_ROUTES } from "@/router";
 import Apps from "../Apps.vue";
+import {
+  agentPortalSidebarOptions,
+  customerPortalSidebarOptions,
+} from "./layoutSettings";
 import { useAuthStore } from "@/stores/auth";
 
 const notificationStore = useNotificationStore();
 const route = useRoute();
 const router = useRouter();
+const authStore = useAuthStore();
+const isCustomerPortal = computed(() =>
+  CUSTOMER_PORTAL_ROUTES.includes(route.name)
+);
 
-const menuOptions = computed(() => [
-  {
-    label: "Tickets",
-    icon: LucideTicket,
-    to: AGENT_PORTAL_TICKET_LIST,
-  },
-  {
-    label: "Agents",
-    icon: LucideUser,
-    to: AGENT_PORTAL_AGENT_LIST,
-  },
-  {
-    label: "Knowledge base",
-    icon: LucideBookOpen,
-    to: "DeskKBHome",
-  },
-  {
-    label: "Teams",
-    icon: LucideUsers,
-    to: AGENT_PORTAL_TEAM_LIST,
-  },
-  {
-    label: "Canned responses",
-    icon: LucideCloudLightning,
-    to: "CannedResponses",
-  },
-  {
-    label: "Customers",
-    icon: LucideUserCircle2,
-    to: AGENT_PORTAL_CUSTOMER_LIST,
-  },
+const menuOptions = computed(() => {
+  return isCustomerPortal.value
+    ? customerPortalSidebarOptions
+    : agentPortalSidebarOptions;
+});
+
+const customerPortalDropdown = computed(() => [
   {
-    label: "Contacts",
-    icon: LucideContact2,
-    to: AGENT_PORTAL_CONTACT_LIST,
+    label: "Log out",
+    icon: "log-out",
+    onClick: () => authStore.logout(),
   },
 ]);
 
-const authStore = useAuthStore();
-
-const profileSettings = [
+const agentPortalDropdown = computed(() => [
   {
     component: markRaw(Apps),
   },
@@ -172,7 +139,13 @@ const profileSettings = [
     icon: "log-out",
     onClick: () => authStore.logout(),
   },
-];
+]);
+
+const profileSettings = computed(() => {
+  return isCustomerPortal.value
+    ? customerPortalDropdown.value
+    : agentPortalDropdown.value;
+});
 
 function isActiveTab(to: string) {
   return route.name === to;

diff --git a/desk/src/components/layouts/Sidebar.vue b/desk/src/components/layouts/Sidebar.vue
@@ -74,31 +74,20 @@ import { storeToRefs } from "pinia";
 import { useAuthStore } from "@/stores/auth";
 import { useNotificationStore } from "@/stores/notification";
 import { useSidebarStore } from "@/stores/sidebar";
-import {
-  AGENT_PORTAL_AGENT_LIST,
-  AGENT_PORTAL_CONTACT_LIST,
-  AGENT_PORTAL_CUSTOMER_LIST,
-  AGENT_PORTAL_TEAM_LIST,
-  AGENT_PORTAL_TICKET_LIST,
-  CUSTOMER_PORTAL_LANDING,
-  CUSTOMER_PORTAL_ROUTES,
-} from "@/router";
+import { CUSTOMER_PORTAL_LANDING, CUSTOMER_PORTAL_ROUTES } from "@/router";
 import { useDevice } from "@/composables";
 import { SidebarLink } from "@/components";
 import UserMenu from "@/components/UserMenu.vue";
 import LucideArrowLeftFromLine from "~icons/lucide/arrow-left-from-line";
 import LucideArrowRightFromLine from "~icons/lucide/arrow-right-from-line";
-import LucideBookOpen from "~icons/lucide/book-open";
-import LucideCloudLightning from "~icons/lucide/cloud-lightning";
-import LucideContact2 from "~icons/lucide/contact-2";
 import LucideBell from "~icons/lucide/bell";
-import LucideTicket from "~icons/lucide/ticket";
-import LucideUser from "~icons/lucide/user";
-import LucideUserCircle2 from "~icons/lucide/user-circle-2";
-import LucideUsers from "~icons/lucide/users";
 import LucideSearch from "~icons/lucide/search";
 import SettingsModal from "@/components/Settings/SettingsModal.vue";
 import Apps from "@/components/Apps.vue";
+import {
+  agentPortalSidebarOptions,
+  customerPortalSidebarOptions,
+} from "./layoutSettings";
 
 const route = useRoute();
 const router = useRouter();
@@ -107,66 +96,14 @@ const notificationStore = useNotificationStore();
 const { isExpanded, width } = storeToRefs(useSidebarStore());
 const device = useDevice();
 const showSettingsModal = ref(false);
-
 const isCustomerPortal = computed(() =>
   CUSTOMER_PORTAL_ROUTES.includes(route.name)
 );
 
-const agentPortalSidebarOptions = computed(() => [
-  {
-    label: "Tickets",
-    icon: LucideTicket,
-    to: AGENT_PORTAL_TICKET_LIST,
-  },
-  {
-    label: "Agents",
-    icon: LucideUser,
-    to: AGENT_PORTAL_AGENT_LIST,
-  },
-  {
-    label: "Knowledge base",
-    icon: LucideBookOpen,
-    to: "DeskKBHome",
-  },
-  {
-    label: "Teams",
-    icon: LucideUsers,
-    to: AGENT_PORTAL_TEAM_LIST,
-  },
-  {
-    label: "Canned responses",
-    icon: LucideCloudLightning,
-    to: "CannedResponses",
-  },
-  {
-    label: "Customers",
-    icon: LucideUserCircle2,
-    to: AGENT_PORTAL_CUSTOMER_LIST,
-  },
-  {
-    label: "Contacts",
-    icon: LucideContact2,
-    to: AGENT_PORTAL_CONTACT_LIST,
-  },
-]);
-
-const customperPortalSidebarOptions = computed(() => [
-  {
-    label: "Tickets",
-    icon: LucideTicket,
-    to: "TicketsCustomer",
-  },
-  {
-    label: "Knowledge base",
-    icon: LucideBookOpen,
-    to: "KBHome",
-  },
-]);
-
 const menuOptions = computed(() => {
   return isCustomerPortal.value
-    ? customperPortalSidebarOptions.value
-    : agentPortalSidebarOptions.value;
+    ? customerPortalSidebarOptions
+    : agentPortalSidebarOptions;
 });
 
 const customerPortalDropdown = computed(() => [

diff --git a/desk/src/components/layouts/layoutSettings.ts b/desk/src/components/layouts/layoutSettings.ts
@@ -0,0 +1,65 @@
+import LucideBookOpen from "~icons/lucide/book-open";
+import LucideCloudLightning from "~icons/lucide/cloud-lightning";
+import LucideContact2 from "~icons/lucide/contact-2";
+import LucideTicket from "~icons/lucide/ticket";
+import LucideUser from "~icons/lucide/user";
+import LucideUserCircle2 from "~icons/lucide/user-circle-2";
+import LucideUsers from "~icons/lucide/users";
+import {
+  AGENT_PORTAL_AGENT_LIST,
+  AGENT_PORTAL_CONTACT_LIST,
+  AGENT_PORTAL_CUSTOMER_LIST,
+  AGENT_PORTAL_TEAM_LIST,
+  AGENT_PORTAL_TICKET_LIST,
+} from "@/router";
+
+export const agentPortalSidebarOptions = [
+  {
+    label: "Tickets",
+    icon: LucideTicket,
+    to: AGENT_PORTAL_TICKET_LIST,
+  },
+  {
+    label: "Agents",
+    icon: LucideUser,
+    to: AGENT_PORTAL_AGENT_LIST,
+  },
+  {
+    label: "Knowledge base",
+    icon: LucideBookOpen,
+    to: "DeskKBHome",
+  },
+  {
+    label: "Teams",
+    icon: LucideUsers,
+    to: AGENT_PORTAL_TEAM_LIST,
+  },
+  {
+    label: "Canned responses",
+    icon: LucideCloudLightning,
+    to: "CannedResponses",
+  },
+  {
+    label: "Customers",
+    icon: LucideUserCircle2,
+    to: AGENT_PORTAL_CUSTOMER_LIST,
+  },
+  {
+    label: "Contacts",
+    icon: LucideContact2,
+    to: AGENT_PORTAL_CONTACT_LIST,
+  },
+];
+
+export const customerPortalSidebarOptions = [
+  {
+    label: "Tickets",
+    icon: LucideTicket,
+    to: "TicketsCustomer",
+  },
+  {
+    label: "Knowledge base",
+    icon: LucideBookOpen,
+    to: "KBHome",
+  },
+];