islongEvents -> isLongEvents

src/components/Home/SearchFields.vue

@@ -58,7 +58,7 @@
       class="search-Activity min-w-40 mr-1 mb-1"
       native-type="submit"
       icon-left="calendar-star"
-      v-if="islongEvents"
+      v-if="search == null && isLongEvents"
     >
       {{ t("Activities") }}
     </o-button>
@@ -100,7 +100,7 @@ const props = defineProps<{
 
 const router = useRouter();
 const route = useRoute();
-const { islongEvents } = useIsLongEvents();
+const { isLongEvents } = useIsLongEvents();
 
 const emit = defineEmits<{
   (event: "update:address", address: IAddress | null): void;

src/components/NavBar.vue

@@ -179,6 +179,39 @@
         <ul
           class="flex flex-col md:flex-row md:space-x-8 mt-2 md:mt-0 md:font-lightbold"
         >
+          <li class="m-auto">
+            <router-link
+              :to="{
+                ...$route,
+                name: RouteName.SEARCH,
+                query: { ...$route.query, contentType: 'EVENTS' },
+              }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Events") }}</router-link
+            >
+          </li>
+          <li class="m-auto" v-if="isLongEvents">
+            <router-link
+              :to="{
+                ...$route,
+                name: RouteName.SEARCH,
+                query: { ...$route.query, contentType: 'LONGEVENTS' },
+              }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Activities") }}</router-link
+            >
+          </li>
+          <li class="m-auto">
+            <router-link
+              :to="{
+                ...$route,
+                name: RouteName.SEARCH,
+                query: { ...$route.query, contentType: 'GROUPS' },
+              }"
+              class="block py-2 pr-4 pl-3 text-zinc-700 border-b border-gray-100 hover:bg-zinc-50 md:hover:bg-transparent md:border-0 md:hover:text-mbz-purple-700 md:p-0 dark:text-zinc-400 md:dark:hover:text-white dark:hover:bg-zinc-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
+              >{{ t("Groups") }}</router-link
+            >
+          </li>
           <li class="m-auto">
             <router-link
               :to="{ name: RouteName.EVENT_CALENDAR }"
@@ -250,6 +283,8 @@ import {
 } from "@/graphql/user";
 import { ICurrentUser } from "@/types/current-user.model";
 
+const { isLongEvents } = useIsLongEvents();
+
 const { currentUser } = useCurrentUserClient();
 const { currentActor } = useCurrentActorClient();
 

src/composition/apollo/config.ts

@@ -227,8 +227,8 @@ export function useIsLongEvents() {
     config: Pick<IConfig, "longEvents">;
   }>(LONG_EVENTS);
 
-  const islongEvents = computed(() => result.value?.config.longEvents);
+  const isLongEvents = computed(() => result.value?.config.longEvents);
-  return { islongEvents, error, loading };
+  return { isLongEvents, error, loading };
 }
 
 export function useAnalytics() {

src/views/SearchView.vue

@@ -716,6 +716,7 @@ const GROUP_PAGE_LIMIT = 16;
 
 const { features } = useFeatures();
 const { eventCategories } = useEventCategories();
+const { isLongEvents } = useIsLongEvents();
 
 const orderedCategories = computed(() => {
   if (!eventCategories.value) return [];
@@ -828,6 +829,36 @@ const searchIsUrl = computed((): boolean => {
   return url.protocol === "http:" || url.protocol === "https:";
 });
 
+const contentTypeMapping = computed(() => {
+  if (isLongEvents.value) {
+    return [
+      {
+        contentType: ContentType.EVENTS,
+        label: t("Events"),
+      },
+      {
+        contentType: ContentType.LONGEVENTS,
+        label: t("Activities"),
+      },
+      {
+        contentType: ContentType.GROUPS,
+        label: t("Groups"),
+      },
+    ];
+  } else {
+    return [
+      {
+        contentType: ContentType.EVENTS,
+        label: t("Events"),
+      },
+      {
+        contentType: ContentType.GROUPS,
+        label: t("Groups"),
+      },
+    ];
+  }
+});
+
 const eventStatuses = computed(() => {
   return [
     {