From 79238c1e15d1d220f58faad04f1e03a726e5a2eb Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <1697880+AngelFQC@users.noreply.github.com>
Date: Fri, 5 Jul 2024 17:14:44 -0500
Subject: [PATCH] Display: Fix anchor target in sidebar menu #21620

---
 assets/css/scss/organisms/_sidebar.scss       | 12 ------
 .../basecomponents/BaseSidebarPanelMenu.vue   | 43 +++++++++++++++++++
 .../components/basecomponents/ChamiloIcons.js |  2 +
 assets/vue/components/layout/Sidebar.vue      | 12 +++---
 assets/vue/composables/sidebarMenu.js         | 21 +++++----
 5 files changed, 62 insertions(+), 28 deletions(-)
 create mode 100644 assets/vue/components/basecomponents/BaseSidebarPanelMenu.vue

diff --git a/assets/css/scss/organisms/_sidebar.scss b/assets/css/scss/organisms/_sidebar.scss
index 7d560cbb58..1a2185d3ff 100644
--- a/assets/css/scss/organisms/_sidebar.scss
+++ b/assets/css/scss/organisms/_sidebar.scss
@@ -104,18 +104,6 @@
         }
       }
 
-      &[aria-expanded="false"] {
-        .p-submenu-icon {
-          @apply rotate-90;
-        }
-      }
-
-      &[aria-expanded="true"] {
-        .p-submenu-icon {
-          @apply rotate-180;
-        }
-      }
-
       > .p-panelmenu-header-content a {
         .p-menuitem-text {
           @apply order-2 grow text-body-2 font-semibold whitespace-nowrap;
diff --git a/assets/vue/components/basecomponents/BaseSidebarPanelMenu.vue b/assets/vue/components/basecomponents/BaseSidebarPanelMenu.vue
new file mode 100644
index 0000000000..6491a6682c
--- /dev/null
+++ b/assets/vue/components/basecomponents/BaseSidebarPanelMenu.vue
@@ -0,0 +1,43 @@
+<script setup>
+import BaseAppLink from "./BaseAppLink.vue"
+import PanelMenu from "primevue/panelmenu"
+import BaseIcon from "./BaseIcon.vue"
+
+defineModel({
+  type: Array,
+  required: true,
+})
+</script>
+
+<template>
+  <PanelMenu :model="modelValue">
+    <template #item="{ item, root, active, props }">
+      <BaseAppLink
+        v-if="item.route || item.url"
+        :to="item.route"
+        :url="item.url"
+        :class="{ 'p-panelmenu-header-action': root, 'p-menuitem-link': !root }"
+      >
+        <span v-bind="props.icon" />
+        <span
+          v-bind="props.label"
+          v-text="item.label"
+        />
+      </BaseAppLink>
+      <a
+        v-else-if="root"
+        class="p-panelmenu-header-action"
+      >
+        <span v-bind="props.icon" />
+        <span
+          v-bind="props.label"
+          v-text="item.label"
+        />
+        <BaseIcon
+          :icon="active ? 'fold' : 'unfold'"
+          class="p-icon p-submenu-icon"
+        />
+      </a>
+    </template>
+  </PanelMenu>
+</template>
diff --git a/assets/vue/components/basecomponents/ChamiloIcons.js b/assets/vue/components/basecomponents/ChamiloIcons.js
index b34f6db687..382fc23bb4 100644
--- a/assets/vue/components/basecomponents/ChamiloIcons.js
+++ b/assets/vue/components/basecomponents/ChamiloIcons.js
@@ -27,6 +27,8 @@ export const chamiloIconToClass = {
   "checkbox-multiple-blank-outline": "",
   "chevron-left": "",
   "chevron-right": "",
+  "unfold": "mdi mdi-chevron-down",
+  "fold": "mdi mdi-chevron-up",
   "close": "mdi mdi-close",
   "cog": "mdi mdi-cog",
   "confirm": "mdi mdi-check",
diff --git a/assets/vue/components/layout/Sidebar.vue b/assets/vue/components/layout/Sidebar.vue
index 30dce76536..dbb0ca3448 100644
--- a/assets/vue/components/layout/Sidebar.vue
+++ b/assets/vue/components/layout/Sidebar.vue
@@ -8,10 +8,11 @@
         class="app-sidebar__panel"
         @click="handlePanelHeaderClick"
       >
-        <PanelMenu :model="menuItemsBeforeMyCourse" />
-        <PanelMenu
+        <BaseSidebarPanelMenu v-model="menuItemsBeforeMyCourse" />
+
+        <BaseSidebarPanelMenu
           v-if="enrolledStore.isInitialized"
-          :model="menuItemMyCourse"
+          v-model="menuItemMyCourse"
         />
         <div
           v-else
@@ -34,7 +35,8 @@
             icon="sync"
           />
         </div>
-        <PanelMenu :model="menuItemsAfterMyCourse" />
+
+        <BaseSidebarPanelMenu v-model="menuItemsAfterMyCourse" />
       </div>
       <div class="app-sidebar__bottom">
         <PageList category-title="footer_private" />
@@ -71,7 +73,6 @@
 
 <script setup>
 import { onMounted, ref, watch } from "vue"
-import PanelMenu from "primevue/panelmenu"
 import ToggleButton from "primevue/togglebutton"
 import { useI18n } from "vue-i18n"
 import { useSecurityStore } from "../../store/securityStore"
@@ -79,6 +80,7 @@ import { useSidebarMenu } from "../../composables/sidebarMenu"
 import PageList from "../page/PageList.vue"
 import { useEnrolledStore } from "../../store/enrolledStore"
 import BaseIcon from "../basecomponents/BaseIcon.vue"
+import BaseSidebarPanelMenu from "../basecomponents/BaseSidebarPanelMenu.vue"
 
 const { t } = useI18n()
 const securityStore = useSecurityStore()
diff --git a/assets/vue/composables/sidebarMenu.js b/assets/vue/composables/sidebarMenu.js
index 84c9692580..bfbbd127d4 100644
--- a/assets/vue/composables/sidebarMenu.js
+++ b/assets/vue/composables/sidebarMenu.js
@@ -3,12 +3,11 @@ import { computed } from "vue"
 import { useSecurityStore } from "../store/securityStore"
 import { usePlatformConfig } from "../store/platformConfig"
 import { useEnrolledStore } from "../store/enrolledStore"
-import { useRoute, useRouter } from "vue-router"
+import { useRoute } from "vue-router"
 import { useSocialMenuItems } from "./useSocialMenuItems"
 
 export function useSidebarMenu() {
   const { t } = useI18n()
-  const router = useRouter()
   const route = useRoute()
   const securityStore = useSecurityStore()
   const platformConfigStore = usePlatformConfig()
@@ -33,7 +32,7 @@ export function useSidebarMenu() {
       items.push({
         icon: "mdi mdi-home",
         label: t("Home"),
-        url: router.resolve({ name: "Home" }).href,
+        route: { name: "Home" },
       })
     }
 
@@ -49,14 +48,14 @@ export function useSidebarMenu() {
       if (enrolledStore.isEnrolledInCourses) {
         courseItems.push({
           label: t("My courses"),
-          url: router.resolve({ name: "MyCourses" }).href,
+          route: { name: "MyCourses" },
         })
       }
 
       if (enrolledStore.isEnrolledInSessions) {
         courseItems.push({
           label: t("My sessions"),
-          url: router.resolve({ name: "MySessions" }).href,
+          route: { name: "MySessions" },
         })
       }
 
@@ -65,7 +64,7 @@ export function useSidebarMenu() {
           icon: "mdi mdi-book-open-page-variant",
           label: courseItems.length > 1 ? t("Course") : courseItems[0].label,
           items: courseItems.length > 1 ? courseItems : undefined,
-          url: 1 === courseItems.length ? courseItems[0].url : undefined,
+          route: 1 === courseItems.length ? courseItems[0].route : undefined,
           class: courseItems.length > 0 ? courseItems[0].class : "",
         })
       }
@@ -82,14 +81,14 @@ export function useSidebarMenu() {
         items.push({
           icon: "mdi mdi-bookmark-multiple",
           label: t("Courses catalogue"),
-          url: router.resolve({ name: "CatalogueCourses" }).href,
+          route: { name: "CatalogueCourses" },
         })
       }
       if (showCatalogue > 0) {
         items.push({
           icon: "mdi mdi-bookmark-multiple-outline",
           label: t("Sessions catalogue"),
-          url: () => router.resolve({ name: "CatalogueSessions" }).href,
+          route: { name: "CatalogueSessions" },
         })
       }
     }
@@ -98,7 +97,7 @@ export function useSidebarMenu() {
       items.push({
         icon: "mdi mdi-calendar-text",
         label: t("Events"),
-        url: () => router.resolve({ name: "CCalendarEventList" }).href,
+        route: { name: "CCalendarEventList" },
       })
     }
 
@@ -139,7 +138,7 @@ export function useSidebarMenu() {
         if (newItem.isLink && newItem.route) {
           newItem.url = newItem.route
         } else if (newItem.route) {
-          newItem.url = router.resolve(newItem.route).href
+          // nothing to do
         } else if (newItem.link) {
           newItem.url = newItem.link
         }
@@ -185,7 +184,7 @@ export function useSidebarMenu() {
       const adminItems = [
         {
           label: t("Administration"),
-          url: router.resolve({ name: "AdminIndex" }).href,
+          route: { name: "AdminIndex" },
         },
       ]