Fix TS errors, combine utils and update share btn text on bps

frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue

@@ -77,15 +77,21 @@ import {
 import type MenuEntry from "~/types/menu-entry";
 import { SidebarType } from "~/types/sidebar-type";
 import {
-  isCurrentRoutePathSubpageOf,
   currentRoutePathIncludes,
-} from "~/utils/pathUtils";
+  isCurrentRoutePathSubpageOf,
+} from "~/utils/routeUtils";
 
 const { currentRoute } = useRouter();
 const routeName = currentRoute.value.name;
+let routeToCheck = routeName;
+if (routeToCheck) {
+  routeToCheck = routeToCheck.toString();
+} else {
+  routeToCheck = "";
+}
 
-const isOrgPage = isCurrentRoutePathSubpageOf("organizations", routeName);
-const isEventPage = isCurrentRoutePathSubpageOf("events", routeName);
+const isOrgPage = isCurrentRoutePathSubpageOf("organizations", routeToCheck);
+const isEventPage = isCurrentRoutePathSubpageOf("events", routeToCheck);
 
 const pathToSidebarTypeMap = [
   { path: "search", type: SidebarType.SEARCH },
@@ -104,7 +110,7 @@ const pathToSidebarTypeMap = [
 
 const sidebarType =
   pathToSidebarTypeMap.find((item) =>
-    currentRoutePathIncludes(item.path, routeName)
+    currentRoutePathIncludes(item.path, routeToCheck)
   )?.type || SidebarType.MISC;
 const menuEntryState = useMenuEntriesState();
 const selectedMenuItem = ref<MenuEntry | undefined>(undefined);

frontend/components/sidebar/left/SidebarLeft.vue

@@ -62,9 +62,9 @@ import type { Filters } from "~/types/filters";
 import { SearchBarLocation } from "~/types/location";
 import { SidebarType } from "~/types/sidebar-type";
 import {
-  isCurrentRoutePathSubpageOf,
   currentRoutePathIncludes,
-} from "~/utils/pathUtils";
+  isCurrentRoutePathSubpageOf,
+} from "~/utils/routeUtils";
 
 defineProps<{
   name?: string;
@@ -74,9 +74,15 @@ const sidebar = useSidebar();
 const route = useRoute();
 const { currentRoute } = useRouter();
 const routeName = currentRoute.value.name;
+let routeToCheck = routeName;
+if (routeToCheck) {
+  routeToCheck = routeToCheck.toString();
+} else {
+  routeToCheck = "";
+}
 
-const isOrgPage = isCurrentRoutePathSubpageOf("organizations", routeName);
-const isEventPage = isCurrentRoutePathSubpageOf("events", routeName);
+const isOrgPage = isCurrentRoutePathSubpageOf("organizations", routeToCheck);
+const isEventPage = isCurrentRoutePathSubpageOf("events", routeToCheck);
 
 const pathToSidebarTypeMap = [
   { path: "search", type: SidebarType.SEARCH },
@@ -95,7 +101,7 @@ const pathToSidebarTypeMap = [
 
 const sidebarType =
   pathToSidebarTypeMap.find((item) =>
-    currentRoutePathIncludes(item.path, routeName)
+    currentRoutePathIncludes(item.path, routeToCheck)
   )?.type || SidebarType.MISC;
 
 // TODO: Use real name of organization / event when available from backend.

frontend/pages/events/[id]/about.vue

@@ -34,8 +34,8 @@
           @keydown.enter="openModal()"
           class="w-max"
           :cta="true"
-          :label="$t('components._global.share-event')"
-          :hideLabelOnMobile="true"
+          :label="$t(shareButtonLabel)"
+          :hideLabelOnMobile="false"
           fontSize="sm"
           leftIcon="bi:box-arrow-up"
           iconSize="1.45em"
@@ -88,6 +88,7 @@
 </template>
 
 <script setup lang="ts">
+import { Breakpoint } from "~/types/breakpoints";
 import { testClimateEvent } from "~/utils/testEntities";
 
 definePageMeta({
@@ -101,6 +102,23 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
+const currentWidth = ref(window.innerWidth);
+let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+const shareButtonLabel = ref("");
+
+function updateShareBtnLabel() {
+  if (currentWidth.value < Breakpoint.SMALL) {
+    shareButtonLabel.value = "components.btn-action.share";
+  } else {
+    shareButtonLabel.value = "components._global.share-group";
+  }
+}
+
+onMounted(() => {
+  window.addEventListener("resize", handleResize);
+  updateShareBtnLabel();
+});
+
 const isUnderLargeBP = ref(false);
 
 const checkUnderLargeBP = () => {
@@ -109,6 +127,11 @@ const checkUnderLargeBP = () => {
 
 const handleResize = () => {
   checkUnderLargeBP();
+
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout);
+  }
+  resizeTimeout = setTimeout(updateShareBtnLabel, 100);
 };
 
 onMounted(() => {

frontend/pages/organizations/[id]/about.vue

@@ -35,8 +35,8 @@
           @keydown.enter="openModal()"
           class="w-max"
           :cta="true"
-          :label="$t('components._global.share-organization')"
-          :hideLabelOnMobile="true"
+          :label="$t(shareButtonLabel)"
+          :hideLabelOnMobile="false"
           fontSize="sm"
           leftIcon="bi:box-arrow-up"
           iconSize="1.45em"
@@ -107,6 +107,7 @@
 </template>
 
 <script setup lang="ts">
+import { Breakpoint } from "~/types/breakpoints";
 import type { DiscussionEntry } from "~/types/discussion-entry";
 import type { DiscussionInput } from "~/types/discussion-input";
 import { testTechOrg } from "~/utils/testEntities";
@@ -123,6 +124,30 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
+const currentWidth = ref(window.innerWidth);
+let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+const shareButtonLabel = ref("");
+
+function updateShareBtnLabel() {
+  if (currentWidth.value < Breakpoint.SMALL) {
+    shareButtonLabel.value = "components.btn-action.share";
+  } else {
+    shareButtonLabel.value = "components._global.share-organization";
+  }
+}
+
+const handleResize = () => {
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout);
+  }
+  resizeTimeout = setTimeout(updateShareBtnLabel, 100);
+};
+
+onMounted(() => {
+  window.addEventListener("resize", handleResize);
+  updateShareBtnLabel();
+});
+
 // TODO: for testing purpose, should be removed.
 // const upVotes = ref(123);
 // const downVotes = ref(123);

frontend/pages/organizations/[id]/groups/[id]/about.vue

@@ -40,8 +40,8 @@
           @keydown.enter="openModal()"
           class="w-max"
           :cta="true"
-          :label="$t('components._global.share-group')"
-          :hideLabelOnMobile="true"
+          :label="$t(shareButtonLabel)"
+          :hideLabelOnMobile="false"
           fontSize="sm"
           leftIcon="bi:box-arrow-up"
           iconSize="1.45em"
@@ -84,6 +84,7 @@
 </template>
 
 <script setup lang="ts">
+import { Breakpoint } from "~/types/breakpoints";
 import { getGroupSubPages } from "~/utils/groupSubPages";
 import { testTechGroup1 } from "~/utils/testEntities";
 
@@ -100,6 +101,30 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
+const currentWidth = ref(window.innerWidth);
+let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+const shareButtonLabel = ref("");
+
+function updateShareBtnLabel() {
+  if (currentWidth.value < Breakpoint.SMALL) {
+    shareButtonLabel.value = "components.btn-action.share";
+  } else {
+    shareButtonLabel.value = "components._global.share-group";
+  }
+}
+
+const handleResize = () => {
+  if (resizeTimeout) {
+    clearTimeout(resizeTimeout);
+  }
+  resizeTimeout = setTimeout(updateShareBtnLabel, 100);
+};
+
+onMounted(() => {
+  window.addEventListener("resize", handleResize);
+  updateShareBtnLabel();
+});
+
 const modalIsOpen = ref(false);
 
 function openModal() {

frontend/utils/routeUtils.ts

@@ -2,3 +2,20 @@ export function isRouteActive(routePath: string): boolean {
   const route = useRoute();
   return route.path.split("/")[2] === routePath.substring(1, routePath.length);
 }
+
+export function isCurrentRoutePathSubpageOf(path: string, routeName: string) {
+  // Remove the localization part of the route name if it exists.
+  let routeNameToCheck = routeName;
+  routeNameToCheck = routeNameToCheck.split("__")[0];
+
+  const segments = routeNameToCheck.split(path + "-");
+  const subpage = segments.length > 1 ? segments[1] : "";
+  return subpage !== "search" && subpage !== "create" && subpage.length > 0;
+}
+
+export function currentRoutePathIncludes(
+  path: string,
+  routeName: string
+): boolean {
+  return routeName.includes(path);
+}