diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue index 8706f1dc979a..84a1e7ea0474 100644 --- a/client/src/components/ActivityBar/ActivityBar.vue +++ b/client/src/components/ActivityBar/ActivityBar.vue @@ -50,7 +50,7 @@ const dragItem: Ref = ref(null); const isDragging = ref(false); /** - * Checks if the route of an activitiy is currently being visited and panels are collapsed + * Checks if the route of an activity is currently being visited and panels are collapsed */ function isActiveRoute(activityTo: string) { return route.path === activityTo && isActiveSideBar(""); @@ -63,6 +63,13 @@ function isActiveSideBar(menuKey: string) { return userStore.toggledSideBar === menuKey; } +/** + * Checks if an activity that has a panel should have the `is-active` prop + */ +function panelActivityIsActive(activity: Activity) { + return isActiveSideBar(activity.id) || (activity.to !== null && isActiveRoute(activity.to)); +} + /** * Evaluates the drop data and keeps track of the drop area */ @@ -110,7 +117,12 @@ function onDragOver(evt: MouseEvent) { /** * Tracks the state of activities which expand or collapse the sidepanel */ -function onToggleSidebar(toggle: string) { +function onToggleSidebar(toggle: string, to: string | null = null) { + // if an activity's dedicated panel/sideBar is already active + // but the route is different, don't collapse + if (toggle && to && !(route.path === to) && isActiveSideBar(toggle)) { + return; + } userStore.toggleSideBar(toggle); } @@ -172,11 +184,11 @@ function toggleContextMenu(evt: MouseEvent) { :id="`activity-${activity.id}`" :key="activity.id" :icon="activity.icon" - :is-active="isActiveSideBar(activity.id)" + :is-active="panelActivityIsActive(activity)" :title="activity.title" :tooltip="activity.tooltip" :to="activity.to" - @click="onToggleSidebar(activity.id)" /> + @click="onToggleSidebar(activity.id, activity.to)" />