Merge pull request #27 from jdev-org/mobile

Use configuration file for mobile view as well

Author: pierrejego

public/sample-config.json

@@ -4,7 +4,7 @@
     "logoUrl": "/public/logo-mel.jpg",
     "hideLogin": false,
     "iconsUrl": "https://cdn.jsdelivr.net/gh/iconoir-icons/iconoir@main/css/iconoir.css",
-    "lang": "es"
+    "lang": "fr"
   },
   "menu": [
     {

src/header.ce.vue

@@ -29,6 +29,7 @@ const state = reactive({
   loaded: false,
   matchedRouteScore: 0,
   activeAppUrl: '' as string | undefined,
+  activeDropdown: null as null | number,
 })
 
 const isAnonymous = computed(() => !state.user || state.user.anonymous)
@@ -120,6 +121,10 @@ function setI18nAndActiveApp(i18n?: any) {
   state.loaded = true
 }
 
+function toggleDropdown(index: number) {
+  state.activeDropdown = state.activeDropdown === index ? null : index
+}
+
 onMounted(() => {
   getUserDetails().then(user => {
     state.user = user
@@ -254,7 +259,9 @@ onMounted(() => {
                   >
                     <li
                       v-if="checkCondition(subitem)"
-                      @click="state.activeAppUrl = (item as Link).activeAppUrl"
+                      @click="
+                        state.activeAppUrl = (subitem as Link).activeAppUrl
+                      "
                       :class="{
                         active: (subitem as Link).activeAppUrl == state.activeAppUrl,
                       }"
@@ -376,10 +383,82 @@ onMounted(() => {
         class="absolute z-[1000] bg-white w-full duration-300 transition-opacity ease-in-out"
       >
         <nav class="flex flex-col font-semibold" v-if="state.mobileMenuOpen">
-          <a class="nav-item-mobile" href="/datahub/">{{ t('catalogue') }}</a>
-          <a class="nav-item-mobile" href="/mapstore/">{{ t('viewer') }}</a>
-          <a class="nav-item-mobile" href="/mapstore/#/home">{{ t('maps') }}</a>
-          <a class="nav-item-mobile" href="/geoserver/">{{ t('services') }}</a>
+          <template v-for="(item, index) in state.menu" :key="index">
+            <template v-if="!item.type && checkCondition(item)">
+              <a
+                :href="(item as Link).url"
+                class="nav-item-mobile"
+                @click="state.activeAppUrl = (item as Link).activeAppUrl"
+                :class="{
+                  active: (item as Link).activeAppUrl == state.activeAppUrl,
+                }"
+              >
+                <div class="flex items-center">
+                  <span class="ml-1 first-letter:capitalize">
+                    {{
+                      (item as Link).i18n
+                        ? t((item as Link).i18n)
+                        : (item as Link).label
+                    }}
+                  </span>
+                </div>
+              </a>
+            </template>
+            <template
+              v-else-if="item.type === 'dropdown' && checkCondition(item)"
+            >
+              <div class="group inline-block relative">
+                <button
+                  class="nav-item-mobile after:hover:scale-x-0 flex items-center"
+                  @click="toggleDropdown(index)"
+                >
+                  <span class="lg:mr-2 md:mr-1 first-letter:capitalize">{{
+                    (item as Dropdown).i18n
+                      ? t((item as Dropdown).i18n)
+                      : (item as Dropdown).label
+                  }}</span>
+                  <ChevronDownIcon
+                    class="w-4 h-4"
+                    stroke-width="4"
+                  ></ChevronDownIcon>
+                </button>
+                <ul
+                  class="absolute border rounded w-full admin-dropdown z-[1002] bg-white"
+                  v-show="state.activeDropdown === index"
+                >
+                  <template
+                    v-for="(subitem, subindex) in (item as Dropdown).items"
+                    :key="subindex"
+                  >
+                    <li
+                      v-if="checkCondition(subitem)"
+                      @click="
+                        state.activeAppUrl = (subitem as Link).activeAppUrl
+                      "
+                      :class="{
+                        active: (subitem as Link).activeAppUrl == state.activeAppUrl,
+                      }"
+                    >
+                      <a
+                        :href="replaceUrlsVariables(subitem.url)"
+                        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>
+              </div>
+            </template>
+          </template>
           <a v-if="!isAnonymous" class="nav-item-mobile" href="/import/">{{
             t('datafeeder')
           }}</a>
@@ -405,6 +484,8 @@ onMounted(() => {
 @layer components {
   .nav-item-mobile {
     @apply text-xl block text-center py-3 w-full border-b border-b-slate-300 first-letter:capitalize;
+    display: flex;
+    justify-content: center;
   }
 
   .nav-item {