From 6ac07e9a198074f6b454ed37376d449921b6c17b Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Thu, 14 Dec 2023 15:11:52 +0100
Subject: [PATCH 01/10] Decompose and spread home config un home component

---
 frontend/src/components/pages/home/Home.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/pages/home/Home.tsx b/frontend/src/components/pages/home/Home.tsx
index fda46d173..84bf512f3 100644
--- a/frontend/src/components/pages/home/Home.tsx
+++ b/frontend/src/components/pages/home/Home.tsx
@@ -14,10 +14,13 @@ const {
 } = getNextConfig();
 
 const HomeUI: React.FC = () => {
-  const { config, suggestions } = useHome();
+  const {
+    config: { activityBar, welcomeBanner },
+    suggestions,
+  } = useHome();
 
   const contentContainerClassname = `relative ${
-    config.activityBar.shouldDisplay ? '-top-6 desktop:-top-15' : 'pt-6 desktop:pt-18'
+    activityBar.shouldDisplay ? '-top-6 desktop:-top-15' : 'pt-6 desktop:pt-18'
   }`;
 
   const intl = useIntl();
@@ -32,14 +35,9 @@ const HomeUI: React.FC = () => {
         description={intl.formatMessage({ id: 'home.description' })}
       />
       <HomeContainer id="home_container">
-        <BannerWithAsset
-          shouldDisplayText={config.welcomeBanner.shouldDisplayText}
-          carouselUrls={config.welcomeBanner.carouselUrls}
-          pictureUrl={config.welcomeBanner.pictureUrl}
-          videoUrl={config.welcomeBanner.videoUrl}
-        />
+        <BannerWithAsset {...welcomeBanner} />
         <div id="home_content" className={contentContainerClassname}>
-          {config.activityBar.shouldDisplay && (
+          {activityBar.shouldDisplay && (
             <div
               className={`desktop:flex desktop:justify-center ${classNameHomeChild}`}
               id="home_activitiesBar"

From 5205a39361967c0d652d2c29bcfb573f6f7b698d Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Thu, 14 Dec 2023 15:20:55 +0100
Subject: [PATCH 02/10] Add numberOfItemsBeforeTruncation activityBar home
 config

---
 frontend/config/home.json                            |  3 ++-
 frontend/customization/config/home.json              |  3 ++-
 .../ActivitySearchFilter/ActivitySearchFilter.tsx    | 12 +++++++-----
 frontend/src/components/pages/home/Home.tsx          |  4 +++-
 frontend/src/modules/home/interface.ts               |  1 +
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/config/home.json b/frontend/config/home.json
index 79288d93f..c84858fbe 100644
--- a/frontend/config/home.json
+++ b/frontend/config/home.json
@@ -8,7 +8,8 @@
     "shouldDisplayText": true
   },
   "activityBar": {
-    "shouldDisplay": true
+    "shouldDisplay": true,
+    "numberOfItemsBeforeTruncation": 8
   },
   "suggestions": {
     "default": []
diff --git a/frontend/customization/config/home.json b/frontend/customization/config/home.json
index 60b471703..cf7a0b279 100644
--- a/frontend/customization/config/home.json
+++ b/frontend/customization/config/home.json
@@ -8,7 +8,8 @@
     "shouldDisplayText": true
   },
   "activityBar": {
-    "shouldDisplay": true
+    "shouldDisplay": true,
+    "numberOfItemsBeforeTruncation": 8
   },
   "suggestions": {
     "default": [
diff --git a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
index 21d7bf91d..3b1d95396 100644
--- a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
+++ b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
@@ -12,20 +12,22 @@ import { ActivitySearchFilterMobile } from './ActivitySearchFilterMobile';
 
 interface Props {
   className?: string;
+  itemsToDisplayBeforeTruncation: number;
 }
 
-const MAX_VISIBLE_ACTIVITIES = 8;
-
-export const ActivitySearchFilter: React.FC<Props> = ({ className }) => {
+export const ActivitySearchFilter: React.FC<Props> = ({
+  className,
+  itemsToDisplayBeforeTruncation = 8,
+}) => {
   const { activities, expandedState, toggleExpandedState } = useActivitySearchFilter();
 
   const collapseIsNeeded: boolean =
-    activities !== undefined && activities.length > MAX_VISIBLE_ACTIVITIES;
+    activities !== undefined && activities.length > itemsToDisplayBeforeTruncation;
 
   const visibleActivities: ActivityFilter[] | undefined =
     activities !== undefined
       ? collapseIsNeeded && expandedState === 'COLLAPSED'
-        ? activities.slice(0, MAX_VISIBLE_ACTIVITIES)
+        ? activities.slice(0, itemsToDisplayBeforeTruncation)
         : activities
       : undefined;
 
diff --git a/frontend/src/components/pages/home/Home.tsx b/frontend/src/components/pages/home/Home.tsx
index 84bf512f3..35c593b36 100644
--- a/frontend/src/components/pages/home/Home.tsx
+++ b/frontend/src/components/pages/home/Home.tsx
@@ -42,7 +42,9 @@ const HomeUI: React.FC = () => {
               className={`desktop:flex desktop:justify-center ${classNameHomeChild}`}
               id="home_activitiesBar"
             >
-              <ActivitySearchFilter />
+              <ActivitySearchFilter
+                itemsToDisplayBeforeTruncation={activityBar.numberOfItemsBeforeTruncation}
+              />
             </div>
           )}
           {homeTop !== undefined && (
diff --git a/frontend/src/modules/home/interface.ts b/frontend/src/modules/home/interface.ts
index 72e25a53b..3f8e880c5 100644
--- a/frontend/src/modules/home/interface.ts
+++ b/frontend/src/modules/home/interface.ts
@@ -1,5 +1,6 @@
 interface ActivityBar {
   shouldDisplay: boolean;
+  numberOfItemsBeforeTruncation: number;
 }
 
 interface WelcomeBanner {

From 72e15f974736b356a6f18465425204a55c3394ff Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Thu, 14 Dec 2023 15:33:50 +0100
Subject: [PATCH 03/10] Rewrite ActivitySearchFilter component

---
 .../ActivitySearchFilter.tsx                  | 86 +++++++++----------
 1 file changed, 42 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
index 3b1d95396..0c241b7a5 100644
--- a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
+++ b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
@@ -1,11 +1,11 @@
 import { ChevronDown } from 'components/Icons/ChevronDown';
 import { MoreHorizontal } from 'components/Icons/MoreHorizontal';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { routes } from 'services/routes';
 import { ActivityFilter } from 'modules/activities/interface';
 import { CATEGORY_ID, EVENT_ID, OUTDOOR_ID, PRACTICE_ID } from 'modules/filters/constant';
 
+import { cn } from 'services/utils/cn';
 import { ActivityButton } from './ActivityButton';
 import { useActivitySearchFilter } from './useActivitySearchFilter';
 import { ActivitySearchFilterMobile } from './ActivitySearchFilterMobile';
@@ -21,16 +21,6 @@ export const ActivitySearchFilter: React.FC<Props> = ({
 }) => {
   const { activities, expandedState, toggleExpandedState } = useActivitySearchFilter();
 
-  const collapseIsNeeded: boolean =
-    activities !== undefined && activities.length > itemsToDisplayBeforeTruncation;
-
-  const visibleActivities: ActivityFilter[] | undefined =
-    activities !== undefined
-      ? collapseIsNeeded && expandedState === 'COLLAPSED'
-        ? activities.slice(0, itemsToDisplayBeforeTruncation)
-        : activities
-      : undefined;
-
   const getId = (type: string) => {
     if (type === 'PRACTICE') return PRACTICE_ID;
     if (type === 'OUTDOOR_PRACTICE') return OUTDOOR_ID;
@@ -39,41 +29,49 @@ export const ActivitySearchFilter: React.FC<Props> = ({
     return CATEGORY_ID;
   };
 
+  if (activities === undefined) {
+    return null;
+  }
+
+  const collapseIsNeeded: boolean = activities.length > itemsToDisplayBeforeTruncation;
+
+  const visibleActivities: ActivityFilter[] =
+    collapseIsNeeded && expandedState === 'COLLAPSED'
+      ? activities.slice(0, itemsToDisplayBeforeTruncation)
+      : activities;
+
   return (
-    <div>
-      {activities !== undefined && (
-        <>
-          <div
-            className={`px-3 pb-6 bg-white shadow-lg rounded-2xl hidden self-center max-w-activitySearchFilter desktop:flex${
-              className ?? ''
-            }`}
+    <nav role="navigation">
+      <div
+        className={cn(
+          'px-3 pb-6 bg-white shadow-lg rounded-2xl hidden self-center max-w-activitySearchFilter desktop:flex',
+          className,
+        )}
+      >
+        <div className="flex content-evenly flex-wrap flex-1 items-center">
+          {visibleActivities.map(activity => (
+            <ActivityButton
+              iconUrl={activity.pictogramUri}
+              href={`${routes.SEARCH}?${getId(activity.type)}=${activity.id}`}
+              key={`${activity.type}-${activity.id}`}
+              label={activity.label}
+            />
+          ))}
+        </div>
+        {collapseIsNeeded && (
+          <button
+            type="button"
+            className="self-end hover:text-primary3 transition-colors text-greyDarkColored"
+            onClick={toggleExpandedState}
           >
-            <div className="flex content-evenly flex-wrap flex-1 items-center">
-              {visibleActivities?.map(activity => (
-                <ActivityButton
-                  iconUrl={activity.pictogramUri}
-                  href={`${routes.SEARCH}?${getId(activity.type)}=${activity.id}`}
-                  key={`${activity.type}-${activity.id}`}
-                  label={activity.label}
-                />
-              ))}
-            </div>
-            {collapseIsNeeded && (
-              <button
-                type="button"
-                className="self-end hover:text-primary3 transition-colors text-greyDarkColored"
-                onClick={toggleExpandedState}
-              >
-                <ControlCollapseButton expandedState={expandedState} />
-              </button>
-            )}
-          </div>
-          <div className="block desktop:hidden">
-            <ActivitySearchFilterMobile activities={activities ?? []} getId={getId} />
-          </div>
-        </>
-      )}
-    </div>
+            <ControlCollapseButton expandedState={expandedState} />
+          </button>
+        )}
+      </div>
+      <div className="block desktop:hidden">
+        <ActivitySearchFilterMobile activities={activities} getId={getId} />
+      </div>
+    </nav>
   );
 };
 

From f5f388a7b295ef7be7779e6700284d6fa2e5c74e Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Fri, 15 Dec 2023 14:59:31 +0100
Subject: [PATCH 04/10] Create practice-trek icon

---
 frontend/src/public/icons/practice-trek.svg | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 frontend/src/public/icons/practice-trek.svg

diff --git a/frontend/src/public/icons/practice-trek.svg b/frontend/src/public/icons/practice-trek.svg
new file mode 100644
index 000000000..4984eb81d
--- /dev/null
+++ b/frontend/src/public/icons/practice-trek.svg
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 174.653 99.58"
+  height="376.364"
+  width="660.105"
+>
+  <path
+    d="M39.407 54.484c-12.992 0-23.584 10.595-23.584 23.46 0 12.097 9.275 22.098 21.114 23.335 5.05 10.215 10.225 17.31 15.805 21.854 5.922 4.825 12.41 6.65 18.645 6.05 12.47-1.2 23.383-10.647 34.08-19.572 10.694-8.922 21.204-17.388 30.126-18.891 4.46-.751 8.49-.137 13.026 3.025 3.767 2.625 7.862 7.19 12.039 14.261-9.983 2.742-17.41 11.799-17.41 22.534 0 12.945 10.653 23.521 23.644 23.521 12.928 0 23.584-10.576 23.584-23.521 0-12.079-9.353-22.13-21.175-23.336h-.062c-5.132-9.492-10.353-15.969-16.051-19.94-4.547-3.168-9.445-4.597-14.2-4.692-1.584-.032-3.144.047-4.692.308-12.383 2.087-23.238 11.792-33.893 20.682-10.655 8.89-21.06 16.881-29.757 17.719-4.348.419-8.391-.533-12.965-4.26-3.868-3.151-7.987-8.46-12.223-16.422 10.061-2.687 17.533-11.818 17.533-22.657 0-12.864-10.592-23.46-23.584-23.46zm0 7.901c8.74 0 15.68 7 15.68 15.558 0 8.651-6.94 15.558-15.68 15.558-8.74 0-15.68-6.906-15.68-15.558 0-8.557 6.94-15.558 15.68-15.558zm127.487 52.6c8.646 0 15.68 7.018 15.68 15.557 0 8.633-7.034 15.619-15.68 15.619-8.74 0-15.743-6.987-15.743-15.619 0-8.538 7.003-15.558 15.743-15.558z"
+    stroke-width="0.35277778"
+    transform="translate(-15.823 -54.482)"
+  />
+</svg>
\ No newline at end of file

From 86fbc48331aded7d5c49a1bac61bd4693bfc6739 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Fri, 15 Dec 2023 15:02:41 +0100
Subject: [PATCH 05/10] Handle barActivity translations

---
 .../ActivitySearchFilter/ActivitySearchFilter.tsx     | 11 ++++++++---
 frontend/src/modules/activities/interface.ts          |  1 +
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
index 0c241b7a5..db8a75e41 100644
--- a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
+++ b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
@@ -1,6 +1,6 @@
 import { ChevronDown } from 'components/Icons/ChevronDown';
 import { MoreHorizontal } from 'components/Icons/MoreHorizontal';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { routes } from 'services/routes';
 import { ActivityFilter } from 'modules/activities/interface';
 import { CATEGORY_ID, EVENT_ID, OUTDOOR_ID, PRACTICE_ID } from 'modules/filters/constant';
@@ -20,6 +20,7 @@ export const ActivitySearchFilter: React.FC<Props> = ({
   itemsToDisplayBeforeTruncation = 8,
 }) => {
   const { activities, expandedState, toggleExpandedState } = useActivitySearchFilter();
+  const intl = useIntl();
 
   const getId = (type: string) => {
     if (type === 'PRACTICE') return PRACTICE_ID;
@@ -29,7 +30,7 @@ export const ActivitySearchFilter: React.FC<Props> = ({
     return CATEGORY_ID;
   };
 
-  if (activities === undefined) {
+  if (!activities) {
     return null;
   }
 
@@ -54,7 +55,11 @@ export const ActivitySearchFilter: React.FC<Props> = ({
               iconUrl={activity.pictogramUri}
               href={`${routes.SEARCH}?${getId(activity.type)}=${activity.id}`}
               key={`${activity.type}-${activity.id}`}
-              label={activity.label}
+              label={
+                activity.titleTranslationId
+                  ? intl.formatMessage({ id: activity.titleTranslationId })
+                  : activity.label
+              }
             />
           ))}
         </div>
diff --git a/frontend/src/modules/activities/interface.ts b/frontend/src/modules/activities/interface.ts
index c7c59f821..e22e07d74 100644
--- a/frontend/src/modules/activities/interface.ts
+++ b/frontend/src/modules/activities/interface.ts
@@ -26,4 +26,5 @@ export interface ActivityFilter extends Activity {
   id: number | string;
   order: null | number;
   type: 'PRACTICE' | 'OUTDOOR_PRACTICE' | 'CATEGORY' | 'TOURISTIC_EVENT_TYPE';
+  titleTranslationId?: string;
 }

From 6c414c8aa69fa6ca9ac209624a41e109ec8525b3 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Fri, 15 Dec 2023 15:03:54 +0100
Subject: [PATCH 06/10] Add activityBar links to the config

---
 frontend/config/home.json               | 18 +++++++++++++++++-
 frontend/customization/config/home.json | 18 +++++++++++++++++-
 frontend/src/modules/home/interface.ts  |  8 +++++++-
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/frontend/config/home.json b/frontend/config/home.json
index c84858fbe..205d1e91d 100644
--- a/frontend/config/home.json
+++ b/frontend/config/home.json
@@ -9,7 +9,23 @@
   },
   "activityBar": {
     "shouldDisplay": true,
-    "numberOfItemsBeforeTruncation": 8
+    "numberOfItemsBeforeTruncation": 8,
+    "links": [{
+      "type": "trek",
+      "grouped": false
+    },
+    {
+      "type": "outdoorSite",
+      "grouped": false
+    },
+    {
+      "type": "touristicContent",
+      "grouped": false
+    },
+    {
+      "type": "touristicEvent",
+      "grouped": false
+    }]
   },
   "suggestions": {
     "default": []
diff --git a/frontend/customization/config/home.json b/frontend/customization/config/home.json
index cf7a0b279..1cb315c49 100644
--- a/frontend/customization/config/home.json
+++ b/frontend/customization/config/home.json
@@ -9,7 +9,23 @@
   },
   "activityBar": {
     "shouldDisplay": true,
-    "numberOfItemsBeforeTruncation": 8
+    "numberOfItemsBeforeTruncation": 8,
+    "links": [{
+      "type": "trek",
+      "grouped": false
+    },
+    {
+      "type": "outdoorSite",
+      "grouped": false
+    },
+    {
+      "type": "touristicContent",
+      "grouped": false
+    },
+    {
+      "type": "touristicEvent",
+      "grouped": false
+    }]
   },
   "suggestions": {
     "default": [
diff --git a/frontend/src/modules/home/interface.ts b/frontend/src/modules/home/interface.ts
index 3f8e880c5..419bb4c42 100644
--- a/frontend/src/modules/home/interface.ts
+++ b/frontend/src/modules/home/interface.ts
@@ -1,6 +1,12 @@
-interface ActivityBar {
+export interface ActivityBar {
   shouldDisplay: boolean;
   numberOfItemsBeforeTruncation: number;
+  links: ActivityBarLinks[];
+}
+
+export interface ActivityBarLinks {
+  type: 'trek' | 'outdoorSite' | 'touristicContent' | 'touristicEvent';
+  grouped: boolean;
 }
 
 interface WelcomeBanner {

From f5638aefad9949f1258f075d26b2ce09afad74d2 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Fri, 15 Dec 2023 15:14:23 +0100
Subject: [PATCH 07/10] Handle barActivity with config

---
 .../ActivitySearchFilterMobile/index.tsx      |  7 +--
 .../useActivitySearchFilter.ts                |  5 +-
 frontend/src/modules/activities/adapter.ts    | 23 ++++++++-
 frontend/src/modules/activities/connector.ts  | 51 ++++++++++++-------
 .../src/modules/outdoorPractice/adapter.ts    | 22 +++++++-
 .../touristicContentCategory/adapter.ts       | 23 ++++++++-
 .../src/modules/touristicEventType/adapter.ts | 22 +++++++-
 frontend/src/pages/index.tsx                  |  2 +-
 frontend/src/translations/ca.json             | 10 +++-
 frontend/src/translations/de.json             |  8 ++-
 frontend/src/translations/en.json             |  8 ++-
 frontend/src/translations/es.json             | 10 +++-
 frontend/src/translations/fr.json             |  8 ++-
 frontend/src/translations/it.json             |  8 ++-
 14 files changed, 168 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilterMobile/index.tsx b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilterMobile/index.tsx
index 3c6ddd55b..a38a2c656 100644
--- a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilterMobile/index.tsx
+++ b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilterMobile/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Select, { CSSObjectWithLabel } from 'react-select';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 
 import { colorPalette, getSpacing, shadow } from 'stylesheet';
 import { routes } from 'services/routes';
@@ -17,6 +17,7 @@ export const ActivitySearchFilterMobile: React.FC<{
   getId: (type: string) => string;
 }> = ({ className = '', activities, getId }) => {
   const { selectedActivityId, updateSelectedActivityId } = useActivitySearchFilterMobile();
+  const intl = useIntl();
 
   const selectedActivity = activities.find(
     ({ id, type }) => `${type}-${id}` === selectedActivityId,
@@ -26,9 +27,9 @@ export const ActivitySearchFilterMobile: React.FC<{
     <div className={`${className} flex space-x-4 items-center`}>
       <Select
         className="flex-1"
-        options={activities.map(({ id, label, type }) => ({
+        options={activities.map(({ id, label, titleTranslationId, type }) => ({
           value: `${type}-${id}`,
-          label,
+          label: titleTranslationId ? intl.formatMessage({ id: titleTranslationId }) : label,
         }))}
         styles={selectStyles}
         instanceId="activitySearchFilterMobile"
diff --git a/frontend/src/components/ActivitySearchFilter/useActivitySearchFilter.ts b/frontend/src/components/ActivitySearchFilter/useActivitySearchFilter.ts
index 555c1bc08..7501210f2 100644
--- a/frontend/src/components/ActivitySearchFilter/useActivitySearchFilter.ts
+++ b/frontend/src/components/ActivitySearchFilter/useActivitySearchFilter.ts
@@ -4,11 +4,14 @@ import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { getDefaultLanguage } from 'modules/header/utills';
 import { getActivityBarContent } from 'modules/activities/connector';
+import { getHomePageConfig } from 'modules/home/utils';
+
+const { activityBar } = getHomePageConfig();
 
 export const useActivitySearchFilter = () => {
   const language = useRouter().locale ?? getDefaultLanguage();
   const { data: activities } = useQuery<ActivityFilter[], Error>(['homeActivities', language], () =>
-    getActivityBarContent(language),
+    getActivityBarContent(language, activityBar.links),
   );
 
   const [expandedState, setExpandedState] = useState<'EXPANDED' | 'COLLAPSED'>('COLLAPSED');
diff --git a/frontend/src/modules/activities/adapter.ts b/frontend/src/modules/activities/adapter.ts
index 46f69bce1..5f8d4c618 100644
--- a/frontend/src/modules/activities/adapter.ts
+++ b/frontend/src/modules/activities/adapter.ts
@@ -1,6 +1,7 @@
 import { PRACTICE_ID } from 'modules/filters/constant';
 import { FilterWithoutType } from 'modules/filters/interface';
 import { sortedByOrder } from 'modules/utils/array';
+import { ActivityBarLinks } from 'modules/home/interface';
 import { Activity, ActivityChoices, ActivityFilter, RawListActivity } from './interface';
 
 const isCompleteRawListActivity = (
@@ -47,8 +48,25 @@ export const adaptActivities = (rawActivities: Partial<RawListActivity>[]): Acti
 
 export const adaptActivitiesFilter = (
   rawActivities: Partial<RawListActivity>[],
-): ActivityFilter[] =>
-  rawActivities
+  { grouped }: Partial<ActivityBarLinks>,
+): ActivityFilter[] => {
+  if (grouped) {
+    return [
+      {
+        label: 'Practices',
+        titleTranslationId: 'home.activityBar.practices',
+        pictogramUri: '/icons/practice-trek.svg',
+        id: rawActivities
+          .filter(isCompleteRawListActivity)
+          .map(({ id }) => `${id}`)
+          .sort()
+          .join(','),
+        order: null,
+        type: 'PRACTICE',
+      },
+    ];
+  }
+  return rawActivities
     .filter(isCompleteRawListActivity)
     .sort(sortedByOrder)
     .map(({ name, pictogram, id, order = null }) => ({
@@ -58,3 +76,4 @@ export const adaptActivitiesFilter = (
       order,
       type: 'PRACTICE',
     }));
+};
diff --git a/frontend/src/modules/activities/connector.ts b/frontend/src/modules/activities/connector.ts
index f95b1d04d..7c2f90677 100644
--- a/frontend/src/modules/activities/connector.ts
+++ b/frontend/src/modules/activities/connector.ts
@@ -2,6 +2,7 @@ import { FilterWithoutType } from 'modules/filters/interface';
 import { adaptTouristicContentCategoryList } from 'modules/touristicContentCategory/adapter';
 import { fetchTouristicContentCategories } from 'modules/touristicContentCategory/api';
 import { sortedByOrder } from 'modules/utils/array';
+import { ActivityBar, ActivityBarLinks } from 'modules/home/interface';
 import { adaptOutdoorPracticesForActivities } from '../outdoorPractice/adapter';
 import { fetchOutdoorPractices } from '../outdoorPractice/api';
 import { adaptTouristicEventTypesForActivities } from '../touristicEventType/adapter';
@@ -38,23 +39,37 @@ export const getActivity = async (
   return adaptActivity(rawActivity);
 };
 
-export const getActivityBarContent = async (language: string): Promise<ActivityFilter[]> => {
-  const [rawPractices, rawTouristicContentCategories, rawOutdoorPractices, rawTouristicEvents] =
-    await Promise.all([
-      fetchActivities({ language }),
-      fetchTouristicContentCategories({ language }),
-      getGlobalConfig().enableOutdoor ? fetchOutdoorPractices({ language }) : null,
-      getGlobalConfig().enableTouristicEvents ? fetchTouristicEventTypes({ language }) : null,
-    ]);
+export const getActivityBarContent = async (
+  language: string,
+  links: ActivityBar['links'],
+): Promise<ActivityFilter[]> => {
+  const getActivitiesAccordingToType = ({ type, ...config }: ActivityBarLinks) => {
+    if (type === 'trek') {
+      return fetchActivities({ language }).then(({ results }) =>
+        adaptActivitiesFilter(results, config).sort(sortedByOrder),
+      );
+    }
+    if (type === 'outdoorSite' && getGlobalConfig().enableOutdoor) {
+      return fetchOutdoorPractices({ language }).then(({ results }) =>
+        adaptOutdoorPracticesForActivities(results, config).sort(sortedByOrder),
+      );
+    }
+    if (type === 'touristicContent') {
+      return fetchTouristicContentCategories({ language }).then(({ results }) =>
+        adaptTouristicContentCategoryList(results, config).sort(sortedByOrder),
+      );
+    }
+    if (type === 'touristicEvent' && getGlobalConfig().enableTouristicEvents) {
+      return fetchTouristicEventTypes({ language }).then(({ results }) =>
+        adaptTouristicEventTypesForActivities(results, config).sort(sortedByOrder),
+      );
+    }
+    return [];
+  };
+
+  const activityFilters = await Promise.all(
+    links.map(async item => await getActivitiesAccordingToType(item)),
+  );
 
-  return [
-    ...adaptActivitiesFilter(rawPractices.results).sort(sortedByOrder),
-    ...adaptOutdoorPracticesForActivities(
-      rawOutdoorPractices ? rawOutdoorPractices.results : [],
-    ).sort(sortedByOrder),
-    ...adaptTouristicContentCategoryList(rawTouristicContentCategories.results).sort(sortedByOrder),
-    ...adaptTouristicEventTypesForActivities(
-      rawTouristicEvents ? rawTouristicEvents.results : [],
-    ).sort(sortedByOrder),
-  ];
+  return activityFilters.flat();
 };
diff --git a/frontend/src/modules/outdoorPractice/adapter.ts b/frontend/src/modules/outdoorPractice/adapter.ts
index 826db9bf8..a3f3f514b 100644
--- a/frontend/src/modules/outdoorPractice/adapter.ts
+++ b/frontend/src/modules/outdoorPractice/adapter.ts
@@ -1,3 +1,4 @@
+import { ActivityBarLinks } from 'modules/home/interface';
 import { ActivityFilter } from '../activities/interface';
 import { OUTDOOR_ID } from '../filters/constant';
 import { FilterWithoutType } from '../filters/interface';
@@ -22,14 +23,31 @@ export const adaptOutdoorPractices = ({
 
 export const adaptOutdoorPracticesForActivities = (
   rawOutdoorPractices: RawOutdoorPractice[],
-): ActivityFilter[] =>
-  rawOutdoorPractices.map(({ name, id, pictogram, order = null }) => ({
+  { grouped }: Partial<ActivityBarLinks>,
+): ActivityFilter[] => {
+  if (grouped) {
+    return [
+      {
+        label: 'Outdoor Practices',
+        titleTranslationId: 'home.activityBar.outdoorPractices',
+        pictogramUri: '/icons/practice-outdoor.svg',
+        id: rawOutdoorPractices
+          .map(({ id }) => `${id}`)
+          .sort()
+          .join(','),
+        order: null,
+        type: 'OUTDOOR_PRACTICE',
+      },
+    ];
+  }
+  return rawOutdoorPractices.map(({ name, id, pictogram, order = null }) => ({
     id,
     label: name,
     order,
     pictogramUri: pictogram,
     type: 'OUTDOOR_PRACTICE',
   }));
+};
 
 export const adaptOutdoorPracticesFilter = (
   rawOutdoorPractices: RawOutdoorPractice[],
diff --git a/frontend/src/modules/touristicContentCategory/adapter.ts b/frontend/src/modules/touristicContentCategory/adapter.ts
index 5aa55f304..48aa5158c 100644
--- a/frontend/src/modules/touristicContentCategory/adapter.ts
+++ b/frontend/src/modules/touristicContentCategory/adapter.ts
@@ -1,6 +1,7 @@
 import { ActivityFilter } from 'modules/activities/interface';
 import { CATEGORY_ID } from 'modules/filters/constant';
 import { FilterWithoutType } from 'modules/filters/interface';
+import { ActivityBarLinks } from 'modules/home/interface';
 import {
   RawTouristicContentCategory,
   TouristicContentCategory,
@@ -26,8 +27,25 @@ const isCompleteRawListTouristicContentCategory = (
 
 export const adaptTouristicContentCategoryList = (
   rawToutisticContentCategories: Partial<RawTouristicContentCategory>[],
-): ActivityFilter[] =>
-  rawToutisticContentCategories
+  { grouped }: Partial<ActivityBarLinks>,
+): ActivityFilter[] => {
+  if (grouped) {
+    return [
+      {
+        label: 'Touristic content categories',
+        titleTranslationId: 'home.activityBar.touristicContent',
+        pictogramUri: '/icons/category-services.svg',
+        id: rawToutisticContentCategories
+          .filter(isCompleteRawListTouristicContentCategory)
+          .map(({ id }) => `${id}`)
+          .sort()
+          .join(','),
+        order: null,
+        type: 'CATEGORY',
+      },
+    ];
+  }
+  return rawToutisticContentCategories
     .filter(isCompleteRawListTouristicContentCategory)
     .map(({ label, pictogram, id, order = null }) => ({
       label,
@@ -36,6 +54,7 @@ export const adaptTouristicContentCategoryList = (
       order,
       type: 'CATEGORY',
     }));
+};
 
 export const adaptTouristicContentCategories = (
   rawCats: RawTouristicContentCategory[],
diff --git a/frontend/src/modules/touristicEventType/adapter.ts b/frontend/src/modules/touristicEventType/adapter.ts
index 2bccb9ca4..a60079032 100644
--- a/frontend/src/modules/touristicEventType/adapter.ts
+++ b/frontend/src/modules/touristicEventType/adapter.ts
@@ -1,3 +1,4 @@
+import { ActivityBarLinks } from 'modules/home/interface';
 import { ActivityFilter } from '../activities/interface';
 import { EVENT_ID } from '../filters/constant';
 import { FilterWithoutType } from '../filters/interface';
@@ -22,14 +23,31 @@ export const adaptTouristicEventTypes = ({
 
 export const adaptTouristicEventTypesForActivities = (
   rawTouristicEventTypes: RawTouristicEventType[],
-): ActivityFilter[] =>
-  rawTouristicEventTypes.map(({ type, id, pictogram, order = null }) => ({
+  { grouped }: Partial<ActivityBarLinks>,
+): ActivityFilter[] => {
+  if (grouped) {
+    return [
+      {
+        label: 'Touristic event categories',
+        titleTranslationId: 'home.activityBar.touristicEvent',
+        pictogramUri: '/icons/category-events.svg',
+        id: rawTouristicEventTypes
+          .map(({ id }) => `${id}`)
+          .sort()
+          .join(','),
+        order: null,
+        type: 'TOURISTIC_EVENT_TYPE',
+      },
+    ];
+  }
+  return rawTouristicEventTypes.map(({ type, id, pictogram, order = null }) => ({
     id,
     label: type,
     order,
     pictogramUri: pictogram,
     type: 'TOURISTIC_EVENT_TYPE',
   }));
+};
 
 export const adaptTouristicEventTypesFilter = (
   rawTouristicEventTypes: RawTouristicEventType[],
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 199eb9439..07614ef64 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -30,7 +30,7 @@ export const getServerSideProps: GetServerSideProps = async context => {
 
   if (homePageConfig.activityBar.shouldDisplay === true) {
     await queryClient.prefetchQuery(['homeActivities', locale], () =>
-      getActivityBarContent(locale),
+      getActivityBarContent(locale, homePageConfig.activityBar.links),
     );
   }
 
diff --git a/frontend/src/translations/ca.json b/frontend/src/translations/ca.json
index 086d7edf0..12115e43a 100644
--- a/frontend/src/translations/ca.json
+++ b/frontend/src/translations/ca.json
@@ -17,7 +17,13 @@
     "mailTo": "Enviar un email",
     "walking": "Senderisme",
     "territoryTreks": "Excursions a descobrir",
-    "itinerantTreks": "Itineràncies a descobrir"
+    "itinerantTreks": "Itineràncies a descobrir",
+    "activityBar": {
+      "practices": "Excursions",
+      "outdoorPractices": "Exterior",
+      "touristicContent": "Serveis",
+      "touristicEvent": "Esdeveniments"
+    }
   },
   "loading": "Carregant",
   "page": {
@@ -41,7 +47,7 @@
     "diary": "Diari",
     "filters": {
       "difficulty": "Dificultat",
-      "practices": "excursions",
+      "practices": "Excursions",
       "outdoorPractice": "Exterior",
       "treksOutdoorGrouped": "Activities",
       "event": "Esdeveniments",
diff --git a/frontend/src/translations/de.json b/frontend/src/translations/de.json
index 989b17bca..b96d2339b 100644
--- a/frontend/src/translations/de.json
+++ b/frontend/src/translations/de.json
@@ -17,7 +17,13 @@
     "mailTo": "E-Mail senden",
     "walking": "Wanderung",
     "territoryTreks": "Wanderungen, die es zu entdecken gilt",
-    "itinerantTreks": "Reiserouten zum Entdecken"
+    "itinerantTreks": "Reiserouten zum Entdecken",
+    "activityBar": {
+      "practices": "Wanderungen",
+      "outdoorPractices": "Draußen",
+      "touristicContent": "Dienstleistungen",
+      "touristicEvent": "Veranstaltungen"
+    }
   },
   "loading": "Laden",
   "page": {
diff --git a/frontend/src/translations/en.json b/frontend/src/translations/en.json
index 6b67aed6b..2406c2ece 100644
--- a/frontend/src/translations/en.json
+++ b/frontend/src/translations/en.json
@@ -20,7 +20,13 @@
     "itinerantTreks": "Multi-day treks to discover",
     "services": "Services to discover",
     "events": "Events not to miss",
-    "outdoor": "Outdoor to discover"
+    "outdoor": "Outdoor to discover",
+    "activityBar": {
+      "practices": "Practices",
+      "outdoorPractices": "Outdoor",
+      "touristicContent": "Services",
+      "touristicEvent": "Events"
+    }
   },
   "loading": "Loading",
   "page": {
diff --git a/frontend/src/translations/es.json b/frontend/src/translations/es.json
index 32edfd687..5a822cbf3 100644
--- a/frontend/src/translations/es.json
+++ b/frontend/src/translations/es.json
@@ -17,7 +17,13 @@
     "mailTo": "Enviar un email",
     "walking": "Senderismo",
     "territoryTreks": "Excursiones para descubrir",
-    "itinerantTreks": "Itinerancias para descubrir"
+    "itinerantTreks": "Itinerancias para descubrir",
+    "activityBar": {
+      "practices": "Excursiones",
+      "outdoorPractices": "Exterior",
+      "touristicContent": "Servicios",
+      "touristicEvent": "Eventos"
+    }
   },
   "loading": "Cargando",
   "page": {
@@ -41,7 +47,7 @@
     "diary": "Diario",
     "filters": {
       "difficulty": "Dificultad",
-      "practices": "excursiones",
+      "practices": "Excursiones",
       "outdoorPractice": "Exterior",
       "event": "Eventos",
       "treksOutdoorGrouped": "Activities",
diff --git a/frontend/src/translations/fr.json b/frontend/src/translations/fr.json
index 1a16eec0e..3f77698f4 100644
--- a/frontend/src/translations/fr.json
+++ b/frontend/src/translations/fr.json
@@ -20,7 +20,13 @@
     "itinerantTreks": "Itinérances à découvrir",
     "services": "Services à découvrir",
     "events": "Événements à ne pas rater",
-    "outdoor": "Sites outdoor à découvrir"
+    "outdoor": "Sites outdoor à découvrir",
+    "activityBar": {
+      "practices": "Randonnées",
+      "outdoorPractices": "Outdoor",
+      "touristicContent": "Services",
+      "touristicEvent": "Évènements"
+    }
   },
   "loading": "Chargement",
   "page": {
diff --git a/frontend/src/translations/it.json b/frontend/src/translations/it.json
index b24352b88..2945ff49b 100644
--- a/frontend/src/translations/it.json
+++ b/frontend/src/translations/it.json
@@ -20,7 +20,13 @@
     "itinerantTreks": "Itinerari da scoprire",
     "services": "Servizi da scoprire",
     "events": "Eventi da non perdere",
-    "outdoor": "Siti outdoor da scoprire"
+    "outdoor": "Siti outdoor da scoprire",
+    "activityBar": {
+      "practices": "Escursioni",
+      "outdoorPractices": "Outdoor",
+      "touristicContent": "Servizi",
+      "touristicEvent": "Eventi"
+    }
   },
   "loading": "Caricamento",
   "page": {

From 90660de53f2e43a9e268bd5893c63c3a1087ffa7 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Fri, 15 Dec 2023 15:29:33 +0100
Subject: [PATCH 08/10] Overide iconUrl in activityBar link config

---
 frontend/src/modules/activities/adapter.ts               | 4 ++--
 frontend/src/modules/home/interface.ts                   | 1 +
 frontend/src/modules/outdoorPractice/adapter.ts          | 4 ++--
 frontend/src/modules/touristicContentCategory/adapter.ts | 4 ++--
 frontend/src/modules/touristicEventType/adapter.ts       | 4 ++--
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/modules/activities/adapter.ts b/frontend/src/modules/activities/adapter.ts
index 5f8d4c618..c5c4b6024 100644
--- a/frontend/src/modules/activities/adapter.ts
+++ b/frontend/src/modules/activities/adapter.ts
@@ -48,14 +48,14 @@ export const adaptActivities = (rawActivities: Partial<RawListActivity>[]): Acti
 
 export const adaptActivitiesFilter = (
   rawActivities: Partial<RawListActivity>[],
-  { grouped }: Partial<ActivityBarLinks>,
+  { grouped, iconUrl }: Partial<ActivityBarLinks>,
 ): ActivityFilter[] => {
   if (grouped) {
     return [
       {
         label: 'Practices',
         titleTranslationId: 'home.activityBar.practices',
-        pictogramUri: '/icons/practice-trek.svg',
+        pictogramUri: iconUrl ?? '/icons/practice-trek.svg',
         id: rawActivities
           .filter(isCompleteRawListActivity)
           .map(({ id }) => `${id}`)
diff --git a/frontend/src/modules/home/interface.ts b/frontend/src/modules/home/interface.ts
index 419bb4c42..20ca65d75 100644
--- a/frontend/src/modules/home/interface.ts
+++ b/frontend/src/modules/home/interface.ts
@@ -7,6 +7,7 @@ export interface ActivityBar {
 export interface ActivityBarLinks {
   type: 'trek' | 'outdoorSite' | 'touristicContent' | 'touristicEvent';
   grouped: boolean;
+  iconUrl?: string;
 }
 
 interface WelcomeBanner {
diff --git a/frontend/src/modules/outdoorPractice/adapter.ts b/frontend/src/modules/outdoorPractice/adapter.ts
index a3f3f514b..283d441c9 100644
--- a/frontend/src/modules/outdoorPractice/adapter.ts
+++ b/frontend/src/modules/outdoorPractice/adapter.ts
@@ -23,14 +23,14 @@ export const adaptOutdoorPractices = ({
 
 export const adaptOutdoorPracticesForActivities = (
   rawOutdoorPractices: RawOutdoorPractice[],
-  { grouped }: Partial<ActivityBarLinks>,
+  { grouped, iconUrl }: Partial<ActivityBarLinks>,
 ): ActivityFilter[] => {
   if (grouped) {
     return [
       {
         label: 'Outdoor Practices',
         titleTranslationId: 'home.activityBar.outdoorPractices',
-        pictogramUri: '/icons/practice-outdoor.svg',
+        pictogramUri: iconUrl ?? '/icons/practice-outdoor.svg',
         id: rawOutdoorPractices
           .map(({ id }) => `${id}`)
           .sort()
diff --git a/frontend/src/modules/touristicContentCategory/adapter.ts b/frontend/src/modules/touristicContentCategory/adapter.ts
index 48aa5158c..f78bc9aee 100644
--- a/frontend/src/modules/touristicContentCategory/adapter.ts
+++ b/frontend/src/modules/touristicContentCategory/adapter.ts
@@ -27,14 +27,14 @@ const isCompleteRawListTouristicContentCategory = (
 
 export const adaptTouristicContentCategoryList = (
   rawToutisticContentCategories: Partial<RawTouristicContentCategory>[],
-  { grouped }: Partial<ActivityBarLinks>,
+  { grouped, iconUrl }: Partial<ActivityBarLinks>,
 ): ActivityFilter[] => {
   if (grouped) {
     return [
       {
         label: 'Touristic content categories',
         titleTranslationId: 'home.activityBar.touristicContent',
-        pictogramUri: '/icons/category-services.svg',
+        pictogramUri: iconUrl ?? '/icons/category-services.svg',
         id: rawToutisticContentCategories
           .filter(isCompleteRawListTouristicContentCategory)
           .map(({ id }) => `${id}`)
diff --git a/frontend/src/modules/touristicEventType/adapter.ts b/frontend/src/modules/touristicEventType/adapter.ts
index a60079032..a43162382 100644
--- a/frontend/src/modules/touristicEventType/adapter.ts
+++ b/frontend/src/modules/touristicEventType/adapter.ts
@@ -23,14 +23,14 @@ export const adaptTouristicEventTypes = ({
 
 export const adaptTouristicEventTypesForActivities = (
   rawTouristicEventTypes: RawTouristicEventType[],
-  { grouped }: Partial<ActivityBarLinks>,
+  { grouped, iconUrl }: Partial<ActivityBarLinks>,
 ): ActivityFilter[] => {
   if (grouped) {
     return [
       {
         label: 'Touristic event categories',
         titleTranslationId: 'home.activityBar.touristicEvent',
-        pictogramUri: '/icons/category-events.svg',
+        pictogramUri: iconUrl ?? '/icons/category-events.svg',
         id: rawTouristicEventTypes
           .map(({ id }) => `${id}`)
           .sort()

From 1d5dbdab572289811e5c8bb67e232bd50f217d4c Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Fri, 15 Dec 2023 16:25:32 +0100
Subject: [PATCH 09/10] Define categorie color to each activity bar link

---
 .../ActivityButton/ActivityButton.tsx         | 42 ++++++++++++++++---
 .../ActivitySearchFilter.tsx                  |  1 +
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx b/frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx
index 9ff43e363..a088be3a4 100644
--- a/frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx
+++ b/frontend/src/components/ActivitySearchFilter/ActivityButton/ActivityButton.tsx
@@ -1,23 +1,55 @@
-import React from 'react';
 import SVG from 'react-inlinesvg';
+import getConfig from 'next/config';
+import styled from 'styled-components';
 
 import { optimizeAndDefineColor } from 'stylesheet';
 import { Link } from 'components/Link';
+import getActivityColor from 'components/pages/search/components/ResultCard/getActivityColor';
+import { ActivityFilter } from 'modules/activities/interface';
 
 interface Props {
   iconUrl: string;
   href: string;
   label: string;
+  type: ActivityFilter['type'];
 }
 
-export const ActivityButton: React.FC<Props> = ({ iconUrl, href, label }) => {
+const {
+  publicRuntimeConfig: { colors },
+} = getConfig();
+
+const getColor = (type: ActivityFilter['type']) => {
+  if (type === 'PRACTICE') {
+    return getActivityColor('practices');
+  }
+  if (type === 'OUTDOOR_PRACTICE') {
+    return getActivityColor('outdoorPractice');
+  }
+  if (type === 'CATEGORY') {
+    return getActivityColor('categories');
+  }
+  if (type === 'TOURISTIC_EVENT_TYPE') {
+    return getActivityColor('event');
+  }
+  return colors.primary3;
+};
+
+export const ActivityButton: React.FC<Props> = ({ iconUrl, href, label, type }) => {
   return (
-    <Link
+    <StyleLink
+      $color={getColor(type)}
       href={href}
-      className="flex flex-col items-center text-center mt-6 text-greyDarkColored bg-white transition hover:text-primary3 focus:text-primary3"
+      className={`flex flex-col items-center text-center mt-6 text-greyDarkColored bg-white transition`}
     >
       <SVG src={iconUrl} className="h-9 desktop:w-12" preProcessor={optimizeAndDefineColor()} />
       <span className="w-20 text-sm mt-2 text-ellipsis overflow-hidden">{label}</span>
-    </Link>
+    </StyleLink>
   );
 };
+
+const StyleLink = styled(Link)<{ $color?: string }>`
+  &:hover,
+  &:focus {
+    color: ${props => props.$color};
+  }
+`;
diff --git a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
index db8a75e41..4423650e7 100644
--- a/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
+++ b/frontend/src/components/ActivitySearchFilter/ActivitySearchFilter.tsx
@@ -60,6 +60,7 @@ export const ActivitySearchFilter: React.FC<Props> = ({
                   ? intl.formatMessage({ id: activity.titleTranslationId })
                   : activity.label
               }
+              type={activity.type}
             />
           ))}
         </div>

From a37be78b26020e2d79c42c2fb5edf59e19534db7 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Fri, 15 Dec 2023 16:58:58 +0100
Subject: [PATCH 10/10] Update doc related to activityBar

---
 docs/customization.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/docs/customization.md b/docs/customization.md
index 4d20fc3d0..601761269 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -46,6 +46,21 @@ In json files, you can just override the primary keys you need. You have to over
 
 - `home.json` to define homepage settings.
 
+  - `activityBar`: This is a menu showing all search types (hiking practices, outdoor practices, tourist content categories and tourist events categories).
+
+    - `shouldDisplay`: Boolean allowing this menu to be displayed or not. Its default value is `true`.
+    - `numberOfItemsBeforeTruncation` The number of items displayed on the screen. To see the others, click on the "Show more" button. Its default value is `8`.
+    - `links`: Allows you to customize the order and display of categories links. It's an array containing an object with 3 properties:
+      ```typescript
+      {
+        "type" : 'trek' | 'outdoorSite' | 'touristicContent' | 'touristicEvent' ;
+        "grouped" : boolean ; // If set to "true", all activities of the type are grouped under a single link.
+        "iconUrl" : string ; // Optional, url to replace default icon. Used only if "grouped" is set to "true",
+      }
+      ```
+
+    More explanations in this [comments](https://github.com/GeotrekCE/Geotrek-rando-v3/issues/560#issuecomment-1858166341) (in French).
+
   - `suggestions`: You can define blocks to display suggestions groups with treks ID, outdoor sites ID, services ID or events ID to highlight on homepage (see https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/customization/config/home.json).
     Each group has the following properties :