From e5196b798d244401584e7d05a05cc6de72a49c2b Mon Sep 17 00:00:00 2001
From: fnecas <florian.necas@camptocamp.com>
Date: Fri, 2 Aug 2024 14:01:52 +0200
Subject: [PATCH 01/24] feat: implement first step of modular

---
 src/header.ce.vue | 125 ++++++++++++++++------------------------------
 src/i18n.ts       |   2 +-
 src/menu.json     |  67 +++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 83 deletions(-)
 create mode 100644 src/menu.json

diff --git a/src/header.ce.vue b/src/header.ce.vue
index e23024d..95790a0 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -10,6 +10,7 @@ import ChartPieIcon from '@/ui/ChartPieIcon.vue'
 import UsersIcon from '@/ui/UsersIcon.vue'
 import ChevronDownIcon from '@/ui/ChevronDownIcon.vue'
 import { LANG_2_TO_3_MAPPER, t } from '@/i18n'
+import menu from '@/menu.json'
 
 const props = defineProps<{
   hideLogin?: string
@@ -47,6 +48,10 @@ function toggleMenu(): void {
   state.mobileMenuOpen = !state.mobileMenuOpen
 }
 
+function checkCondition(condition: string): boolean {
+  return !condition || (condition && state.user?.adminRoles?.[condition])
+}
+
 onMounted(() => {
   state.lang3 =
     LANG_2_TO_3_MAPPER[props.lang || navigator.language.substring(0, 2)] ||
@@ -97,90 +102,46 @@ onMounted(() => {
           ></GeorchestraLogo>
         </a>
         <nav class="flex justify-center items-center font-semibold">
-          <a
-            class="nav-item"
-            :class="{ active: props.activeApp === 'datahub' }"
-            href="/datahub/"
-            >{{ t('catalogue') }}</a
-          >
-          <a
-            class="nav-item"
-            :class="{ active: props.activeApp === 'mapstore' }"
-            href="/mapstore/"
-            >{{ t('viewer') }}</a
-          >
-          <a
-            class="nav-item"
-            :class="{ active: props.activeApp === 'mapstore-home' }"
-            href="/mapstore/#/home"
-            >{{ t('maps') }}</a
-          >
-          <a
-            class="nav-item"
-            :class="{ active: props.activeApp === 'geoserver' }"
-            href="/geoserver/web/"
-            >{{ t('services') }}</a
-          >
-          <a
-            v-if="adminRoles?.import"
-            class="nav-item"
-            href="/import/"
-            :class="{ active: props.activeApp === 'import' }"
-            >{{ t('datafeeder') }}</a
-          >
-          <span class="text-gray-400" v-if="isAdmin">|</span>
-          <div class="admin group inline-block relative" v-if="isAdmin">
-            <button class="nav-item after:hover:scale-x-0 flex items-center">
-              <span class="mr-2 first-letter:capitalize">{{ t('admin') }}</span>
-              <ChevronDownIcon
-                class="w-4 h-4"
-                stroke-width="4"
-              ></ChevronDownIcon>
-            </button>
-            <ul
-              class="absolute hidden group-hover:block border rounded w-full admin-dropdown z-[1002] bg-white"
-            >
-              <li :class="{ active: props.activeApp === 'geonetwork' }">
-                <a
-                  class="catalog"
-                  v-if="adminRoles?.catalog || adminRoles?.catalogAdmin"
-                  :href="
-                    adminRoles?.catalogAdmin
-                      ? `/geonetwork/srv/${state.lang3}/admin.console`
-                      : `/geonetwork/srv/${state.lang3}/catalog.edit#/board`
-                  "
-                >
-                  <CatalogIcon class="icon-dropdown"></CatalogIcon>
-                  {{ t('catalogue') }}</a
-                >
-              </li>
-              <li :class="{ active: props.activeApp === 'msadmin' }">
-                <a href="/mapstore/#/admin" v-if="adminRoles?.viewer" class="">
-                  <MapIcon class="icon-dropdown"></MapIcon>
-                  {{ t('viewer') }}</a
-                >
-              </li>
-              <li :class="{ active: props.activeApp === 'console' }">
-                <a
-                  href="/console/manager/home"
-                  v-if="adminRoles?.console"
-                  class="console"
-                >
-                  <UsersIcon class="icon-dropdown"></UsersIcon>
-                  {{ t('users') }}</a
-                >
-              </li>
-              <li
-                :class="{ active: props.activeApp === 'analytics' }"
-                v-if="state.platformInfos?.analyticsEnabled"
+          <template v-for="item in menu.menu" v-if="checkCondition">
+            <template v-if="!item.type && checkCondition(item.condition)">
+              <a
+                :href="item.url"
+                class="nav-item"
+                :class="{ active: props.activeApp === item['active-app'] }"
+                >{{ item.i18n ? t(item.i18n) : item.label }}</a
               >
-                <a href="/analytics/" class="analytics">
-                  <ChartPieIcon class="icon-dropdown"></ChartPieIcon>
-                  analytics</a
+            </template>
+            <template v-else-if="item.type === 'separator' && checkCondition(item.condition)">
+              <span class="text-gray-400">|</span>
+            </template>
+            <template v-else-if="item.type === 'dropdown' && checkCondition(item.condition)">
+              <div class="group inline-block relative">
+                <button class="nav-item after:hover:scale-x-0 flex items-center">
+                  <span class="mr-2 first-letter:capitalize">{{
+                    item.i18n ? t(item.i18n) : item.label
+                  }}</span>
+                  <ChevronDownIcon
+                    class="w-4 h-4"
+                    stroke-width="4"
+                  ></ChevronDownIcon>
+                </button>
+                <ul
+                  class="absolute hidden group-hover:block border rounded w-full admin-dropdown z-[1002] bg-white"
                 >
-              </li>
-            </ul>
-          </div>
+                  <template v-for="subitem in item.items">
+                    <li v-if="checkCondition(subitem.condition)"
+                      :class="{ active: props.activeApp === subitem['active-app'] }"
+                    >
+                      <a :href="subitem.url" class="capitalize">
+                        {{ subitem.i18n ? t(subitem.i18n) : subitem.label }}</a
+                      >
+                    </li>
+                  </template>
+                </ul>
+              </div>
+            </template>
+          </template>
+
           <span class="text-gray-400 text-xs" v-if="isWarned">
             <a href="/console/account/changePassword">
               {{ t('remaining_days_msg_part1') }} {{ remainingDays }}
diff --git a/src/i18n.ts b/src/i18n.ts
index 00f39f0..10729b5 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -8,7 +8,7 @@ import pt from './i18n/pt.json'
 import { createI18n } from 'vue-i18n'
 
 const i18n = createI18n({
-  locale: navigator.language,
+  locale: navigator.language.substring(0, 2),
   fallbackLocale: 'fr',
   messages: {
     en: en,
diff --git a/src/menu.json b/src/menu.json
new file mode 100644
index 0000000..7f0536d
--- /dev/null
+++ b/src/menu.json
@@ -0,0 +1,67 @@
+{
+  "menu": [
+    {
+      "label": "Catalogue",
+      "i18n": "catalogue",
+      "url": "/datahub/",
+      "active-app" : "datahub"
+    },
+    {
+      "label": "Mapstore viewer",
+      "i18n": "viewer",
+      "url": "/mapstore",
+        "active-app" : "mapstore"
+    },
+    {
+      "label": "Maps",
+      "i18n": "maps",
+      "url": "/mapstore/#/home",
+      "active-app" : "mapstore-home"
+    },
+    {
+      "label": "Services",
+      "i18n": "services",
+      "url": "/geoserver/web",
+      "active-app" : "geoserver"
+    },
+    {
+      "label": "Datafeeder",
+      "i18n": "datafeeder",
+      "url": "/datafeeder",
+      "active-app" : "datafeeder",
+      "condition": "import"
+    },
+    {
+      "condition": "isAdmin",
+      "type": "separator"
+    },
+    {
+      "type": "dropdown",
+      "label": "Administration",
+      "i18n": "admin",
+      "items": [
+        {
+          "label": "Geonetwork",
+          "i18n": "catalogue",
+          "url": "/georchestra/ldap/users",
+          "active-app": "geonetwork",
+          "condition": "catalogAdmin"
+        },
+        {
+          "label": "Viewer",
+          "i18n": "viewer",
+          "url": "/mapstore/#/admin",
+          "active-app": "msadmin",
+          "condition": "viewer"
+        },
+        {
+          "label": "Console",
+          "i18n": "users",
+          "url": "/console/manager/home",
+          "active-app": "console",
+          "condition": "console"
+        }
+      ]
+    }
+  ]
+}

From 4ebe0c0f4900277023fb9e1a364cbd15c7926113 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Fri, 4 Oct 2024 16:13:27 +0200
Subject: [PATCH 02/24] feat: first step of condition

---
 .eslintrc.cjs     |  1 +
 src/auth.ts       | 72 +++++++++++++++++++++++------------------------
 src/header.ce.vue | 30 +++++++++++++++-----
 src/menu.json     | 11 ++++----
 4 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index f67fea8..a704a84 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -12,6 +12,7 @@ module.exports = {
   rules: {
     'vue/multi-word-component-names': 'off',
     'no-undef': 'off',
+    'vue/require-v-for-key': 'warn',
   },
   parserOptions: {
     ecmaVersion: 'latest',
diff --git a/src/auth.ts b/src/auth.ts
index ab6f63b..98d1e0f 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -17,7 +17,7 @@ type KNOWN_ROLES =
 
 interface WhoAmIResponse {
   GeorchestraUser: {
-    roles: KNOWN_ROLES[]
+    roles: string[]
     username: string
     firstName: string
     lastName: string
@@ -33,22 +33,41 @@ export interface User {
   anonymous: boolean
   warned: boolean
   remainingDays: string
-  adminRoles: AdminRoles | null
-}
-
-export interface AdminRoles {
-  superUser: boolean
-  admin: boolean
-  console: boolean
-  catalog: boolean
-  catalogAdmin: boolean
-  viewer: boolean
-  import: boolean
+  roles: string[]
 }
 
 export async function getUserDetails(): Promise<User> {
+  const jsonFake = {
+    "GeorchestraUser": {
+      "username": "jdoe",
+      "roles": [
+        "ROLE_MAPSTORE_ADMIN",
+        "ROLE_DSP_ILEVIA",
+        "ROLE_GN_EDITOR",
+        "ROLE_USER",
+        "ROLE_ADMINISTRATOR",
+        "ROLE_SUPERUSER"
+      ],
+      "organization": "georchestra",
+      "id": "961b3749-d5c13b2df7",
+      "lastUpdated": "37ad990ece9c0b0e6d42b52fdce45849292cd9468",
+      "firstName": "John",
+      "lastName": "Doe",
+      "email": "john.doe@yopmail.com",
+      "postalAddress": null,
+      "telephoneNumber": null,
+      "title": null,
+      "notes": null,
+      "ldapWarn": false,
+      "ldapRemainingDays": null,
+      "isExternalAuth": false,
+      "oauth2Provider": null,
+      "oauth2Uid": null
+    }
+  }
+
   return fetch(AUTH_API_URL)
-    .then(response => response.json())
+    .then(response => jsonFake)
     .then((json: WhoAmIResponse) => {
       const user = json.GeorchestraUser
       if (!user) {
@@ -57,42 +76,21 @@ export async function getUserDetails(): Promise<User> {
           warned: false,
           remainingDays: '0',
           anonymous: true,
-          adminRoles: null,
+          roles: ['ROLE_ANONYMOUS'],
         }
       }
-      const roles = user.roles
       return {
         username: user.username,
         firstname: user.firstName,
         lastname: user.lastName,
         warned: user.ldapWarn,
         remainingDays: user.ldapRemainingDays,
-        anonymous: roles.indexOf('ROLE_ANONYMOUS') > -1,
-        adminRoles: getAdminRoles(roles),
+        anonymous: user.roles.indexOf('ROLE_ANONYMOUS') > -1,
+        roles: user.roles,
       }
     })
 }
 
-export function getAdminRoles(roles: KNOWN_ROLES[]): AdminRoles | null {
-  const superUser = roles.indexOf('ROLE_SUPERUSER') > -1
-  const console = superUser || roles.indexOf('ROLE_ORGADMIN') > -1
-  const catalogAdmin = superUser || roles.indexOf('ROLE_GN_ADMIN') > -1
-  const catalog = !catalogAdmin && (roles.indexOf('ROLE_GN_EDITOR') > -1 || roles.indexOf('ROLE_GN_REVIEWER') > -1)
-  const viewer = superUser || roles.indexOf('ROLE_MAPSTORE_ADMIN') > -1
-  const admin =
-    superUser || console || catalog || viewer || catalogAdmin
-  if (!admin && roles.indexOf('ROLE_IMPORT') === -1) return null
-  return {
-    superUser,
-    admin,
-    console,
-    catalog,
-    catalogAdmin,
-    viewer,
-    import: superUser || roles.indexOf('ROLE_IMPORT') > -1,
-  }
-}
-
 export interface PlatformInfos {
   analyticsEnabled: boolean
   extractorappEnabled: boolean
diff --git a/src/header.ce.vue b/src/header.ce.vue
index 95790a0..c208780 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -36,6 +36,7 @@ const isAdmin = computed(() => state.user?.adminRoles?.admin)
 const isWarned = computed(() => state.user?.warned)
 const remainingDays = computed(() => state.user?.remainingDays)
 const adminRoles = computed(() => state.user?.adminRoles)
+const cond = computed(condition => state.user?.roles?.[condition])
 
 const loginUrl = computed(() => {
   const current = new URL(window.location.href)
@@ -49,7 +50,9 @@ function toggleMenu(): void {
 }
 
 function checkCondition(condition: string): boolean {
-  return !condition || (condition && state.user?.adminRoles?.[condition])
+  if (!state.user) return false
+  if (!condition) return true
+  return condition.split(',').some(c => state.user?.roles?.indexOf(c) !== -1)
 }
 
 onMounted(() => {
@@ -102,7 +105,7 @@ onMounted(() => {
           ></GeorchestraLogo>
         </a>
         <nav class="flex justify-center items-center font-semibold">
-          <template v-for="item in menu.menu" v-if="checkCondition">
+          <template v-for="(item, index) in menu.menu" :key="index">
             <template v-if="!item.type && checkCondition(item.condition)">
               <a
                 :href="item.url"
@@ -111,12 +114,22 @@ onMounted(() => {
                 >{{ item.i18n ? t(item.i18n) : item.label }}</a
               >
             </template>
-            <template v-else-if="item.type === 'separator' && checkCondition(item.condition)">
+            <template
+              v-else-if="
+                item.type === 'separator' && checkCondition(item.condition)
+              "
+            >
               <span class="text-gray-400">|</span>
             </template>
-            <template v-else-if="item.type === 'dropdown' && checkCondition(item.condition)">
+            <template
+              v-else-if="
+                item.type === 'dropdown' && checkCondition(item.condition)
+              "
+            >
               <div class="group inline-block relative">
-                <button class="nav-item after:hover:scale-x-0 flex items-center">
+                <button
+                  class="nav-item after:hover:scale-x-0 flex items-center"
+                >
                   <span class="mr-2 first-letter:capitalize">{{
                     item.i18n ? t(item.i18n) : item.label
                   }}</span>
@@ -129,8 +142,11 @@ onMounted(() => {
                   class="absolute hidden group-hover:block border rounded w-full admin-dropdown z-[1002] bg-white"
                 >
                   <template v-for="subitem in item.items">
-                    <li v-if="checkCondition(subitem.condition)"
-                      :class="{ active: props.activeApp === subitem['active-app'] }"
+                    <li
+                      v-if="checkCondition(subitem.condition)"
+                      :class="{
+                        active: props.activeApp === subitem['active-app'],
+                      }"
                     >
                       <a :href="subitem.url" class="capitalize">
                         {{ subitem.i18n ? t(subitem.i18n) : subitem.label }}</a
diff --git a/src/menu.json b/src/menu.json
index 7f0536d..c7c8c22 100644
--- a/src/menu.json
+++ b/src/menu.json
@@ -29,37 +29,38 @@
       "i18n": "datafeeder",
       "url": "/datafeeder",
       "active-app" : "datafeeder",
-      "condition": "import"
+      "condition": "ROLE_SUPERUSER,ROLE_IMPORT"
     },
     {
-      "condition": "isAdmin",
+      "condition": "ROLE_SUPERUSER",
       "type": "separator"
     },
     {
       "type": "dropdown",
       "label": "Administration",
       "i18n": "admin",
+      "condition": "ROLE_SUPERUSER",
       "items": [
         {
           "label": "Geonetwork",
           "i18n": "catalogue",
           "url": "/georchestra/ldap/users",
           "active-app": "geonetwork",
-          "condition": "catalogAdmin"
+          "condition": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN"
         },
         {
           "label": "Viewer",
           "i18n": "viewer",
           "url": "/mapstore/#/admin",
           "active-app": "msadmin",
-          "condition": "viewer"
+          "condition": "ROLE_SUPERUSER,ROLE_MAPSTORE_ADMIN"
         },
         {
           "label": "Console",
           "i18n": "users",
           "url": "/console/manager/home",
           "active-app": "console",
-          "condition": "console"
+          "condition": "ROLE_SUPERUSER"
         }
       ]
     }

From 47aa4a1fcce18bb601cc45264d7cc0b8d67ccaf6 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 2 Dec 2024 14:42:45 +0100
Subject: [PATCH 03/24] feat: set menu config file and block account

---
 index.html        |   1 +
 public/menu.json  |  30 ++++++++++
 src/auth.ts       |   1 -
 src/header.ce.vue |  55 +++++++++---------
 src/menu.json     | 143 ++++++++++++++++++++++++----------------------
 5 files changed, 136 insertions(+), 94 deletions(-)
 create mode 100644 public/menu.json

diff --git a/index.html b/index.html
index 7bb500c..14bfc86 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
     <geor-header
       logo-url="https://www.georchestra.org/public/georchestra-logo.svg"
       active-app="datahub"
+      menu-file="/menu.json"
     ></geor-header>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/public/menu.json b/public/menu.json
new file mode 100644
index 0000000..c62dcc8
--- /dev/null
+++ b/public/menu.json
@@ -0,0 +1,30 @@
+{
+  "config": {
+
+  },
+  "menu": [
+    {
+      "label": "Catalogue",
+      "i18n": "catalogue",
+      "url": "/datahub/",
+      "active-app" : "datahub"
+    },
+    {
+      "label": "My other service",
+      "url": "/geoserver/web",
+      "active-app" : "geoserver"
+    },
+    {
+      "type": "dropdown",
+      "label": "A dropdown",
+      "items": [
+        {
+          "label": "Console",
+          "i18n": "users",
+          "url": "/console/manager/home",
+          "active-app": "console"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/auth.ts b/src/auth.ts
index 98d1e0f..249810b 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -43,7 +43,6 @@ export async function getUserDetails(): Promise<User> {
       "roles": [
         "ROLE_MAPSTORE_ADMIN",
         "ROLE_DSP_ILEVIA",
-        "ROLE_GN_EDITOR",
         "ROLE_USER",
         "ROLE_ADMINISTRATOR",
         "ROLE_SUPERUSER"
diff --git a/src/header.ce.vue b/src/header.ce.vue
index c208780..4c7a0ba 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -4,13 +4,9 @@ import { getUserDetails, getPlatformInfos } from './auth'
 import type { User, PlatformInfos } from './auth'
 import UserIcon from './ui/UserIcon.vue'
 import GeorchestraLogo from './ui/GeorchestraLogo.vue'
-import CatalogIcon from '@/ui/CatalogIcon.vue'
-import MapIcon from '@/ui/MapIcon.vue'
-import ChartPieIcon from '@/ui/ChartPieIcon.vue'
-import UsersIcon from '@/ui/UsersIcon.vue'
 import ChevronDownIcon from '@/ui/ChevronDownIcon.vue'
 import { LANG_2_TO_3_MAPPER, t } from '@/i18n'
-import menu from '@/menu.json'
+import { defaultMenu } from '@/menu.json'
 
 const props = defineProps<{
   hideLogin?: string
@@ -22,6 +18,7 @@ const props = defineProps<{
   legacyUrl?: string
   style?: string
   stylesheet?: string
+  menuFile?: string
 }>()
 
 const state = reactive({
@@ -29,14 +26,12 @@ const state = reactive({
   mobileMenuOpen: false,
   lang3: props.lang,
   platformInfos: null as null | PlatformInfos,
+  menu: defaultMenu,
 })
 
 const isAnonymous = computed(() => !state.user || state.user.anonymous)
-const isAdmin = computed(() => state.user?.adminRoles?.admin)
 const isWarned = computed(() => state.user?.warned)
 const remainingDays = computed(() => state.user?.remainingDays)
-const adminRoles = computed(() => state.user?.adminRoles)
-const cond = computed(condition => state.user?.roles?.[condition])
 
 const loginUrl = computed(() => {
   const current = new URL(window.location.href)
@@ -49,13 +44,28 @@ function toggleMenu(): void {
   state.mobileMenuOpen = !state.mobileMenuOpen
 }
 
-function checkCondition(condition: string): boolean {
+function checkCondition(item: object): boolean {
+  const hasRole = item.hasRole
   if (!state.user) return false
-  if (!condition) return true
-  return condition.split(',').some(c => state.user?.roles?.indexOf(c) !== -1)
+  if (!hasRole) return true
+  const isBlocked = item.blockedRole
+    ?.split(',')
+    .some(c => state.user?.roles?.indexOf(c) !== -1)
+  if (isBlocked) return false
+  return hasRole.split(',').some(c => state.user?.roles?.indexOf(c) !== -1)
+}
+
+function computeUrl(url: string): string {
+  return url.replace(/:lang3/, state.lang3)
 }
 
 onMounted(() => {
+  if (props.menuFile)
+    fetch(props.menuFile)
+      .then(res => res.json())
+      .then(file => {
+        state.menu = file.menu
+      })
   state.lang3 =
     LANG_2_TO_3_MAPPER[props.lang || navigator.language.substring(0, 2)] ||
     'eng'
@@ -89,10 +99,7 @@ onMounted(() => {
     </component>
     <div class="justify-between text-slate-600 sm:flex hidden h-full bg-white">
       <div class="flex">
-        <a
-          href="/"
-          class="flex justify-center items-center px-8 rounded-r-lg py-2 bg-primary-light"
-        >
+        <a href="/" class="flex justify-center items-center px-8 py-2">
           <img
             v-if="props.logoUrl"
             :src="props.logoUrl"
@@ -105,8 +112,8 @@ onMounted(() => {
           ></GeorchestraLogo>
         </a>
         <nav class="flex justify-center items-center font-semibold">
-          <template v-for="(item, index) in menu.menu" :key="index">
-            <template v-if="!item.type && checkCondition(item.condition)">
+          <template v-for="(item, index) in state.menu" :key="index">
+            <template v-if="!item.type && checkCondition(item)">
               <a
                 :href="item.url"
                 class="nav-item"
@@ -115,16 +122,12 @@ onMounted(() => {
               >
             </template>
             <template
-              v-else-if="
-                item.type === 'separator' && checkCondition(item.condition)
-              "
+              v-else-if="item.type === 'separator' && checkCondition(item)"
             >
               <span class="text-gray-400">|</span>
             </template>
             <template
-              v-else-if="
-                item.type === 'dropdown' && checkCondition(item.condition)
-              "
+              v-else-if="item.type === 'dropdown' && checkCondition(item)"
             >
               <div class="group inline-block relative">
                 <button
@@ -143,12 +146,12 @@ onMounted(() => {
                 >
                   <template v-for="subitem in item.items">
                     <li
-                      v-if="checkCondition(subitem.condition)"
+                      v-if="checkCondition(subitem)"
                       :class="{
                         active: props.activeApp === subitem['active-app'],
                       }"
                     >
-                      <a :href="subitem.url" class="capitalize">
+                      <a :href="computeUrl(subitem.url)" class="capitalize">
                         {{ subitem.i18n ? t(subitem.i18n) : subitem.label }}</a
                       >
                     </li>
@@ -288,7 +291,7 @@ onMounted(() => {
     @apply relative text-lg w-fit block after:hover:scale-x-[82%] px-2 mx-2 hover:text-black first-letter:capitalize;
   }
   .nav-item:after {
-    @apply block content-[''] absolute h-[3px] bg-gradient-to-r from-primary to-secondary-light w-full scale-x-0  transition duration-300 origin-left;
+    @apply block content-[''] absolute h-[3px] bg-primary w-full scale-x-0  transition duration-300 origin-left;
   }
   .nav-item.active {
     @apply after:scale-x-[82%] after:bg-primary after:bg-none text-gray-900;
diff --git a/src/menu.json b/src/menu.json
index c7c8c22..f5c73c7 100644
--- a/src/menu.json
+++ b/src/menu.json
@@ -1,68 +1,77 @@
 {
-  "menu": [
-    {
-      "label": "Catalogue",
-      "i18n": "catalogue",
-      "url": "/datahub/",
-      "active-app" : "datahub"
-    },
-    {
-      "label": "Mapstore viewer",
-      "i18n": "viewer",
-      "url": "/mapstore",
-        "active-app" : "mapstore"
-    },
-    {
-      "label": "Maps",
-      "i18n": "maps",
-      "url": "/mapstore/#/home",
-      "active-app" : "mapstore-home"
-    },
-    {
-      "label": "Services",
-      "i18n": "services",
-      "url": "/geoserver/web",
-      "active-app" : "geoserver"
-    },
-    {
-      "label": "Datafeeder",
-      "i18n": "datafeeder",
-      "url": "/datafeeder",
-      "active-app" : "datafeeder",
-      "condition": "ROLE_SUPERUSER,ROLE_IMPORT"
-    },
-    {
-      "condition": "ROLE_SUPERUSER",
-      "type": "separator"
-    },
-    {
-      "type": "dropdown",
-      "label": "Administration",
-      "i18n": "admin",
-      "condition": "ROLE_SUPERUSER",
-      "items": [
-        {
-          "label": "Geonetwork",
-          "i18n": "catalogue",
-          "url": "/georchestra/ldap/users",
-          "active-app": "geonetwork",
-          "condition": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN"
-        },
-        {
-          "label": "Viewer",
-          "i18n": "viewer",
-          "url": "/mapstore/#/admin",
-          "active-app": "msadmin",
-          "condition": "ROLE_SUPERUSER,ROLE_MAPSTORE_ADMIN"
-        },
-        {
-          "label": "Console",
-          "i18n": "users",
-          "url": "/console/manager/home",
-          "active-app": "console",
-          "condition": "ROLE_SUPERUSER"
-        }
-      ]
-    }
-  ]
-}
+  "defaultMenu": [
+      {
+        "label": "Catalogue",
+        "i18n": "catalogue",
+        "url": "/datahub/",
+        "active-app": "datahub"
+      },
+      {
+        "label": "Mapstore viewer",
+        "i18n": "viewer",
+        "url": "/mapstore",
+        "active-app": "mapstore"
+      },
+      {
+        "label": "Maps",
+        "i18n": "maps",
+        "url": "/mapstore/#/home",
+        "active-app": "mapstore-home"
+      },
+      {
+        "label": "Services",
+        "i18n": "services",
+        "url": "/geoserver/web",
+        "active-app": "geoserver"
+      },
+      {
+        "label": "Datafeeder",
+        "i18n": "datafeeder",
+        "url": "/datafeeder",
+        "active-app": "datafeeder",
+        "hasRole": "ROLE_SUPERUSER,ROLE_IMPORT"
+      },
+      {
+        "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN,ROLE_MAPSTORE_ADMIN",
+        "type": "separator"
+      },
+      {
+        "type": "dropdown",
+        "label": "Administration",
+        "i18n": "admin",
+        "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN,ROLE_MAPSTORE_ADMIN",
+        "items": [
+          {
+            "label": "Geonetwork",
+            "i18n": "catalogue",
+            "url": "/geonetwork/srv/:lang3/admin.console",
+            "active-app": "geonetwork",
+            "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN",
+            "blockedRole": "ROLE_GN_EDITOR,ROLE_SUPERUSER"
+          },
+          {
+            "label": "Geonetwork",
+            "i18n": "catalogue",
+            "url": "/geonetwork/srv/:lang3/catalog.edit#/board",
+            "active-app": "geonetwork",
+            "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN",
+            "blockedRole": "ROLE_GN_REVIEWER"
+          },
+          {
+            "label": "Viewer",
+            "i18n": "viewer",
+            "url": "/mapstore/#/admin",
+            "active-app": "msadmin",
+            "hasRole": "ROLE_SUPERUSER,ROLE_MAPSTORE_ADMIN"
+          },
+          {
+            "label": "Console",
+            "i18n": "users",
+            "url": "/console/manager/home",
+            "active-app": "console",
+            "hasRole": "ROLE_SUPERUSER"
+          }
+        ]
+      }
+    ]
+}
\ No newline at end of file

From 0a49d94d44abdbbbfa25f86fa04ed30a97278186 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Fri, 6 Dec 2024 16:49:06 +0100
Subject: [PATCH 04/24] feat: add i18n, config file, improve repsonsive

---
 index.html                        |   3 +-
 public/{menu.json => config.json} |  19 +++-
 src/{menu.json => config.json}    |   6 ++
 src/header.ce.vue                 | 148 +++++++++++++++++-------------
 src/i18n.ts                       |  32 ++++---
 src/ui/GeorchestraLogo.vue        |  39 ++++++++
 6 files changed, 164 insertions(+), 83 deletions(-)
 rename public/{menu.json => config.json} (56%)
 rename src/{menu.json => config.json} (94%)

diff --git a/index.html b/index.html
index 14bfc86..92ceb53 100644
--- a/index.html
+++ b/index.html
@@ -14,9 +14,8 @@
   </head>
   <body style="margin: 0">
     <geor-header
-      logo-url="https://www.georchestra.org/public/georchestra-logo.svg"
       active-app="datahub"
-      menu-file="/menu.json"
+      config-file="/config.json"
     ></geor-header>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/public/menu.json b/public/config.json
similarity index 56%
rename from public/menu.json
rename to public/config.json
index c62dcc8..0bca321 100644
--- a/public/menu.json
+++ b/public/config.json
@@ -1,11 +1,16 @@
 {
   "config": {
-
+    "legacyHeader": "false",
+    "legacyUrl": "/header",
+    "stylesheet": "https://data.lillemetropole.fr/public/georchestra.css",
+    "logoUrl": "https://data.lillemetropole.fr/public/logo-mel.jpg",
+    "hideLogin": false,
+    "lang": "es"
   },
   "menu": [
     {
       "label": "Catalogue",
-      "i18n": "catalogue",
+      "i18n": "hello",
       "url": "/datahub/",
       "active-app" : "datahub"
     },
@@ -26,5 +31,13 @@
         }
       ]
     }
-  ]
+  ],
+  "i18n": {
+    "en": {
+      "hello": "Hello"
+    },
+    "fr": {
+      "hello": "Bonjour"
+    }
+  }
 }
diff --git a/src/menu.json b/src/config.json
similarity index 94%
rename from src/menu.json
rename to src/config.json
index f5c73c7..7b80b4c 100644
--- a/src/menu.json
+++ b/src/config.json
@@ -1,4 +1,10 @@
 {
+  "defaultConfig": {
+    "legacyHeader": false,
+    "legacyUrl": "/header/",
+    "hideLogin": false,
+    "style": ""
+  },
   "defaultMenu": [
       {
         "label": "Catalogue",
diff --git a/src/header.ce.vue b/src/header.ce.vue
index 4c7a0ba..3a0b04d 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -3,36 +3,31 @@ import { computed, onMounted, reactive } from 'vue'
 import { getUserDetails, getPlatformInfos } from './auth'
 import type { User, PlatformInfos } from './auth'
 import UserIcon from './ui/UserIcon.vue'
-import GeorchestraLogo from './ui/GeorchestraLogo.vue'
+import GeorchestraLogo from '@/ui/GeorchestraLogo.vue'
 import ChevronDownIcon from '@/ui/ChevronDownIcon.vue'
-import { LANG_2_TO_3_MAPPER, t } from '@/i18n'
-import { defaultMenu } from '@/menu.json'
+import { getI18n, i18n } from '@/i18n'
+import { defaultMenu, defaultConfig } from '@/config.json'
 
 const props = defineProps<{
-  hideLogin?: string
-  lang?: string
   activeApp?: string
-  logoUrl?: string
-  //legacy option : using old iframe option
-  legacyHeader?: string
-  legacyUrl?: string
-  style?: string
+  configFile?: string
   stylesheet?: string
-  menuFile?: string
 }>()
 
 const state = reactive({
   user: null as null | User,
   mobileMenuOpen: false,
-  lang3: props.lang,
   platformInfos: null as null | PlatformInfos,
   menu: defaultMenu,
+  config: defaultConfig,
+  lang3: defaultConfig.lang,
+  legacyHeader: false,
+  loaded: false,
 })
 
 const isAnonymous = computed(() => !state.user || state.user.anonymous)
 const isWarned = computed(() => state.user?.warned)
 const remainingDays = computed(() => state.user?.remainingDays)
-
 const loginUrl = computed(() => {
   const current = new URL(window.location.href)
   current.searchParams.set('login', '')
@@ -40,10 +35,6 @@ const loginUrl = computed(() => {
 })
 const logoutUrl = computed(() => '/logout')
 
-function toggleMenu(): void {
-  state.mobileMenuOpen = !state.mobileMenuOpen
-}
-
 function checkCondition(item: object): boolean {
   const hasRole = item.hasRole
   if (!state.user) return false
@@ -58,58 +49,87 @@ function checkCondition(item: object): boolean {
 function computeUrl(url: string): string {
   return url.replace(/:lang3/, state.lang3)
 }
+function t(msg: string) {
+  return i18n.global.t(msg)
+}
+
+function setI18n(externalI18n: object): void {
+  state.lang3 = getI18n(
+    externalI18n,
+    state.config.lang || navigator.language.substring(0, 2) || 'en'
+  )
+  state.loaded = true
+}
 
 onMounted(() => {
-  if (props.menuFile)
-    fetch(props.menuFile)
-      .then(res => res.json())
-      .then(file => {
-        state.menu = file.menu
-      })
-  state.lang3 =
-    LANG_2_TO_3_MAPPER[props.lang || navigator.language.substring(0, 2)] ||
-    'eng'
-  getUserDetails().then(user => {
-    state.user = user
-    if (user?.adminRoles?.admin) {
-      getPlatformInfos().then(
-        platformInfos => (state.platformInfos = platformInfos)
-      )
-    }
-  })
+  getUserDetails()
+    .then(user => {
+      state.user = user
+      if (user?.adminRoles?.admin) {
+        getPlatformInfos().then(
+          platformInfos => (state.platformInfos = platformInfos)
+        )
+      }
+    })
+    .then(() => {
+      if (props.configFile)
+        fetch(props.configFile)
+          .then(res => res.json())
+          .then(json => {
+            console.log(json)
+            state.config = json.config
+            if (json.menu) {
+              state.menu = json.menu
+            }
+            setI18n(json.i18n)
+          })
+      else setI18n({})
+    })
 })
 </script>
 <template>
-  <div v-if="props.legacyHeader === 'true'">
+  <div v-if="state.config.legacyHeader && state.loaded">
     <iframe
       class="w-full"
-      v-bind:src="`${props.legacyUrl}${
+      v-bind:src="`${state.config.legacyUrl}${
         props.activeApp ? `?active=${props.activeApp}` : ''
       }`"
-      v-bind:style="props.style"
+      v-bind:style="state.config.style"
     ></iframe>
   </div>
-  <header v-else class="host h-[80px] text-base" v-bind:style="props.style">
-    <link rel="stylesheet" :href="props.stylesheet" v-if="props.stylesheet" />
-    <component :is="'style'" v-if="!props.stylesheet">
+  <header
+    v-else-if="state.loaded"
+    class="host h-[80px] text-base"
+    v-bind:style="state.config.style"
+  >
+    <link
+      rel="stylesheet"
+      :href="props.stylesheet || state.config.stylesheet"
+      v-if="props.stylesheet || state.config.stylesheet"
+    />
+    <component :is="'style'" v-if="!state.config.stylesheet">
       header { --georchestra-header-primary: #85127e;
       --georchestra-header-secondary: #1b1f3b;
       --georchestra-header-primary-light: #85127e1a;
       --georchestra-header-secondary-light: #1b1f3b1a; }
     </component>
-    <div class="justify-between text-slate-600 sm:flex hidden h-full bg-white">
+    <div
+      class="justify-between text-slate-600 md:flex hidden h-full bg-white md:text-sm"
+    >
       <div class="flex">
-        <a href="/" class="flex justify-center items-center px-8 py-2">
+        <a
+          href="/"
+          class="flex justify-center items-center lg:px-3 md:px-2 py-2"
+        >
           <img
-            v-if="props.logoUrl"
-            :src="props.logoUrl"
+            v-if="state.config.logoUrl"
+            :src="state.config.logoUrl"
             alt="geOrchestra logo"
             class="w-32"
           />
-          <GeorchestraLogo
-            v-else
-            class="w-full h-12 my-auto block"
-          ></GeorchestraLogo>
+          <template v-else>
+            <GeorchestraLogo class="w-full h-12 my-auto"></GeorchestraLogo>
+          </template>
         </a>
         <nav class="flex justify-center items-center font-semibold">
           <template v-for="(item, index) in state.menu" :key="index">
@@ -133,7 +153,7 @@ onMounted(() => {
                 <button
                   class="nav-item after:hover:scale-x-0 flex items-center"
                 >
-                  <span class="mr-2 first-letter:capitalize">{{
+                  <span class="lg:mr-2 md:mr-1 first-letter:capitalize">{{
                     item.i18n ? t(item.i18n) : item.label
                   }}</span>
                   <ChevronDownIcon
@@ -188,20 +208,23 @@ onMounted(() => {
           >
         </div>
         <a
-          v-if="props.hideLogin !== 'true' && isAnonymous"
+          v-if="!state.config.hideLogin && isAnonymous"
           class="btn"
           :href="loginUrl"
           >{{ t('login') }}</a
         >
       </div>
     </div>
-    <div class="flex-col sm:hidden w-full h-full">
+    <div class="flex-col md:hidden w-full h-full">
       <div
         class="h-full inline-flex items-center justify-start align-middle px-6 py-8 shrink-0 w-full bg-primary/10"
       >
         <div class="grow flex justify-start items-center py-3">
           <span class="inline-flex items-center rounded-full">
-            <button type="button" @click="toggleMenu">
+            <button
+              type="button"
+              @click="state.mobileMenuOpen = !state.mobileMenuOpen"
+            >
               <svg
                 v-if="state.mobileMenuOpen"
                 xmlns="http://www.w3.org/2000/svg"
@@ -225,17 +248,14 @@ onMounted(() => {
                 />
               </svg>
             </button>
-            <a href="/">
+            <a href="/" class="block ml-3">
               <img
-                v-if="props.logoUrl"
-                :src="props.logoUrl"
+                v-if="state.config.logoUrl"
+                :src="state.config.logoUrl"
                 alt="geOrchestra logo"
-                class="w-24 ml-4"
+                class="w-24"
               />
-              <GeorchestraLogo
-                v-else
-                class="w-full h-12 ml-4"
-              ></GeorchestraLogo>
+              <GeorchestraLogo v-else></GeorchestraLogo>
             </a>
           </span>
         </div>
@@ -247,9 +267,9 @@ onMounted(() => {
                 `${state.user?.firstname} ${state.user?.lastname}`
               }}</span></a
             >
-            <a class="link-btn" :href="logoutUrl">logout</a>
+            <a class="link-btn" :href="logoutUrl">{{ t('logout') }}</a>
           </div>
-          <a v-else class="btn" :href="loginUrl">login</a>
+          <a v-else class="btn" :href="loginUrl">{{ t('login') }}</a>
         </div>
       </div>
 
@@ -288,13 +308,13 @@ onMounted(() => {
     @apply text-xl block text-center py-3 w-full border-b border-b-slate-300 first-letter:capitalize;
   }
   .nav-item {
-    @apply relative text-lg w-fit block after:hover:scale-x-[82%] px-2 mx-2 hover:text-black first-letter:capitalize;
+    @apply relative text-lg w-fit block after:hover:scale-x-100 lg:mx-3 md:mx-2 hover:text-black first-letter:capitalize text-base;
   }
   .nav-item:after {
     @apply block content-[''] absolute h-[3px] bg-primary w-full scale-x-0  transition duration-300 origin-left;
   }
   .nav-item.active {
-    @apply after:scale-x-[82%] after:bg-primary after:bg-none text-gray-900;
+    @apply after:scale-x-100 after:bg-primary after:bg-none text-gray-900;
   }
   .btn {
     @apply px-4 py-2 mx-2 text-slate-100 bg-primary rounded hover:bg-slate-700 transition-colors first-letter:capitalize;
diff --git a/src/i18n.ts b/src/i18n.ts
index 10729b5..ed7c940 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -7,21 +7,25 @@ import ru from './i18n/ru.json'
 import pt from './i18n/pt.json'
 import { createI18n } from 'vue-i18n'
 
-const i18n = createI18n({
-  locale: navigator.language.substring(0, 2),
-  fallbackLocale: 'fr',
-  messages: {
-    en: en,
-    de: de,
-    fr: fr,
-    es: es,
-    nl: nl,
-    ru: ru,
-    pt: pt,
-  },
-})
+export let i18n: any
 
-export const t = i18n.global.t.bind(i18n.global)
+export const getI18n = (messages: any, lang: string) => {
+  i18n = createI18n({
+    locale: navigator.language.substring(0, 2),
+    fallbackLocale: 'en',
+    messages: {
+      en: { ...en, ...messages.en },
+      de: { ...de, ...messages.de },
+      fr: { ...fr, ...messages.fr },
+      es: { ...es, ...messages.es },
+      nl: { ...nl, ...messages.nl },
+      ru: { ...ru, ...messages.ru },
+      pt: { ...pt, ...messages.pt },
+    },
+  })
+  i18n.global.locale = lang
+  return LANG_2_TO_3_MAPPER[lang]
+}
 
 export const LANG_2_TO_3_MAPPER: { [index: string]: any } = {
   en: 'eng',
diff --git a/src/ui/GeorchestraLogo.vue b/src/ui/GeorchestraLogo.vue
index 4994f86..e1b175f 100644
--- a/src/ui/GeorchestraLogo.vue
+++ b/src/ui/GeorchestraLogo.vue
@@ -1,5 +1,6 @@
 <template>
   <svg
+    class="w-full h-12 my-auto md:hidden lg:block sm:block"
     width="76.919907mm"
     height="26.149284mm"
     viewBox="0 0 76.919907 26.149284"
@@ -135,4 +136,42 @@
       </g>
     </g>
   </svg>
+  <svg
+    width="31mm"
+    height="31mm"
+    viewBox="0 0 31 31"
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-full h-12 my-auto lg:hidden md:block hidden"
+  >
+    <path
+      style="
+        fill: #85127e;
+        fill-opacity: 0.4;
+        stroke-width: 0.606168;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        paint-order: markers stroke fill;
+      "
+      d="M126.993 37.251a10.023 10.023 0 0 0-10.024 10.024 10.023 10.023 0 0 0 10.024 10.023 10.023 10.023 0 0 0 9.621-7.233 3.032 3.537 0 0 1-2.014-3.33 3.032 3.537 0 0 1 1.7-3.177 10.023 10.023 0 0 0-9.307-6.307z"
+      transform="matrix(1.1049 0 0 1.1049 -128.341 -36.268)"
+    />
+    <path
+      style="
+        fill: #85127e;
+        fill-opacity: 1;
+        stroke-width: 0.337452;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        paint-order: markers stroke fill;
+      "
+      d="M138.54 41.725a4.989 4.989 0 0 0-4.988 4.989 4.989 4.989 0 0 0 4.988 4.988 4.989 4.989 0 0 0 4.989-4.988 4.989 4.989 0 0 0-4.989-4.99zm0 2.684a2.305 2.305 0 0 1 2.305 2.305 2.305 2.305 0 0 1-2.305 2.304 2.305 2.305 0 0 1-2.305-2.304 2.305 2.305 0 0 1 2.305-2.305z"
+      transform="matrix(1.1049 0 0 1.1049 -128.341 -36.268)"
+    />
+    <g aria-label="ge rchestra" style="fill: #85127e; stroke-width: 0.601849">
+      <path
+        d="M8.499 20.719q-.737 0-1.266-.197-.53-.196-.85-.525-.321-.329-.446-.722l1.232-.298q.083.155.241.317.16.166.427.276.272.113.684.113.582 0 .964-.28.381-.279.381-.902v-1.1h-.068q-.105.212-.31.435-.2.223-.532.374-.329.151-.828.151-.668 0-1.212-.314-.54-.317-.862-.944-.317-.631-.317-1.58 0-.955.317-1.613.321-.661.865-1.001.544-.344 1.213-.344.51 0 .839.174.332.17.529.412.196.238.298.45h.076v-.96h1.349v5.898q0 .729-.355 1.212-.356.488-.971.726-.616.242-1.398.242zm.011-3.431q.434 0 .74-.212.307-.211.465-.608.159-.397.159-.952 0-.548-.159-.96-.155-.412-.46-.638-.303-.23-.745-.23-.457 0-.763.237-.306.238-.461.654-.155.412-.155.937 0 .533.155.933.158.397.465.62.31.219.759.219zM15.198 18.557q-.873 0-1.508-.362-.631-.367-.971-1.035-.34-.673-.34-1.584 0-.895.34-1.571.344-.68.96-1.058.615-.382 1.447-.382.536 0 1.012.174.48.17.847.529.37.359.582.914.211.552.211 1.315v.42h-4.757v-.922h3.446q-.003-.393-.17-.7-.166-.31-.465-.487-.294-.177-.687-.177-.42 0-.737.204-.318.2-.495.529-.174.324-.178.714v.804q0 .507.185.87.186.358.518.551.333.189.778.189.299 0 .54-.083.243-.087.42-.253.178-.167.268-.412l1.277.143q-.12.507-.46.885-.337.374-.862.581-.525.204-1.201.204z"
+      />
+    </g>
+  </svg>
 </template>
+<script setup lang="ts"></script>

From a42e38b76c6b152cc9cd24f36f4a50cc41f6c38c Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 9 Dec 2024 11:55:00 +0100
Subject: [PATCH 05/24] feat: add active app url

---
 public/config.json |  6 +++---
 src/auth.ts        | 30 +-----------------------------
 src/header.ce.vue  | 27 ++++++++++++++++++++++++---
 3 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/public/config.json b/public/config.json
index 0bca321..a0add92 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,6 +1,6 @@
 {
   "config": {
-    "legacyHeader": "false",
+    "legacyHeader": false,
     "legacyUrl": "/header",
     "stylesheet": "https://data.lillemetropole.fr/public/georchestra.css",
     "logoUrl": "https://data.lillemetropole.fr/public/logo-mel.jpg",
@@ -17,7 +17,7 @@
     {
       "label": "My other service",
       "url": "/geoserver/web",
-      "active-app" : "geoserver"
+      "active-app-url": "start:/geoserver"
     },
     {
       "type": "dropdown",
@@ -27,7 +27,7 @@
           "label": "Console",
           "i18n": "users",
           "url": "/console/manager/home",
-          "active-app": "console"
+          "active-app-url": "/console"
         }
       ]
     }
diff --git a/src/auth.ts b/src/auth.ts
index 249810b..b510ee6 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -37,36 +37,8 @@ export interface User {
 }
 
 export async function getUserDetails(): Promise<User> {
-  const jsonFake = {
-    "GeorchestraUser": {
-      "username": "jdoe",
-      "roles": [
-        "ROLE_MAPSTORE_ADMIN",
-        "ROLE_DSP_ILEVIA",
-        "ROLE_USER",
-        "ROLE_ADMINISTRATOR",
-        "ROLE_SUPERUSER"
-      ],
-      "organization": "georchestra",
-      "id": "961b3749-d5c13b2df7",
-      "lastUpdated": "37ad990ece9c0b0e6d42b52fdce45849292cd9468",
-      "firstName": "John",
-      "lastName": "Doe",
-      "email": "john.doe@yopmail.com",
-      "postalAddress": null,
-      "telephoneNumber": null,
-      "title": null,
-      "notes": null,
-      "ldapWarn": false,
-      "ldapRemainingDays": null,
-      "isExternalAuth": false,
-      "oauth2Provider": null,
-      "oauth2Uid": null
-    }
-  }
-
   return fetch(AUTH_API_URL)
-    .then(response => jsonFake)
+    .then(response => response.json())
     .then((json: WhoAmIResponse) => {
       const user = json.GeorchestraUser
       if (!user) {
diff --git a/src/header.ce.vue b/src/header.ce.vue
index 3a0b04d..9008850 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -60,6 +60,22 @@ function setI18n(externalI18n: object): void {
   )
   state.loaded = true
 }
+function activeAppUrl(activeAppUrl: string): boolean {
+  if (!activeAppUrl) return false
+  const splitted = activeAppUrl.split(':')
+  const base = splitted.length > 1 ? splitted[0] : 'start'
+  const url = computeUrl(splitted.length > 1 ? splitted[1] : splitted[0])
+  switch (base) {
+    case 'end':
+      return window.location.pathname.endsWith(url)
+    case 'includes':
+      return window.location.pathname.includes(url)
+    case 'exact':
+      return window.location.pathname === url
+    default:
+      return window.location.pathname.startsWith(url)
+  }
+}
 
 onMounted(() => {
   getUserDetails()
@@ -76,7 +92,6 @@ onMounted(() => {
         fetch(props.configFile)
           .then(res => res.json())
           .then(json => {
-            console.log(json)
             state.config = json.config
             if (json.menu) {
               state.menu = json.menu
@@ -137,7 +152,11 @@ onMounted(() => {
               <a
                 :href="item.url"
                 class="nav-item"
-                :class="{ active: props.activeApp === item['active-app'] }"
+                :class="{
+                  active:
+                    props.activeApp === item['active-app'] ||
+                    activeAppUrl(item['active-app-url']),
+                }"
                 >{{ item.i18n ? t(item.i18n) : item.label }}</a
               >
             </template>
@@ -168,7 +187,9 @@ onMounted(() => {
                     <li
                       v-if="checkCondition(subitem)"
                       :class="{
-                        active: props.activeApp === subitem['active-app'],
+                        active:
+                          props.activeApp === subitem['active-app'] ||
+                          activeAppUrl(subitem['active-app-url']),
                       }"
                     >
                       <a :href="computeUrl(subitem.url)" class="capitalize">

From f1cd390ed5e354fcffa8f1ea208a74bb4d5e7ee7 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 9 Dec 2024 18:18:35 +0100
Subject: [PATCH 06/24] feat: add types and update active app scoring

---
 public/config.json       |  16 +++++-
 src/auth.ts              |  13 -----
 src/config-interfaces.ts |  33 +++++++++++
 src/config.json          |  28 ++++++----
 src/header.ce.vue        | 115 ++++++++++++++++++++++++---------------
 5 files changed, 136 insertions(+), 69 deletions(-)
 create mode 100644 src/config-interfaces.ts

diff --git a/public/config.json b/public/config.json
index a0add92..5d57b88 100644
--- a/public/config.json
+++ b/public/config.json
@@ -12,12 +12,22 @@
       "label": "Catalogue",
       "i18n": "hello",
       "url": "/datahub/",
-      "active-app" : "datahub"
+      "activeApp" : "datahub"
     },
     {
       "label": "My other service",
       "url": "/geoserver/web",
-      "active-app-url": "start:/geoserver"
+      "activeAppUrl": "start:/geoserver"
+    },
+    {
+      "label": "Maps",
+      "url": "/mapstore/#/home",
+      "activeAppUrl": "start:/mapstore"
+    },
+    {
+      "label": "Cadastre",
+      "url": "/mapstore/#/cadastre",
+      "activeAppUrl": "start:/mapstore/#/cadastre"
     },
     {
       "type": "dropdown",
@@ -27,7 +37,7 @@
           "label": "Console",
           "i18n": "users",
           "url": "/console/manager/home",
-          "active-app-url": "/console"
+          "activeAppUrl": "/console"
         }
       ]
     }
diff --git a/src/auth.ts b/src/auth.ts
index b510ee6..b91275c 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -1,19 +1,6 @@
 const AUTH_API_URL = '/whoami'
 const CONSOLE_PLATFORM_API_URL = '/console/private/platform/infos'
 
-type KNOWN_ROLES =
-  | 'ROLE_SUPERUSER'
-  | 'ROLE_ORGADMIN'
-  | 'ROLE_MAPSTORE_ADMIN'
-  | 'ROLE_USER'
-  | 'ROLE_ADMINISTRATOR'
-  | 'ROLE_EXTRACTORAPP'
-  | 'ROLE_GN_REVIEWER'
-  | 'ROLE_GN_EDITOR'
-  | 'ROLE_GN_ADMIN'
-  | 'ROLE_EMAILPROXY'
-  | 'ROLE_ANONYMOUS'
-  | 'ROLE_IMPORT'
 
 interface WhoAmIResponse {
   GeorchestraUser: {
diff --git a/src/config-interfaces.ts b/src/config-interfaces.ts
new file mode 100644
index 0000000..67ee5a7
--- /dev/null
+++ b/src/config-interfaces.ts
@@ -0,0 +1,33 @@
+interface MenuItem {
+  type?: string
+  hasRole?: string
+  blockedRole?: string
+}
+
+export interface Link extends MenuItem {
+  label: string
+  url: string
+  i18n?: string
+  activeApp?: string
+  activeAppUrl?: string
+}
+
+export interface Dropdown extends MenuItem {
+  label: string
+  i18n?: string
+  items?: Array<Link>
+}
+
+export interface Separator extends MenuItem {}
+
+export interface Config {
+  legacyHeader?: boolean
+  legacyUrl?: string
+  logoUrl?: string
+  logoTitle?: string
+  hideLogin?: boolean
+  style?: string
+  stylesheet?: string
+  lang?: string
+  adminRoles: string[]
+}
diff --git a/src/config.json b/src/config.json
index 7b80b4c..05a0a80 100644
--- a/src/config.json
+++ b/src/config.json
@@ -3,38 +3,46 @@
     "legacyHeader": false,
     "legacyUrl": "/header/",
     "hideLogin": false,
-    "style": ""
+    "style": "",
+    "adminRoles": [
+        "ROLE_SUPERUSER",
+        "ROLE_ORGADMIN",
+        "ROLE_GN_ADMIN",
+        "ROLE_GN_REVIEWER",
+        "ROLE_GN_EDITOR",
+        "ROLE_MAPSTORE_ADMIN"
+    ]
   },
   "defaultMenu": [
       {
         "label": "Catalogue",
         "i18n": "catalogue",
         "url": "/datahub/",
-        "active-app": "datahub"
+        "activeApp": "datahub"
       },
       {
         "label": "Mapstore viewer",
         "i18n": "viewer",
         "url": "/mapstore",
-        "active-app": "mapstore"
+        "activeApp": "mapstore"
       },
       {
         "label": "Maps",
         "i18n": "maps",
         "url": "/mapstore/#/home",
-        "active-app": "mapstore-home"
+        "activeApp": "mapstore-home"
       },
       {
         "label": "Services",
         "i18n": "services",
         "url": "/geoserver/web",
-        "active-app": "geoserver"
+        "activeApp": "geoserver"
       },
       {
         "label": "Datafeeder",
         "i18n": "datafeeder",
         "url": "/datafeeder",
-        "active-app": "datafeeder",
+        "activeApp": "datafeeder",
         "hasRole": "ROLE_SUPERUSER,ROLE_IMPORT"
       },
       {
@@ -51,7 +59,7 @@
             "label": "Geonetwork",
             "i18n": "catalogue",
             "url": "/geonetwork/srv/:lang3/admin.console",
-            "active-app": "geonetwork",
+            "activeApp": "geonetwork",
             "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN",
             "blockedRole": "ROLE_GN_EDITOR,ROLE_SUPERUSER"
           },
@@ -59,7 +67,7 @@
             "label": "Geonetwork",
             "i18n": "catalogue",
             "url": "/geonetwork/srv/:lang3/catalog.edit#/board",
-            "active-app": "geonetwork",
+            "activeApp": "geonetwork",
             "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN",
             "blockedRole": "ROLE_GN_REVIEWER"
           },
@@ -67,14 +75,14 @@
             "label": "Viewer",
             "i18n": "viewer",
             "url": "/mapstore/#/admin",
-            "active-app": "msadmin",
+            "activeApp": "msadmin",
             "hasRole": "ROLE_SUPERUSER,ROLE_MAPSTORE_ADMIN"
           },
           {
             "label": "Console",
             "i18n": "users",
             "url": "/console/manager/home",
-            "active-app": "console",
+            "activeApp": "console",
             "hasRole": "ROLE_SUPERUSER"
           }
         ]
diff --git a/src/header.ce.vue b/src/header.ce.vue
index 9008850..61ff2e0 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -6,6 +6,7 @@ import UserIcon from './ui/UserIcon.vue'
 import GeorchestraLogo from '@/ui/GeorchestraLogo.vue'
 import ChevronDownIcon from '@/ui/ChevronDownIcon.vue'
 import { getI18n, i18n } from '@/i18n'
+import type { Link, Separator, Dropdown, Config } from '@/config-interfaces'
 import { defaultMenu, defaultConfig } from '@/config.json'
 
 const props = defineProps<{
@@ -18,11 +19,12 @@ const state = reactive({
   user: null as null | User,
   mobileMenuOpen: false,
   platformInfos: null as null | PlatformInfos,
-  menu: defaultMenu,
-  config: defaultConfig,
-  lang3: defaultConfig.lang,
+  menu: defaultMenu as (Link | Separator | Dropdown)[],
+  config: defaultConfig as Config,
+  lang3: 'eng',
   legacyHeader: false,
   loaded: false,
+  matchedRouteScore: 0,
 })
 
 const isAnonymous = computed(() => !state.user || state.user.anonymous)
@@ -35,7 +37,7 @@ const loginUrl = computed(() => {
 })
 const logoutUrl = computed(() => '/logout')
 
-function checkCondition(item: object): boolean {
+function checkCondition(item: Link | Separator | Dropdown): boolean {
   const hasRole = item.hasRole
   if (!state.user) return false
   if (!hasRole) return true
@@ -49,7 +51,8 @@ function checkCondition(item: object): boolean {
 function computeUrl(url: string): string {
   return url.replace(/:lang3/, state.lang3)
 }
-function t(msg: string) {
+
+function t(msg?: string) {
   return i18n.global.t(msg)
 }
 
@@ -60,46 +63,58 @@ function setI18n(externalI18n: object): void {
   )
   state.loaded = true
 }
-function activeAppUrl(activeAppUrl: string): boolean {
-  if (!activeAppUrl) return false
-  const splitted = activeAppUrl.split(':')
+
+function activeApp(link: Link): boolean {
+  if (!link.activeAppUrl) return link.activeApp === props.activeApp
+  const splitted = link.activeAppUrl.split(':')
   const base = splitted.length > 1 ? splitted[0] : 'start'
   const url = computeUrl(splitted.length > 1 ? splitted[1] : splitted[0])
+  const computedUrl = window.location.href.substring(
+    window.location.origin.length,
+    window.location.href.length
+  )
+  let matched = false
   switch (base) {
     case 'end':
-      return window.location.pathname.endsWith(url)
+      matched = computedUrl.endsWith(url)
+      break
     case 'includes':
-      return window.location.pathname.includes(url)
+      matched = computedUrl.includes(url)
+      break
     case 'exact':
-      return window.location.pathname === url
+      matched = computedUrl === url
+      break
     default:
-      return window.location.pathname.startsWith(url)
+      matched = computedUrl.startsWith(url)
+      break
   }
+  state.matchedRouteScore =
+    matched && link.activeAppUrl.length > state.matchedRouteScore
+      ? link.activeAppUrl.length
+      : state.matchedRouteScore
+  return matched && state.matchedRouteScore === link.activeAppUrl?.length
 }
 
 onMounted(() => {
-  getUserDetails()
-    .then(user => {
-      state.user = user
-      if (user?.adminRoles?.admin) {
-        getPlatformInfos().then(
-          platformInfos => (state.platformInfos = platformInfos)
-        )
-      }
-    })
-    .then(() => {
-      if (props.configFile)
-        fetch(props.configFile)
-          .then(res => res.json())
-          .then(json => {
-            state.config = json.config
-            if (json.menu) {
-              state.menu = json.menu
-            }
-            setI18n(json.i18n)
-          })
-      else setI18n({})
-    })
+  getUserDetails().then(user => {
+    if (props.configFile)
+      fetch(props.configFile)
+        .then(res => res.json())
+        .then(json => {
+          state.config = json.config
+          if (json.menu) {
+            state.menu = json.menu
+          }
+          setI18n(json.i18n)
+        })
+    else setI18n({})
+    state.user = user
+    if (user.roles.some(role => state.config.adminRoles.includes(role))) {
+      getPlatformInfos().then(
+        platformInfos => (state.platformInfos = platformInfos)
+      )
+    }
+  })
 })
 </script>
 <template>
@@ -150,18 +165,21 @@ onMounted(() => {
           <template v-for="(item, index) in state.menu" :key="index">
             <template v-if="!item.type && checkCondition(item)">
               <a
-                :href="item.url"
+                :href="(item as Link).url"
                 class="nav-item"
                 :class="{
                   active:
-                    props.activeApp === item['active-app'] ||
-                    activeAppUrl(item['active-app-url']),
+                    activeApp((item as Link)) ,
                 }"
-                >{{ item.i18n ? t(item.i18n) : item.label }}</a
+                >{{
+                  (item as Link).i18n
+                    ? t((item as Link).i18n)
+                    : (item as Link).label
+                }}</a
               >
             </template>
             <template
-              v-else-if="item.type === 'separator' && checkCondition(item)"
+              v-else-if="(item as Separator).type === 'separator' && checkCondition(item)"
             >
               <span class="text-gray-400">|</span>
             </template>
@@ -173,7 +191,9 @@ onMounted(() => {
                   class="nav-item after:hover:scale-x-0 flex items-center"
                 >
                   <span class="lg:mr-2 md:mr-1 first-letter:capitalize">{{
-                    item.i18n ? t(item.i18n) : item.label
+                    (item as Dropdown).i18n
+                      ? t((item as Dropdown).i18n)
+                      : (item as Dropdown).label
                   }}</span>
                   <ChevronDownIcon
                     class="w-4 h-4"
@@ -183,13 +203,12 @@ onMounted(() => {
                 <ul
                   class="absolute hidden group-hover:block border rounded w-full admin-dropdown z-[1002] bg-white"
                 >
-                  <template v-for="subitem in item.items">
+                  <template v-for="subitem in (item as Dropdown).items">
                     <li
                       v-if="checkCondition(subitem)"
                       :class="{
                         active:
-                          props.activeApp === subitem['active-app'] ||
-                          activeAppUrl(subitem['active-app-url']),
+                          activeApp((subitem as Link)),
                       }"
                     >
                       <a :href="computeUrl(subitem.url)" class="capitalize">
@@ -328,33 +347,43 @@ onMounted(() => {
   .nav-item-mobile {
     @apply text-xl block text-center py-3 w-full border-b border-b-slate-300 first-letter:capitalize;
   }
+
   .nav-item {
     @apply relative text-lg w-fit block after:hover:scale-x-100 lg:mx-3 md:mx-2 hover:text-black first-letter:capitalize text-base;
   }
+
   .nav-item:after {
     @apply block content-[''] absolute h-[3px] bg-primary w-full scale-x-0  transition duration-300 origin-left;
   }
+
   .nav-item.active {
     @apply after:scale-x-100 after:bg-primary after:bg-none text-gray-900;
   }
+
   .btn {
     @apply px-4 py-2 mx-2 text-slate-100 bg-primary rounded hover:bg-slate-700 transition-colors first-letter:capitalize;
   }
+
   .link-btn {
     @apply text-primary hover:text-slate-700 hover:underline underline-offset-8 decoration-2 decoration-slate-700 flex flex-col items-center;
   }
+
   .admin-dropdown > li {
     @apply block text-center hover:bg-primary-light text-gray-700 hover:text-black capitalize;
   }
+
   .admin-dropdown > li > a {
     @apply block w-full h-full py-3;
   }
+
   .admin-dropdown > li.active {
     @apply bg-primary-light;
   }
+
   .icon-dropdown {
     @apply w-4 h-4 inline-block align-text-top;
   }
+
   * {
     -webkit-tap-highlight-color: transparent;
   }

From da82e95479a8af12801a32b65e11b80ca5dea980 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Tue, 10 Dec 2024 10:52:24 +0100
Subject: [PATCH 07/24] feat: remove activeApp

---
 index.html                               |  5 +---
 public/config.json                       | 19 ++++++++++------
 src/config-interfaces.ts                 |  1 -
 src/{config.json => default-config.json} | 29 ++++++++++++------------
 src/header.ce.vue                        | 23 ++++++++-----------
 5 files changed, 36 insertions(+), 41 deletions(-)
 rename src/{config.json => default-config.json} (77%)

diff --git a/index.html b/index.html
index 92ceb53..036171f 100644
--- a/index.html
+++ b/index.html
@@ -13,10 +13,7 @@
     <title>geOrchestra header</title>
   </head>
   <body style="margin: 0">
-    <geor-header
-      active-app="datahub"
-      config-file="/config.json"
-    ></geor-header>
+    <geor-header config-file="/config.json" stylesheet=""></geor-header>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/public/config.json b/public/config.json
index 5d57b88..e0ea5ad 100644
--- a/public/config.json
+++ b/public/config.json
@@ -12,22 +12,27 @@
       "label": "Catalogue",
       "i18n": "hello",
       "url": "/datahub/",
-      "activeApp" : "datahub"
+      "activeAppUrl" : "/datahub"
     },
     {
       "label": "My other service",
       "url": "/geoserver/web",
-      "activeAppUrl": "start:/geoserver"
+      "activeAppUrl": "/geoserver"
     },
     {
-      "label": "Maps",
+      "label": "Mapstore",
+      "url": "/mapstore/#/",
+      "activeAppUrl": "/mapstore"
+    },
+    {
+      "label": "Mapstore home",
       "url": "/mapstore/#/home",
-      "activeAppUrl": "start:/mapstore"
+      "activeAppUrl": "/mapstore/#/home"
     },
     {
-      "label": "Cadastre",
-      "url": "/mapstore/#/cadastre",
-      "activeAppUrl": "start:/mapstore/#/cadastre"
+      "label": "Cadastrapp",
+      "url": "/mapstore/#/context/cadastre",
+      "activeAppUrl": "includes:/#/context/cadastre"
     },
     {
       "type": "dropdown",
diff --git a/src/config-interfaces.ts b/src/config-interfaces.ts
index 67ee5a7..0610cb5 100644
--- a/src/config-interfaces.ts
+++ b/src/config-interfaces.ts
@@ -8,7 +8,6 @@ export interface Link extends MenuItem {
   label: string
   url: string
   i18n?: string
-  activeApp?: string
   activeAppUrl?: string
 }
 
diff --git a/src/config.json b/src/default-config.json
similarity index 77%
rename from src/config.json
rename to src/default-config.json
index 05a0a80..986d3a1 100644
--- a/src/config.json
+++ b/src/default-config.json
@@ -18,31 +18,31 @@
         "label": "Catalogue",
         "i18n": "catalogue",
         "url": "/datahub/",
-        "activeApp": "datahub"
+        "activeAppUrl": "/datahub"
       },
       {
         "label": "Mapstore viewer",
         "i18n": "viewer",
         "url": "/mapstore",
-        "activeApp": "mapstore"
+        "activeAppUrl": "/mapstore"
       },
       {
         "label": "Maps",
         "i18n": "maps",
         "url": "/mapstore/#/home",
-        "activeApp": "mapstore-home"
+        "activeAppUrl": "/mapstore/#/home"
       },
       {
         "label": "Services",
         "i18n": "services",
         "url": "/geoserver/web",
-        "activeApp": "geoserver"
+        "activeAppUrl": "/geoserver"
       },
       {
         "label": "Datafeeder",
         "i18n": "datafeeder",
         "url": "/datafeeder",
-        "activeApp": "datafeeder",
+        "activeAppUrl": "/datafeeder",
         "hasRole": "ROLE_SUPERUSER,ROLE_IMPORT"
       },
       {
@@ -58,31 +58,30 @@
           {
             "label": "Geonetwork",
             "i18n": "catalogue",
-            "url": "/geonetwork/srv/:lang3/admin.console",
-            "activeApp": "geonetwork",
-            "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN",
-            "blockedRole": "ROLE_GN_EDITOR,ROLE_SUPERUSER"
+            "url": "/geonetwork/srv/:lang3/catalog.edit#/board",
+            "activeAppUrl": "/geonetwork",
+            "hasRole": "ROLE_GN_EDITOR",
+            "blockedRole": "ROLE_SUPERUSER,ROLE_GN_REVIEWER,ROLE_GN_ADMIN"
           },
           {
             "label": "Geonetwork",
             "i18n": "catalogue",
-            "url": "/geonetwork/srv/:lang3/catalog.edit#/board",
-            "activeApp": "geonetwork",
-            "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN",
-            "blockedRole": "ROLE_GN_REVIEWER"
+            "url": "/geonetwork/srv/:lang3/admin.console",
+            "activeAppUrl": "/geonetwork",
+            "hasRole": "ROLE_SUPERUSER,ROLE_GN_REVIEWER,ROLE_GN_ADMIN"
           },
           {
             "label": "Viewer",
             "i18n": "viewer",
             "url": "/mapstore/#/admin",
-            "activeApp": "msadmin",
+            "activeAppUrl": "/mapstore/#/admin",
             "hasRole": "ROLE_SUPERUSER,ROLE_MAPSTORE_ADMIN"
           },
           {
             "label": "Console",
             "i18n": "users",
             "url": "/console/manager/home",
-            "activeApp": "console",
+            "activeAppUrl": "/console",
             "hasRole": "ROLE_SUPERUSER"
           }
         ]
diff --git a/src/header.ce.vue b/src/header.ce.vue
index 61ff2e0..6e10dce 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -7,7 +7,7 @@ import GeorchestraLogo from '@/ui/GeorchestraLogo.vue'
 import ChevronDownIcon from '@/ui/ChevronDownIcon.vue'
 import { getI18n, i18n } from '@/i18n'
 import type { Link, Separator, Dropdown, Config } from '@/config-interfaces'
-import { defaultMenu, defaultConfig } from '@/config.json'
+import { defaultMenu, defaultConfig } from '@/default-config.json'
 
 const props = defineProps<{
   activeApp?: string
@@ -53,7 +53,7 @@ function computeUrl(url: string): string {
 }
 
 function t(msg?: string) {
-  return i18n.global.t(msg)
+  return i18n?.global.t(msg)
 }
 
 function setI18n(externalI18n: object): void {
@@ -61,11 +61,10 @@ function setI18n(externalI18n: object): void {
     externalI18n,
     state.config.lang || navigator.language.substring(0, 2) || 'en'
   )
-  state.loaded = true
 }
 
 function activeApp(link: Link): boolean {
-  if (!link.activeAppUrl) return link.activeApp === props.activeApp
+  if (!link.activeAppUrl) return false
   const splitted = link.activeAppUrl.split(':')
   const base = splitted.length > 1 ? splitted[0] : 'start'
   const url = computeUrl(splitted.length > 1 ? splitted[1] : splitted[0])
@@ -109,11 +108,13 @@ onMounted(() => {
         })
     else setI18n({})
     state.user = user
+    state.config.stylesheet ??= props.stylesheet
     if (user.roles.some(role => state.config.adminRoles.includes(role))) {
       getPlatformInfos().then(
         platformInfos => (state.platformInfos = platformInfos)
       )
     }
+    state.loaded = true
   })
 })
 </script>
@@ -137,7 +138,7 @@ onMounted(() => {
       :href="props.stylesheet || state.config.stylesheet"
       v-if="props.stylesheet || state.config.stylesheet"
     />
-    <component :is="'style'" v-if="!state.config.stylesheet">
+    <component :is="'style'" v-if="!props.stylesheet && !state.config.stylesheet">
       header { --georchestra-header-primary: #85127e;
       --georchestra-header-secondary: #1b1f3b;
       --georchestra-header-primary-light: #85127e1a;
@@ -163,7 +164,7 @@ onMounted(() => {
         </a>
         <nav class="flex justify-center items-center font-semibold">
           <template v-for="(item, index) in state.menu" :key="index">
-            <template v-if="!item.type && checkCondition(item)">
+            <template v-if="!item.type && checkCondition(item)" >
               <a
                 :href="(item as Link).url"
                 class="nav-item"
@@ -171,11 +172,7 @@ onMounted(() => {
                   active:
                     activeApp((item as Link)) ,
                 }"
-                >{{
-                  (item as Link).i18n
-                    ? t((item as Link).i18n)
-                    : (item as Link).label
-                }}</a
+                >{{ (item as Link).i18n ? t((item as Link).i18n) : (item as Link).label }}</a
               >
             </template>
             <template
@@ -191,9 +188,7 @@ onMounted(() => {
                   class="nav-item after:hover:scale-x-0 flex items-center"
                 >
                   <span class="lg:mr-2 md:mr-1 first-letter:capitalize">{{
-                    (item as Dropdown).i18n
-                      ? t((item as Dropdown).i18n)
-                      : (item as Dropdown).label
+                      (item as Dropdown).i18n ? t((item as Dropdown).i18n) : (item as Dropdown).label
                   }}</span>
                   <ChevronDownIcon
                     class="w-4 h-4"

From b27d85d89e303f74cad73414e819412398505e1b Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Tue, 10 Dec 2024 10:53:02 +0100
Subject: [PATCH 08/24] feat: format

---
 src/header.ce.vue | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/header.ce.vue b/src/header.ce.vue
index 6e10dce..6687a9f 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -138,7 +138,10 @@ onMounted(() => {
       :href="props.stylesheet || state.config.stylesheet"
       v-if="props.stylesheet || state.config.stylesheet"
     />
-    <component :is="'style'" v-if="!props.stylesheet && !state.config.stylesheet">
+    <component
+      :is="'style'"
+      v-if="!props.stylesheet && !state.config.stylesheet"
+    >
       header { --georchestra-header-primary: #85127e;
       --georchestra-header-secondary: #1b1f3b;
       --georchestra-header-primary-light: #85127e1a;
@@ -164,7 +167,7 @@ onMounted(() => {
         </a>
         <nav class="flex justify-center items-center font-semibold">
           <template v-for="(item, index) in state.menu" :key="index">
-            <template v-if="!item.type && checkCondition(item)" >
+            <template v-if="!item.type && checkCondition(item)">
               <a
                 :href="(item as Link).url"
                 class="nav-item"
@@ -172,7 +175,11 @@ onMounted(() => {
                   active:
                     activeApp((item as Link)) ,
                 }"
-                >{{ (item as Link).i18n ? t((item as Link).i18n) : (item as Link).label }}</a
+                >{{
+                  (item as Link).i18n
+                    ? t((item as Link).i18n)
+                    : (item as Link).label
+                }}</a
               >
             </template>
             <template
@@ -188,7 +195,9 @@ onMounted(() => {
                   class="nav-item after:hover:scale-x-0 flex items-center"
                 >
                   <span class="lg:mr-2 md:mr-1 first-letter:capitalize">{{
-                      (item as Dropdown).i18n ? t((item as Dropdown).i18n) : (item as Dropdown).label
+                    (item as Dropdown).i18n
+                      ? t((item as Dropdown).i18n)
+                      : (item as Dropdown).label
                   }}</span>
                   <ChevronDownIcon
                     class="w-4 h-4"

From 8a2ef7959f2a376f11837690763384f3891e5dca Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Tue, 10 Dec 2024 18:32:06 +0100
Subject: [PATCH 09/24] feat: this should work

---
 src/default-config.json |  6 +++---
 src/header.ce.vue       | 24 ++++++++++++++++++++----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/default-config.json b/src/default-config.json
index 986d3a1..6f44e40 100644
--- a/src/default-config.json
+++ b/src/default-config.json
@@ -41,8 +41,8 @@
       {
         "label": "Datafeeder",
         "i18n": "datafeeder",
-        "url": "/datafeeder",
-        "activeAppUrl": "/datafeeder",
+        "url": "/import",
+        "activeAppUrl": "/import",
         "hasRole": "ROLE_SUPERUSER,ROLE_IMPORT"
       },
       {
@@ -81,7 +81,7 @@
             "label": "Console",
             "i18n": "users",
             "url": "/console/manager/home",
-            "activeAppUrl": "/console",
+            "activeAppUrl": "/console/manager",
             "hasRole": "ROLE_SUPERUSER"
           }
         ]
diff --git a/src/header.ce.vue b/src/header.ce.vue
index 6687a9f..f18e689 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive } from 'vue'
+import { computed, onMounted, onUpdated, reactive } from 'vue'
 import { getUserDetails, getPlatformInfos } from './auth'
 import type { User, PlatformInfos } from './auth'
 import UserIcon from './ui/UserIcon.vue'
@@ -24,6 +24,8 @@ const state = reactive({
   lang3: 'eng',
   legacyHeader: false,
   loaded: false,
+  links: [] as string[],
+  matchedLink: null as null | string,
   matchedRouteScore: 0,
 })
 
@@ -61,6 +63,13 @@ function setI18n(externalI18n: object): void {
     externalI18n,
     state.config.lang || navigator.language.substring(0, 2) || 'en'
   )
+  state.loaded = true
+}
+
+function getActiveTab(str: string): void {
+  state.matchedRouteScore = 0
+  window.location.href = computeUrl(str)
+  window.location.reload()
 }
 
 function activeApp(link: Link): boolean {
@@ -91,11 +100,19 @@ function activeApp(link: Link): boolean {
     matched && link.activeAppUrl.length > state.matchedRouteScore
       ? link.activeAppUrl.length
       : state.matchedRouteScore
+  console.log(
+    matched,
+    link.activeAppUrl,
+    state.matchedRouteScore,
+    link.activeAppUrl.length
+  )
   return matched && state.matchedRouteScore === link.activeAppUrl?.length
 }
 
 onMounted(() => {
   getUserDetails().then(user => {
+    state.user = user
+    state.config.stylesheet ??= props.stylesheet
     if (props.configFile)
       fetch(props.configFile)
         .then(res => res.json())
@@ -107,14 +124,11 @@ onMounted(() => {
           setI18n(json.i18n)
         })
     else setI18n({})
-    state.user = user
-    state.config.stylesheet ??= props.stylesheet
     if (user.roles.some(role => state.config.adminRoles.includes(role))) {
       getPlatformInfos().then(
         platformInfos => (state.platformInfos = platformInfos)
       )
     }
-    state.loaded = true
   })
 })
 </script>
@@ -171,6 +185,7 @@ onMounted(() => {
               <a
                 :href="(item as Link).url"
                 class="nav-item"
+                @click="getActiveTab((item as Link).url)"
                 :class="{
                   active:
                     activeApp((item as Link)) ,
@@ -210,6 +225,7 @@ onMounted(() => {
                   <template v-for="subitem in (item as Dropdown).items">
                     <li
                       v-if="checkCondition(subitem)"
+                      @click="getActiveTab((subitem as Link).url)"
                       :class="{
                         active:
                           activeApp((subitem as Link)),

From 04454306dae58f6f7a2a2c9361e57518bc946b23 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Wed, 18 Dec 2024 14:11:31 +0100
Subject: [PATCH 10/24] feat: remove getActiveTab

---
 src/header.ce.vue | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/src/header.ce.vue b/src/header.ce.vue
index f18e689..cae13df 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUpdated, reactive } from 'vue'
+import { computed, onMounted, reactive } from 'vue'
 import { getUserDetails, getPlatformInfos } from './auth'
 import type { User, PlatformInfos } from './auth'
 import UserIcon from './ui/UserIcon.vue'
@@ -24,8 +24,6 @@ const state = reactive({
   lang3: 'eng',
   legacyHeader: false,
   loaded: false,
-  links: [] as string[],
-  matchedLink: null as null | string,
   matchedRouteScore: 0,
 })
 
@@ -66,12 +64,6 @@ function setI18n(externalI18n: object): void {
   state.loaded = true
 }
 
-function getActiveTab(str: string): void {
-  state.matchedRouteScore = 0
-  window.location.href = computeUrl(str)
-  window.location.reload()
-}
-
 function activeApp(link: Link): boolean {
   if (!link.activeAppUrl) return false
   const splitted = link.activeAppUrl.split(':')
@@ -100,12 +92,6 @@ function activeApp(link: Link): boolean {
     matched && link.activeAppUrl.length > state.matchedRouteScore
       ? link.activeAppUrl.length
       : state.matchedRouteScore
-  console.log(
-    matched,
-    link.activeAppUrl,
-    state.matchedRouteScore,
-    link.activeAppUrl.length
-  )
   return matched && state.matchedRouteScore === link.activeAppUrl?.length
 }
 
@@ -185,7 +171,6 @@ onMounted(() => {
               <a
                 :href="(item as Link).url"
                 class="nav-item"
-                @click="getActiveTab((item as Link).url)"
                 :class="{
                   active:
                     activeApp((item as Link)) ,
@@ -225,7 +210,6 @@ onMounted(() => {
                   <template v-for="subitem in (item as Dropdown).items">
                     <li
                       v-if="checkCondition(subitem)"
-                      @click="getActiveTab((subitem as Link).url)"
                       :class="{
                         active:
                           activeApp((subitem as Link)),

From ef47dd2c41ec1f78eb0c234bcdac890de33b2532 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Fri, 20 Dec 2024 09:26:50 +0100
Subject: [PATCH 11/24] feat: better naming

---
 src/header.ce.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/header.ce.vue b/src/header.ce.vue
index cae13df..a444941 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -64,11 +64,16 @@ function setI18n(externalI18n: object): void {
   state.loaded = true
 }
 
-function activeApp(link: Link): boolean {
+function matchLinkUrl(link: Link): boolean {
   if (!link.activeAppUrl) return false
-  const splitted = link.activeAppUrl.split(':')
-  const base = splitted.length > 1 ? splitted[0] : 'start'
-  const url = computeUrl(splitted.length > 1 ? splitted[1] : splitted[0])
+  const activeAppUrlSplitted = link.activeAppUrl.split(':')
+  const base =
+    activeAppUrlSplitted.length > 1 ? activeAppUrlSplitted[0] : 'start'
+  const url = computeUrl(
+    activeAppUrlSplitted.length > 1
+      ? activeAppUrlSplitted[1]
+      : activeAppUrlSplitted[0]
+  )
   const computedUrl = window.location.href.substring(
     window.location.origin.length,
     window.location.href.length
@@ -173,7 +178,7 @@ onMounted(() => {
                 class="nav-item"
                 :class="{
                   active:
-                    activeApp((item as Link)) ,
+                    matchLinkUrl((item as Link)) ,
                 }"
                 >{{
                   (item as Link).i18n
@@ -212,7 +217,7 @@ onMounted(() => {
                       v-if="checkCondition(subitem)"
                       :class="{
                         active:
-                          activeApp((subitem as Link)),
+                          matchLinkUrl((subitem as Link)),
                       }"
                     >
                       <a :href="computeUrl(subitem.url)" class="capitalize">

From 8e8fbb9285cb7a71b72329d51ebaf9fee3071c11 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 23 Dec 2024 09:34:58 +0100
Subject: [PATCH 12/24] feat: ugly but working

---
 src/header.ce.vue | 120 +++++++++++++++++++++++++++-------------------
 src/i18n.ts       |   4 ++
 2 files changed, 74 insertions(+), 50 deletions(-)

diff --git a/src/header.ce.vue b/src/header.ce.vue
index a444941..9694612 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -5,7 +5,7 @@ import type { User, PlatformInfos } from './auth'
 import UserIcon from './ui/UserIcon.vue'
 import GeorchestraLogo from '@/ui/GeorchestraLogo.vue'
 import ChevronDownIcon from '@/ui/ChevronDownIcon.vue'
-import { getI18n, i18n } from '@/i18n'
+import { getI18n, t } from '@/i18n'
 import type { Link, Separator, Dropdown, Config } from '@/config-interfaces'
 import { defaultMenu, defaultConfig } from '@/default-config.json'
 
@@ -25,6 +25,7 @@ const state = reactive({
   legacyHeader: false,
   loaded: false,
   matchedRouteScore: 0,
+  activeAppUrl: '',
 })
 
 const isAnonymous = computed(() => !state.user || state.user.anonymous)
@@ -48,56 +49,63 @@ function checkCondition(item: Link | Separator | Dropdown): boolean {
   return hasRole.split(',').some(c => state.user?.roles?.indexOf(c) !== -1)
 }
 
-function computeUrl(url: string): string {
+function replaceUrlsVariables(url: string): string {
   return url.replace(/:lang3/, state.lang3)
 }
 
-function t(msg?: string) {
-  return i18n?.global.t(msg)
-}
-
-function setI18n(externalI18n: object): void {
-  state.lang3 = getI18n(
-    externalI18n,
-    state.config.lang || navigator.language.substring(0, 2) || 'en'
-  )
-  state.loaded = true
-}
-
-function matchLinkUrl(link: Link): boolean {
-  if (!link.activeAppUrl) return false
-  const activeAppUrlSplitted = link.activeAppUrl.split(':')
-  const base =
-    activeAppUrlSplitted.length > 1 ? activeAppUrlSplitted[0] : 'start'
-  const url = computeUrl(
-    activeAppUrlSplitted.length > 1
-      ? activeAppUrlSplitted[1]
-      : activeAppUrlSplitted[0]
-  )
+function determineActiveApp(): void {
+  const tmp = allNodes(state.menu, 'activeAppUrl')
   const computedUrl = window.location.href.substring(
     window.location.origin.length,
     window.location.href.length
   )
-  let matched = false
-  switch (base) {
-    case 'end':
-      matched = computedUrl.endsWith(url)
-      break
-    case 'includes':
-      matched = computedUrl.includes(url)
-      break
-    case 'exact':
-      matched = computedUrl === url
-      break
-    default:
-      matched = computedUrl.startsWith(url)
-      break
+  let matched: boolean
+  for (const link of tmp) {
+    matched = false
+    const activeAppUrlSplitted = link.split(':')
+    const base =
+      activeAppUrlSplitted.length > 1 ? activeAppUrlSplitted[0] : 'start'
+    const url = replaceUrlsVariables(
+      activeAppUrlSplitted.length > 1
+        ? activeAppUrlSplitted[1]
+        : activeAppUrlSplitted[0]
+    )
+    switch (base) {
+      case 'end':
+        matched = computedUrl.endsWith(url)
+        break
+      case 'includes':
+        matched = computedUrl.includes(url)
+        break
+      case 'exact':
+        matched = computedUrl === url
+        break
+      default:
+        matched = computedUrl.startsWith(url)
+        break
+    }
+    state.matchedRouteScore =
+      matched && link.length > state.matchedRouteScore
+        ? link.length
+        : state.matchedRouteScore
+    if (matched && state.matchedRouteScore === link?.length) {
+      state.activeAppUrl = link
+    }
   }
-  state.matchedRouteScore =
-    matched && link.activeAppUrl.length > state.matchedRouteScore
-      ? link.activeAppUrl.length
-      : state.matchedRouteScore
-  return matched && state.matchedRouteScore === link.activeAppUrl?.length
+}
+
+function allNodes(obj: any, key: string, array?: any[]): string[] {
+  array = array || []
+  if ('object' === typeof obj) {
+    for (let k in obj) {
+      if (k === key) {
+        array.push(obj[k])
+      } else {
+        allNodes(obj[k], key, array)
+      }
+    }
+  }
+  return array
 }
 
 onMounted(() => {
@@ -112,9 +120,18 @@ onMounted(() => {
           if (json.menu) {
             state.menu = json.menu
           }
-          setI18n(json.i18n)
+          state.lang3 = getI18n(
+            json.i18n,
+            state.config.lang || navigator.language.substring(0, 2) || 'en'
+          )
+          determineActiveApp()
+          state.loaded = true
         })
-    else setI18n({})
+    else {
+      state.lang3 = getI18n({}, navigator.language.substring(0, 2) || 'en')
+      determineActiveApp()
+      state.loaded = true
+    }
     if (user.roles.some(role => state.config.adminRoles.includes(role))) {
       getPlatformInfos().then(
         platformInfos => (state.platformInfos = platformInfos)
@@ -176,9 +193,9 @@ onMounted(() => {
               <a
                 :href="(item as Link).url"
                 class="nav-item"
+                @click="state.activeAppUrl = (item as Link).activeAppUrl"
                 :class="{
-                  active:
-                    matchLinkUrl((item as Link)) ,
+                  active: (item as Link).activeAppUrl == state.activeAppUrl,
                 }"
                 >{{
                   (item as Link).i18n
@@ -215,12 +232,15 @@ onMounted(() => {
                   <template v-for="subitem in (item as Dropdown).items">
                     <li
                       v-if="checkCondition(subitem)"
+                      @click="state.activeAppUrl = (item as Link).activeAppUrl"
                       :class="{
-                        active:
-                          matchLinkUrl((subitem as Link)),
+                        active: (subitem as Link).activeAppUrl == state.activeAppUrl,
                       }"
                     >
-                      <a :href="computeUrl(subitem.url)" class="capitalize">
+                      <a
+                        :href="replaceUrlsVariables(subitem.url)"
+                        class="capitalize"
+                      >
                         {{ subitem.i18n ? t(subitem.i18n) : subitem.label }}</a
                       >
                     </li>
diff --git a/src/i18n.ts b/src/i18n.ts
index ed7c940..5c95b75 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -27,6 +27,10 @@ export const getI18n = (messages: any, lang: string) => {
   return LANG_2_TO_3_MAPPER[lang]
 }
 
+export const t = (msg?: string) => {
+  return i18n?.global.t(msg)
+}
+
 export const LANG_2_TO_3_MAPPER: { [index: string]: any } = {
   en: 'eng',
   nl: 'dut',

From eab279ff6e04a5b4cba1a7574652d0542bff4638 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 23 Dec 2024 10:04:43 +0100
Subject: [PATCH 13/24] feat: cleaning

---
 src/header.ce.vue | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/header.ce.vue b/src/header.ce.vue
index 9694612..8792578 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -22,7 +22,6 @@ const state = reactive({
   menu: defaultMenu as (Link | Separator | Dropdown)[],
   config: defaultConfig as Config,
   lang3: 'eng',
-  legacyHeader: false,
   loaded: false,
   matchedRouteScore: 0,
   activeAppUrl: '',
@@ -108,6 +107,15 @@ function allNodes(obj: any, key: string, array?: any[]): string[] {
   return array
 }
 
+function setI18nAndActiveApp(i18n: any) {
+  state.lang3 = getI18n(
+    i18n,
+    state.config.lang || navigator.language.substring(0, 2) || 'en'
+  )
+  determineActiveApp()
+  state.loaded = true
+}
+
 onMounted(() => {
   getUserDetails().then(user => {
     state.user = user
@@ -120,17 +128,10 @@ onMounted(() => {
           if (json.menu) {
             state.menu = json.menu
           }
-          state.lang3 = getI18n(
-            json.i18n,
-            state.config.lang || navigator.language.substring(0, 2) || 'en'
-          )
-          determineActiveApp()
-          state.loaded = true
+          setI18nAndActiveApp(json.i18n)
         })
     else {
-      state.lang3 = getI18n({}, navigator.language.substring(0, 2) || 'en')
-      determineActiveApp()
-      state.loaded = true
+      setI18nAndActiveApp({})
     }
     if (user.roles.some(role => state.config.adminRoles.includes(role))) {
       getPlatformInfos().then(

From 3208d92cdebe0d3798e4eda2b49dc5cd06404be3 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 23 Dec 2024 11:07:22 +0100
Subject: [PATCH 14/24] feat: add icons

---
 src/config-interfaces.ts |  2 ++
 src/header.ce.vue        | 32 ++++++++++++++++++++++++++------
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/config-interfaces.ts b/src/config-interfaces.ts
index 0610cb5..b106641 100644
--- a/src/config-interfaces.ts
+++ b/src/config-interfaces.ts
@@ -9,6 +9,7 @@ export interface Link extends MenuItem {
   url: string
   i18n?: string
   activeAppUrl?: string
+  icon?: string
 }
 
 export interface Dropdown extends MenuItem {
@@ -27,6 +28,7 @@ export interface Config {
   hideLogin?: boolean
   style?: string
   stylesheet?: string
+  iconsUrl?: string
   lang?: string
   adminRoles: string[]
 }
diff --git a/src/header.ce.vue b/src/header.ce.vue
index 8792578..6509082 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -161,6 +161,11 @@ onMounted(() => {
       :href="props.stylesheet || state.config.stylesheet"
       v-if="props.stylesheet || state.config.stylesheet"
     />
+    <link
+      rel="stylesheet"
+      :href="state.config.iconsUrl"
+      v-if="state.config.iconsUrl"
+    />
     <component
       :is="'style'"
       v-if="!props.stylesheet && !state.config.stylesheet"
@@ -198,12 +203,19 @@ onMounted(() => {
                 :class="{
                   active: (item as Link).activeAppUrl == state.activeAppUrl,
                 }"
-                >{{
+              >
+                <i
+                  v-if="item.icon"
+                  :class="item.icon"
+                  class="item-icon"
+                  style="font-size: 0.8rem"
+                ></i>
+                {{
                   (item as Link).i18n
                     ? t((item as Link).i18n)
                     : (item as Link).label
-                }}</a
-              >
+                }}
+              </a>
             </template>
             <template
               v-else-if="(item as Separator).type === 'separator' && checkCondition(item)"
@@ -240,10 +252,18 @@ onMounted(() => {
                     >
                       <a
                         :href="replaceUrlsVariables(subitem.url)"
-                        class="capitalize"
-                      >
-                        {{ subitem.i18n ? t(subitem.i18n) : subitem.label }}</a
+                        class="capitalize !flex justify-center items-center"
                       >
+                        <i
+                          v-if="subitem.icon"
+                          :class="subitem.icon"
+                          class="pr-1 block pb-[2px] subitem-icon"
+                          style="font-size: 1rem"
+                        ></i>
+                        <span class="block">{{
+                          subitem.i18n ? t(subitem.i18n) : subitem.label
+                        }}</span>
+                      </a>
                     </li>
                   </template>
                 </ul>

From 7847a8cf322751fb6ce0a925c653516b2d5ae482 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 23 Dec 2024 11:26:39 +0100
Subject: [PATCH 15/24] feat: format and readme

---
 .vscode/extensions.json |   3 +-
 README.md               |  15 ++--
 public/config.json      |  18 ++++-
 src/auth.ts             |   1 -
 src/default-config.json | 160 ++++++++++++++++++++--------------------
 src/header.ce.vue       |   5 +-
 6 files changed, 105 insertions(+), 97 deletions(-)

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index b7b60da..a7cea0b 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,4 +1,3 @@
 {
-  "recommendations": [
-    "Vue.volar""]
+  "recommendations": ["Vue.volar"]
 }
diff --git a/README.md b/README.md
index 5404104..86485f4 100644
--- a/README.md
+++ b/README.md
@@ -32,16 +32,11 @@ Iframe can still be set with defining `legacy-url` attribute, style can also be
 
 Attributes available :
 
-| Attribute     | Description                                                                                          | Example                                                                     | For host | For legacy |
-| ------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------- | ---------- |
-| hideLogin     | Used to hide the login buttton                                                                       | `<geor-header hide-login='true'>`                                           | v        |            |
-| lang          | Used to force header language (default value : en)                                                   | `<geor-header lang='de'>`                                                   | v        |            |
-| active-app    | Use this attribute to set the active class in menu                                                   | `<geor-header active-app='console'>`                                        | v        | v          |
-| logo-url      | Use this attribute to set the logo for the new header (not legacy one).                              | `<geor-header logo-url='https://linktomylogo.com'>`                         | v        |            |
-| legacy-header | Use this attribute to enable the legacy header `iframe` tag. Needs `legacy-url`.                     | `<geor-header legacy-header='true' legacy-url="/header/">`                  |          | v          |
-| legacy-url    | Legacy URL: if set, activates iframe with src attribute pointing to this URL. Needs `legacy-header`. | `<geor-header legacy-header='true' legacy-url="/header/"></geor-header>`    |          | v          |
-| style         | adds this style to iframe or host tag (if legacy url is not used)                                    | `<geor-header legacy-url="myheader.com" style="width: 100%"></geor-header>` | v        | v          |
-| stylesheet    | adds this stylesheet to host tag                                                                     | `<geor-header stylesheet="mystylesheet.css"></geor-header>`                 | v        |            |
+| Attribute   | Description                                                                    | Example                                                     | For new header | For legacy |
+| ----------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------- | -------------- | ---------- |
+| active-app  | Use this attribute to set the active class in menu                             | `<geor-header active-app='console'>`                        |                | v          |
+| config-file | Use this attribute to set the config file for the new header (not legacy one). | `<geor-header config-file="/config.json">`                  | v              |            |
+| stylesheet  | adds this stylesheet to the new header (not legacy one).                       | `<geor-header stylesheet="mystylesheet.css"></geor-header>` | v              |            |
 
 3. Provide a custom stylesheet
 
diff --git a/public/config.json b/public/config.json
index e0ea5ad..dbe595c 100644
--- a/public/config.json
+++ b/public/config.json
@@ -5,6 +5,7 @@
     "stylesheet": "https://data.lillemetropole.fr/public/georchestra.css",
     "logoUrl": "https://data.lillemetropole.fr/public/logo-mel.jpg",
     "hideLogin": false,
+    "iconsUrl": "https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css",
     "lang": "es"
   },
   "menu": [
@@ -12,7 +13,7 @@
       "label": "Catalogue",
       "i18n": "hello",
       "url": "/datahub/",
-      "activeAppUrl" : "/datahub"
+      "activeAppUrl": "/datahub"
     },
     {
       "label": "My other service",
@@ -22,7 +23,8 @@
     {
       "label": "Mapstore",
       "url": "/mapstore/#/",
-      "activeAppUrl": "/mapstore"
+      "activeAppUrl": "/mapstore",
+      "icon": "iconoir-map"
     },
     {
       "label": "Mapstore home",
@@ -42,7 +44,14 @@
           "label": "Console",
           "i18n": "users",
           "url": "/console/manager/home",
-          "activeAppUrl": "/console"
+          "activeAppUrl": "/console",
+          "icon": "iconoir-globe"
+        },
+        {
+          "label": "Console",
+          "i18n": "users",
+          "url": "/console/manager/blep",
+          "activeAppUrl": "/console/bl"
         }
       ]
     }
@@ -53,6 +62,9 @@
     },
     "fr": {
       "hello": "Bonjour"
+    },
+    "es": {
+      "hello": "Hola"
     }
   }
 }
diff --git a/src/auth.ts b/src/auth.ts
index b91275c..0a395db 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -1,7 +1,6 @@
 const AUTH_API_URL = '/whoami'
 const CONSOLE_PLATFORM_API_URL = '/console/private/platform/infos'
 
-
 interface WhoAmIResponse {
   GeorchestraUser: {
     roles: string[]
diff --git a/src/default-config.json b/src/default-config.json
index 6f44e40..cd295f9 100644
--- a/src/default-config.json
+++ b/src/default-config.json
@@ -5,86 +5,86 @@
     "hideLogin": false,
     "style": "",
     "adminRoles": [
-        "ROLE_SUPERUSER",
-        "ROLE_ORGADMIN",
-        "ROLE_GN_ADMIN",
-        "ROLE_GN_REVIEWER",
-        "ROLE_GN_EDITOR",
-        "ROLE_MAPSTORE_ADMIN"
+      "ROLE_SUPERUSER",
+      "ROLE_ORGADMIN",
+      "ROLE_GN_ADMIN",
+      "ROLE_GN_REVIEWER",
+      "ROLE_GN_EDITOR",
+      "ROLE_MAPSTORE_ADMIN"
     ]
   },
   "defaultMenu": [
-      {
-        "label": "Catalogue",
-        "i18n": "catalogue",
-        "url": "/datahub/",
-        "activeAppUrl": "/datahub"
-      },
-      {
-        "label": "Mapstore viewer",
-        "i18n": "viewer",
-        "url": "/mapstore",
-        "activeAppUrl": "/mapstore"
-      },
-      {
-        "label": "Maps",
-        "i18n": "maps",
-        "url": "/mapstore/#/home",
-        "activeAppUrl": "/mapstore/#/home"
-      },
-      {
-        "label": "Services",
-        "i18n": "services",
-        "url": "/geoserver/web",
-        "activeAppUrl": "/geoserver"
-      },
-      {
-        "label": "Datafeeder",
-        "i18n": "datafeeder",
-        "url": "/import",
-        "activeAppUrl": "/import",
-        "hasRole": "ROLE_SUPERUSER,ROLE_IMPORT"
-      },
-      {
-        "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN,ROLE_MAPSTORE_ADMIN",
-        "type": "separator"
-      },
-      {
-        "type": "dropdown",
-        "label": "Administration",
-        "i18n": "admin",
-        "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN,ROLE_MAPSTORE_ADMIN",
-        "items": [
-          {
-            "label": "Geonetwork",
-            "i18n": "catalogue",
-            "url": "/geonetwork/srv/:lang3/catalog.edit#/board",
-            "activeAppUrl": "/geonetwork",
-            "hasRole": "ROLE_GN_EDITOR",
-            "blockedRole": "ROLE_SUPERUSER,ROLE_GN_REVIEWER,ROLE_GN_ADMIN"
-          },
-          {
-            "label": "Geonetwork",
-            "i18n": "catalogue",
-            "url": "/geonetwork/srv/:lang3/admin.console",
-            "activeAppUrl": "/geonetwork",
-            "hasRole": "ROLE_SUPERUSER,ROLE_GN_REVIEWER,ROLE_GN_ADMIN"
-          },
-          {
-            "label": "Viewer",
-            "i18n": "viewer",
-            "url": "/mapstore/#/admin",
-            "activeAppUrl": "/mapstore/#/admin",
-            "hasRole": "ROLE_SUPERUSER,ROLE_MAPSTORE_ADMIN"
-          },
-          {
-            "label": "Console",
-            "i18n": "users",
-            "url": "/console/manager/home",
-            "activeAppUrl": "/console/manager",
-            "hasRole": "ROLE_SUPERUSER"
-          }
-        ]
-      }
-    ]
-}
\ No newline at end of file
+    {
+      "label": "Catalogue",
+      "i18n": "catalogue",
+      "url": "/datahub/",
+      "activeAppUrl": "/datahub"
+    },
+    {
+      "label": "Mapstore viewer",
+      "i18n": "viewer",
+      "url": "/mapstore",
+      "activeAppUrl": "/mapstore"
+    },
+    {
+      "label": "Maps",
+      "i18n": "maps",
+      "url": "/mapstore/#/home",
+      "activeAppUrl": "/mapstore/#/home"
+    },
+    {
+      "label": "Services",
+      "i18n": "services",
+      "url": "/geoserver/web",
+      "activeAppUrl": "/geoserver"
+    },
+    {
+      "label": "Datafeeder",
+      "i18n": "datafeeder",
+      "url": "/import",
+      "activeAppUrl": "/import",
+      "hasRole": "ROLE_SUPERUSER,ROLE_IMPORT"
+    },
+    {
+      "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN,ROLE_MAPSTORE_ADMIN",
+      "type": "separator"
+    },
+    {
+      "type": "dropdown",
+      "label": "Administration",
+      "i18n": "admin",
+      "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN,ROLE_MAPSTORE_ADMIN",
+      "items": [
+        {
+          "label": "Geonetwork",
+          "i18n": "catalogue",
+          "url": "/geonetwork/srv/:lang3/catalog.edit#/board",
+          "activeAppUrl": "/geonetwork",
+          "hasRole": "ROLE_GN_EDITOR",
+          "blockedRole": "ROLE_SUPERUSER,ROLE_GN_REVIEWER,ROLE_GN_ADMIN"
+        },
+        {
+          "label": "Geonetwork",
+          "i18n": "catalogue",
+          "url": "/geonetwork/srv/:lang3/admin.console",
+          "activeAppUrl": "/geonetwork",
+          "hasRole": "ROLE_SUPERUSER,ROLE_GN_REVIEWER,ROLE_GN_ADMIN"
+        },
+        {
+          "label": "Viewer",
+          "i18n": "viewer",
+          "url": "/mapstore/#/admin",
+          "activeAppUrl": "/mapstore/#/admin",
+          "hasRole": "ROLE_SUPERUSER,ROLE_MAPSTORE_ADMIN"
+        },
+        {
+          "label": "Console",
+          "i18n": "users",
+          "url": "/console/manager/home",
+          "activeAppUrl": "/console/manager",
+          "hasRole": "ROLE_SUPERUSER"
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/header.ce.vue b/src/header.ce.vue
index 6509082..6adb8d7 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -242,7 +242,10 @@ onMounted(() => {
                 <ul
                   class="absolute hidden group-hover:block border rounded w-full admin-dropdown z-[1002] bg-white"
                 >
-                  <template v-for="subitem in (item as Dropdown).items">
+                  <template
+                    v-for="(subitem, subindex) in (item as Dropdown).items"
+                    :key="subindex"
+                  >
                     <li
                       v-if="checkCondition(subitem)"
                       @click="state.activeAppUrl = (item as Link).activeAppUrl"

From eb9b75b7e7153b3caa7e96685480c5ac20c3483e Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 23 Dec 2024 12:10:26 +0100
Subject: [PATCH 16/24] feat: add documentation

---
 CONFIG.md                 | 71 +++++++++++++++++++++++++++++++++++++++
 README.md                 | 10 +++---
 index.html                |  2 +-
 public/config.json        | 70 --------------------------------------
 public/sample-config.json | 54 +++++++++++++++++++++++++++++
 src/config-interfaces.ts  | 19 +++++++++++
 6 files changed, 150 insertions(+), 76 deletions(-)
 create mode 100644 CONFIG.md
 delete mode 100644 public/config.json
 create mode 100644 public/sample-config.json

diff --git a/CONFIG.md b/CONFIG.md
new file mode 100644
index 0000000..ae6b6c3
--- /dev/null
+++ b/CONFIG.md
@@ -0,0 +1,71 @@
+# Configuration file
+
+A configuration file can be set to customize the header. 
+
+Inside it, you can set the following properties:
+```json
+{
+  "config": {},
+  "menu": [],
+  "i18n": {}
+}
+```
+
+## Config
+
+Config can contains old tag attributes :
+```json
+  "config": {
+    "legacyHeader": "false",
+    "legacyUrl": "/header",
+    "stylesheet": "https://data.lillemetropole.fr/public/georchestra.css",
+    "logoUrl": "https://data.lillemetropole.fr/public/logo-mel.jpg",
+    "hideLogin": false,
+    "lang": "es"
+  }
+```
+
+Full configuration [is here](https://github.com/georchestra/header/blob/main/src/config-interfaces.ts#L32-L53).
+
+:warning: You can also define stylesheet in the datadir (`default.properties`) because this file can be used in other georchestra's apps. It will take precedence over the one set in the config file of the header.
+
+## Menu
+
+Menu can contain three type of objects : `link` (by default), `separator` or `dropdown`
+
+There's actually just one level of dropdowns. You cannot have a dropdown inside a dropdown.
+
+To see the actual structure of the menu, you can check the [menu interface](./src/default-config.json)
+
+### Active tab matching 
+
+A decision has been made in order to have the best match between the active tab and the current page. 
+
+If two conditions can be resolved for a link to be active, the longest one will be used.
+
+URL of tab : /mapstore/#/home
+
+- Condition 1 : activeAppUrl /mapstore 
+- Condition 2 : activeAppUrl /mapstore/#/home
+
+Condition 2 will be used because /mapstore/#/home = 16 characters.
+
+
+## i18n
+
+In addition to translations set in [./src/i18n/](./src/i18n/), you can add custom translations : 
+```json
+{
+  "i18n": {
+    "en": {
+      "customi18nkey": "WMS/WFS service"
+    },
+    "fr": {
+      "customi18nkey": "Service WMS/WFS"
+    },
+    "es": {
+      "customi18nkey": "Servicio WMS/WFS"
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/README.md b/README.md
index 86485f4..88da80f 100644
--- a/README.md
+++ b/README.md
@@ -32,11 +32,11 @@ Iframe can still be set with defining `legacy-url` attribute, style can also be
 
 Attributes available :
 
-| Attribute   | Description                                                                    | Example                                                     | For new header | For legacy |
-| ----------- | ------------------------------------------------------------------------------ | ----------------------------------------------------------- | -------------- | ---------- |
-| active-app  | Use this attribute to set the active class in menu                             | `<geor-header active-app='console'>`                        |                | v          |
-| config-file | Use this attribute to set the config file for the new header (not legacy one). | `<geor-header config-file="/config.json">`                  | v              |            |
-| stylesheet  | adds this stylesheet to the new header (not legacy one).                       | `<geor-header stylesheet="mystylesheet.css"></geor-header>` | v              |            |
+| Attribute   | Description                                                                                                 | Example                                                     | For new header | For legacy |
+| ----------- |-------------------------------------------------------------------------------------------------------------| ----------------------------------------------------------- | -------------- | ---------- |
+| active-app  | Use this attribute to set the active class in menu                                                          | `<geor-header active-app='console'>`                        |                | v          |
+| config-file | Use this attribute to set the config file for the new header (not legacy one). See [CONFIG.md](./CONFIG.md) | `<geor-header config-file="/config.json">`                  | v              |            |
+| stylesheet  | adds this stylesheet to the new header (not legacy one).                                                    | `<geor-header stylesheet="mystylesheet.css"></geor-header>` | v              |            |
 
 3. Provide a custom stylesheet
 
diff --git a/index.html b/index.html
index 036171f..c43bab2 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
     <title>geOrchestra header</title>
   </head>
   <body style="margin: 0">
-    <geor-header config-file="/config.json" stylesheet=""></geor-header>
+    <geor-header config-file="/sample-config.json" stylesheet=""></geor-header>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/public/config.json b/public/config.json
deleted file mode 100644
index dbe595c..0000000
--- a/public/config.json
+++ /dev/null
@@ -1,70 +0,0 @@
-{
-  "config": {
-    "legacyHeader": false,
-    "legacyUrl": "/header",
-    "stylesheet": "https://data.lillemetropole.fr/public/georchestra.css",
-    "logoUrl": "https://data.lillemetropole.fr/public/logo-mel.jpg",
-    "hideLogin": false,
-    "iconsUrl": "https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css",
-    "lang": "es"
-  },
-  "menu": [
-    {
-      "label": "Catalogue",
-      "i18n": "hello",
-      "url": "/datahub/",
-      "activeAppUrl": "/datahub"
-    },
-    {
-      "label": "My other service",
-      "url": "/geoserver/web",
-      "activeAppUrl": "/geoserver"
-    },
-    {
-      "label": "Mapstore",
-      "url": "/mapstore/#/",
-      "activeAppUrl": "/mapstore",
-      "icon": "iconoir-map"
-    },
-    {
-      "label": "Mapstore home",
-      "url": "/mapstore/#/home",
-      "activeAppUrl": "/mapstore/#/home"
-    },
-    {
-      "label": "Cadastrapp",
-      "url": "/mapstore/#/context/cadastre",
-      "activeAppUrl": "includes:/#/context/cadastre"
-    },
-    {
-      "type": "dropdown",
-      "label": "A dropdown",
-      "items": [
-        {
-          "label": "Console",
-          "i18n": "users",
-          "url": "/console/manager/home",
-          "activeAppUrl": "/console",
-          "icon": "iconoir-globe"
-        },
-        {
-          "label": "Console",
-          "i18n": "users",
-          "url": "/console/manager/blep",
-          "activeAppUrl": "/console/bl"
-        }
-      ]
-    }
-  ],
-  "i18n": {
-    "en": {
-      "hello": "Hello"
-    },
-    "fr": {
-      "hello": "Bonjour"
-    },
-    "es": {
-      "hello": "Hola"
-    }
-  }
-}
diff --git a/public/sample-config.json b/public/sample-config.json
new file mode 100644
index 0000000..fe3f9d5
--- /dev/null
+++ b/public/sample-config.json
@@ -0,0 +1,54 @@
+{
+  "config": {
+    "legacyHeader": false,
+    "legacyUrl": "/header",
+    "stylesheet": "/public/georchestra.css",
+    "logoUrl": "/public/logo-mel.jpg",
+    "hideLogin": false,
+    "iconsUrl": "https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css",
+    "lang": "es"
+  },
+  "menu": [
+    {
+      "label": "Catalogue",
+      "i18n": "datahub",
+      "url": "/datahub/",
+      "activeAppUrl": "/datahub"
+    },
+    {
+      "label": "WMS/WFS",
+      "i18n": "customi18n",
+      "url": "/geoserver/web",
+      "activeAppUrl": "includes:/geoserver",
+      "icon": "iconoir-map"
+    },
+    {
+      "type": "separator",
+      "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN,ROLE_MAPSTORE_ADMIN"
+    },
+    {
+      "type": "dropdown",
+      "label": "A dropdown",
+      "items": [
+        {
+          "label": "Console",
+          "i18n": "users",
+          "url": "/console/manager/home",
+          "activeAppUrl": "/console",
+          "icon": "iconoir-globe"
+        }
+      ]
+    }
+  ],
+  "i18n": {
+    "en": {
+      "customi18n": "WMS/WFS service"
+    },
+    "fr": {
+      "customi18n": "Service WMS/WFS"
+    },
+    "es": {
+      "customi18n": "Servicio WMS/WFS"
+    }
+  }
+}
diff --git a/src/config-interfaces.ts b/src/config-interfaces.ts
index b106641..f5e2682 100644
--- a/src/config-interfaces.ts
+++ b/src/config-interfaces.ts
@@ -1,34 +1,53 @@
 interface MenuItem {
   type?: string
+  //Role required to display the item
   hasRole?: string
+  //Role which hides the item
   blockedRole?: string
 }
 
 export interface Link extends MenuItem {
   label: string
+  //URL to redirect to
   url: string
+  //i18n key to display the label
   i18n?: string
+  //to trigger the active tab (underline). By default, it triggers on start with e.g /console (start:/console) will trigger on /console** pages
+  // Values can be 'start', 'exact', 'includes', 'end'
   activeAppUrl?: string
+  //Icon to display next to the label
   icon?: string
 }
 
 export interface Dropdown extends MenuItem {
   label: string
+  //i18n key to display the label
   i18n?: string
+  //List of items to display in the dropdown
   items?: Array<Link>
 }
 
 export interface Separator extends MenuItem {}
 
 export interface Config {
+  //Display or not the legacy header (an iframe pointing to the legacyUrl)
   legacyHeader?: boolean
+  //Legacy url to display in an iframe
   legacyUrl?: string
+  //Logo url to display in the header
   logoUrl?: string
+  //Title to the logo displayed in the header
   logoTitle?: string
+  //Whether to hide the login button
   hideLogin?: boolean
+  //Custom style to apply to the header
   style?: string
+  //Custom stylesheet to apply to the header
   stylesheet?: string
+  //Link to icons url. Tested with https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css
   iconsUrl?: string
+  //Force header's language
   lang?: string
+  //List of roles considered as admin roles, if admin, triggers a request to /console/private/platform/infos
   adminRoles: string[]
 }

From 1734baf69537b2c230184cc1a0991dc47df9c56e Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 23 Dec 2024 12:12:18 +0100
Subject: [PATCH 17/24] feat: add documentation

---
 CONFIG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONFIG.md b/CONFIG.md
index ae6b6c3..e1df221 100644
--- a/CONFIG.md
+++ b/CONFIG.md
@@ -25,7 +25,7 @@ Config can contains old tag attributes :
   }
 ```
 
-Full configuration [is here](https://github.com/georchestra/header/blob/main/src/config-interfaces.ts#L32-L53).
+Full configuration [is here](./src/config-interfaces.ts#L32-L53).
 
 :warning: You can also define stylesheet in the datadir (`default.properties`) because this file can be used in other georchestra's apps. It will take precedence over the one set in the config file of the header.
 

From 145e8295c0cc1e27c9bdd4e30c1d4def064517bf Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 23 Dec 2024 12:14:45 +0100
Subject: [PATCH 18/24] feat: better example

---
 public/sample-config.json | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/sample-config.json b/public/sample-config.json
index fe3f9d5..0bc7539 100644
--- a/public/sample-config.json
+++ b/public/sample-config.json
@@ -23,8 +23,7 @@
       "icon": "iconoir-map"
     },
     {
-      "type": "separator",
-      "hasRole": "ROLE_SUPERUSER,ROLE_GN_EDITOR,ROLE_GN_ADMIN,ROLE_MAPSTORE_ADMIN"
+      "type": "separator"
     },
     {
       "type": "dropdown",
@@ -36,6 +35,14 @@
           "url": "/console/manager/home",
           "activeAppUrl": "/console",
           "icon": "iconoir-globe"
+        },
+        {
+          "label": "Geonetwork",
+          "i18n": "catalogue",
+          "url": "/geonetwork/srv/:lang3/catalog.edit#/board",
+          "activeAppUrl": "/geonetwork",
+          "hasRole": "ROLE_GN_EDITOR",
+          "blockedRole": "ROLE_SUPERUSER,ROLE_GN_REVIEWER,ROLE_GN_ADMIN"
         }
       ]
     }

From c3bf8470397a71087ff716b2f49bb3fa6405fc83 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 23 Dec 2024 13:09:38 +0100
Subject: [PATCH 19/24] feat: use object assign to keep default values

---
 src/header.ce.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/header.ce.vue b/src/header.ce.vue
index 6adb8d7..17e4ae4 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -124,10 +124,12 @@ onMounted(() => {
       fetch(props.configFile)
         .then(res => res.json())
         .then(json => {
-          state.config = json.config
+          console.log(state.config)
+          state.config = Object.assign({}, state.config, json.config)
           if (json.menu) {
             state.menu = json.menu
           }
+          console.log(state.config)
           setI18nAndActiveApp(json.i18n)
         })
     else {

From aaff7fe5d9e57f0e7f356925120370a880dfa988 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 23 Dec 2024 13:13:16 +0100
Subject: [PATCH 20/24] fix: build

---
 src/header.ce.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/header.ce.vue b/src/header.ce.vue
index 17e4ae4..a187eb3 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -24,7 +24,7 @@ const state = reactive({
   lang3: 'eng',
   loaded: false,
   matchedRouteScore: 0,
-  activeAppUrl: '',
+  activeAppUrl: '' as string | undefined,
 })
 
 const isAnonymous = computed(() => !state.user || state.user.anonymous)
@@ -207,8 +207,8 @@ onMounted(() => {
                 }"
               >
                 <i
-                  v-if="item.icon"
-                  :class="item.icon"
+                  v-if="(item as Link).icon"
+                  :class="(item as Link).icon"
                   class="item-icon"
                   style="font-size: 0.8rem"
                 ></i>

From c2446ef2a3c5063d7d9465190f0e826b188018f5 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Mon, 23 Dec 2024 17:59:50 +0100
Subject: [PATCH 21/24] fix: reset height

---
 README.md                 | 11 ++++++-----
 index.html                |  2 +-
 public/sample-config.json | 13 +------------
 src/config-interfaces.ts  |  2 --
 src/default-config.json   |  1 -
 src/header.ce.vue         | 15 +++++++--------
 6 files changed, 15 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 88da80f..eac109c 100644
--- a/README.md
+++ b/README.md
@@ -32,11 +32,12 @@ Iframe can still be set with defining `legacy-url` attribute, style can also be
 
 Attributes available :
 
-| Attribute   | Description                                                                                                 | Example                                                     | For new header | For legacy |
-| ----------- |-------------------------------------------------------------------------------------------------------------| ----------------------------------------------------------- | -------------- | ---------- |
-| active-app  | Use this attribute to set the active class in menu                                                          | `<geor-header active-app='console'>`                        |                | v          |
-| config-file | Use this attribute to set the config file for the new header (not legacy one). See [CONFIG.md](./CONFIG.md) | `<geor-header config-file="/config.json">`                  | v              |            |
-| stylesheet  | adds this stylesheet to the new header (not legacy one).                                                    | `<geor-header stylesheet="mystylesheet.css"></geor-header>` | v              |            |
+| Attribute   | Description                                                                                                 | Example                                                     | For new header | For legacy header (iframe) |
+|-------------|-------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------| -------------- |----------------------------|
+| active-app  | Use this attribute to set the active class in menu                                                          | `<geor-header active-app='console'>`                        |                | v                          |
+| config-file | Use this attribute to set the config file for the new header (not legacy one). See [CONFIG.md](./CONFIG.md) | `<geor-header config-file="/config.json">`                  | v              |                            |
+| stylesheet  | adds this stylesheet to the new header (not legacy one).                                                    | `<geor-header stylesheet="mystylesheet.css"></geor-header>` | v              |                            |
+| height      | sets the height of the header (in pixels)                                                                   | `<geor-header height="80"></geor-header>`                   | v              | v                          |
 
 3. Provide a custom stylesheet
 
diff --git a/index.html b/index.html
index c43bab2..e6a54f2 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
     <title>geOrchestra header</title>
   </head>
   <body style="margin: 0">
-    <geor-header config-file="/sample-config.json" stylesheet=""></geor-header>
+    <geor-header config-file="/sample-config.json" stylesheet="" height="80"></geor-header>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/public/sample-config.json b/public/sample-config.json
index 0bc7539..0c13c17 100644
--- a/public/sample-config.json
+++ b/public/sample-config.json
@@ -46,16 +46,5 @@
         }
       ]
     }
-  ],
-  "i18n": {
-    "en": {
-      "customi18n": "WMS/WFS service"
-    },
-    "fr": {
-      "customi18n": "Service WMS/WFS"
-    },
-    "es": {
-      "customi18n": "Servicio WMS/WFS"
-    }
-  }
+  ]
 }
diff --git a/src/config-interfaces.ts b/src/config-interfaces.ts
index f5e2682..09bc00d 100644
--- a/src/config-interfaces.ts
+++ b/src/config-interfaces.ts
@@ -40,8 +40,6 @@ export interface Config {
   logoTitle?: string
   //Whether to hide the login button
   hideLogin?: boolean
-  //Custom style to apply to the header
-  style?: string
   //Custom stylesheet to apply to the header
   stylesheet?: string
   //Link to icons url. Tested with https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css
diff --git a/src/default-config.json b/src/default-config.json
index cd295f9..4a4e071 100644
--- a/src/default-config.json
+++ b/src/default-config.json
@@ -3,7 +3,6 @@
     "legacyHeader": false,
     "legacyUrl": "/header/",
     "hideLogin": false,
-    "style": "",
     "adminRoles": [
       "ROLE_SUPERUSER",
       "ROLE_ORGADMIN",
diff --git a/src/header.ce.vue b/src/header.ce.vue
index a187eb3..127b4dd 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -13,6 +13,7 @@ const props = defineProps<{
   activeApp?: string
   configFile?: string
   stylesheet?: string
+  height?: number
 }>()
 
 const state = reactive({
@@ -107,9 +108,9 @@ function allNodes(obj: any, key: string, array?: any[]): string[] {
   return array
 }
 
-function setI18nAndActiveApp(i18n: any) {
+function setI18nAndActiveApp(i18n?: any) {
   state.lang3 = getI18n(
-    i18n,
+    i18n || {},
     state.config.lang || navigator.language.substring(0, 2) || 'en'
   )
   determineActiveApp()
@@ -132,9 +133,7 @@ onMounted(() => {
           console.log(state.config)
           setI18nAndActiveApp(json.i18n)
         })
-    else {
-      setI18nAndActiveApp({})
-    }
+    else setI18nAndActiveApp()
     if (user.roles.some(role => state.config.adminRoles.includes(role))) {
       getPlatformInfos().then(
         platformInfos => (state.platformInfos = platformInfos)
@@ -150,13 +149,13 @@ onMounted(() => {
       v-bind:src="`${state.config.legacyUrl}${
         props.activeApp ? `?active=${props.activeApp}` : ''
       }`"
-      v-bind:style="state.config.style"
+      :style="`height:${props.height}px;width:100%;border:0;`"
     ></iframe>
   </div>
   <header
     v-else-if="state.loaded"
-    class="host h-[80px] text-base"
-    v-bind:style="state.config.style"
+    class="host h-[80px] text-base ${props.height}"
+    :style="`height:${props.height}px`"
   >
     <link
       rel="stylesheet"

From 6395a8ea36ab21ce36bd36ada2db111d033ef999 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Wed, 8 Jan 2025 16:00:31 +0100
Subject: [PATCH 22/24] feat: set leagcy header back to props to avoid import
 config file

---
 CONFIG.md                 |  2 --
 public/sample-config.json |  2 --
 src/config-interfaces.ts  |  4 ----
 src/default-config.json   |  2 --
 src/header.ce.vue         | 10 +++++-----
 5 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/CONFIG.md b/CONFIG.md
index e1df221..a11b800 100644
--- a/CONFIG.md
+++ b/CONFIG.md
@@ -16,8 +16,6 @@ Inside it, you can set the following properties:
 Config can contains old tag attributes :
 ```json
   "config": {
-    "legacyHeader": "false",
-    "legacyUrl": "/header",
     "stylesheet": "https://data.lillemetropole.fr/public/georchestra.css",
     "logoUrl": "https://data.lillemetropole.fr/public/logo-mel.jpg",
     "hideLogin": false,
diff --git a/public/sample-config.json b/public/sample-config.json
index 0c13c17..f75fa93 100644
--- a/public/sample-config.json
+++ b/public/sample-config.json
@@ -1,7 +1,5 @@
 {
   "config": {
-    "legacyHeader": false,
-    "legacyUrl": "/header",
     "stylesheet": "/public/georchestra.css",
     "logoUrl": "/public/logo-mel.jpg",
     "hideLogin": false,
diff --git a/src/config-interfaces.ts b/src/config-interfaces.ts
index 09bc00d..2791dfb 100644
--- a/src/config-interfaces.ts
+++ b/src/config-interfaces.ts
@@ -30,10 +30,6 @@ export interface Dropdown extends MenuItem {
 export interface Separator extends MenuItem {}
 
 export interface Config {
-  //Display or not the legacy header (an iframe pointing to the legacyUrl)
-  legacyHeader?: boolean
-  //Legacy url to display in an iframe
-  legacyUrl?: string
   //Logo url to display in the header
   logoUrl?: string
   //Title to the logo displayed in the header
diff --git a/src/default-config.json b/src/default-config.json
index 4a4e071..acdf264 100644
--- a/src/default-config.json
+++ b/src/default-config.json
@@ -1,7 +1,5 @@
 {
   "defaultConfig": {
-    "legacyHeader": false,
-    "legacyUrl": "/header/",
     "hideLogin": false,
     "adminRoles": [
       "ROLE_SUPERUSER",
diff --git a/src/header.ce.vue b/src/header.ce.vue
index 127b4dd..9681790 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -14,6 +14,8 @@ const props = defineProps<{
   configFile?: string
   stylesheet?: string
   height?: number
+  legacyHeader?: string
+  legacyUrl?: string
 }>()
 
 const state = reactive({
@@ -125,12 +127,10 @@ onMounted(() => {
       fetch(props.configFile)
         .then(res => res.json())
         .then(json => {
-          console.log(state.config)
           state.config = Object.assign({}, state.config, json.config)
           if (json.menu) {
             state.menu = json.menu
           }
-          console.log(state.config)
           setI18nAndActiveApp(json.i18n)
         })
     else setI18nAndActiveApp()
@@ -143,10 +143,10 @@ onMounted(() => {
 })
 </script>
 <template>
-  <div v-if="state.config.legacyHeader && state.loaded">
+  <div v-if="props.legacyHeader && state.loaded">
     <iframe
       class="w-full"
-      v-bind:src="`${state.config.legacyUrl}${
+      v-bind:src="`${props.legacyUrl}${
         props.activeApp ? `?active=${props.activeApp}` : ''
       }`"
       :style="`height:${props.height}px;width:100%;border:0;`"
@@ -154,7 +154,7 @@ onMounted(() => {
   </div>
   <header
     v-else-if="state.loaded"
-    class="host h-[80px] text-base ${props.height}"
+    class="host h-[80px] text-base"
     :style="`height:${props.height}px`"
   >
     <link

From 5063b7b14351f16d86480dfdebd79de9c09ea3df Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Wed, 8 Jan 2025 16:01:12 +0100
Subject: [PATCH 23/24] feat: set leagcy header back to props to avoid import
 config file

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index eac109c..71c9bed 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,8 @@ Attributes available :
 | config-file | Use this attribute to set the config file for the new header (not legacy one). See [CONFIG.md](./CONFIG.md) | `<geor-header config-file="/config.json">`                  | v              |                            |
 | stylesheet  | adds this stylesheet to the new header (not legacy one).                                                    | `<geor-header stylesheet="mystylesheet.css"></geor-header>` | v              |                            |
 | height      | sets the height of the header (in pixels)                                                                   | `<geor-header height="80"></geor-header>`                   | v              | v                          |
+| legacy-header | Use this attribute to enable the legacy header `iframe` tag. Needs `legacy-url`.                     | `<geor-header legacy-header='true' legacy-url="/header/">`                  |          | v          |
+| legacy-url    | Legacy URL: if set, activates iframe with src attribute pointing to this URL. Needs `legacy-header`. | `<geor-header legacy-header='true' legacy-url="/header/"></geor-header>`    |          | v          |
 
 3. Provide a custom stylesheet
 

From f7c06a68b594ef69423189c72532d72529c0a8b1 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Wed, 8 Jan 2025 16:10:04 +0100
Subject: [PATCH 24/24] feat: and logo either

---
 src/header.ce.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/header.ce.vue b/src/header.ce.vue
index 9681790..4fa25ba 100644
--- a/src/header.ce.vue
+++ b/src/header.ce.vue
@@ -16,6 +16,7 @@ const props = defineProps<{
   height?: number
   legacyHeader?: string
   legacyUrl?: string
+  logoUrl?: string
 }>()
 
 const state = reactive({
@@ -185,8 +186,8 @@ onMounted(() => {
           class="flex justify-center items-center lg:px-3 md:px-2 py-2"
         >
           <img
-            v-if="state.config.logoUrl"
-            :src="state.config.logoUrl"
+            v-if="props.logoUrl || state.config.logoUrl"
+            :src="props.logoUrl || state.config.logoUrl"
             alt="geOrchestra logo"
             class="w-32"
           />
@@ -344,8 +345,8 @@ onMounted(() => {
             </button>
             <a href="/" class="block ml-3">
               <img
-                v-if="state.config.logoUrl"
-                :src="state.config.logoUrl"
+                v-if="props.logoUrl || state.config.logoUrl"
+                :src="props.logoUrl || state.config.logoUrl"
                 alt="geOrchestra logo"
                 class="w-24"
               />