desy-html 8.7.0 → 8.8.0

package/docs/index.html

@@ -38,6 +38,13 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.8.8.0</h3>
+  <ul class="text-sm">
+    <li>Added global function to select items in Listbox.</li>
+    <li>Added global function to open items in Accordion and Accordion history.</li>
+    <li>Fixed a bug in Tabs.</li>
+    <li>Improvements in Docs. Added menu navigation in header advanced in template example.</li>
+  </ul>
   <h3>v.8.7.0</h3>
   <ul class="text-sm">
     <li>Added global function to select items and subitems in Menubar and Menu horizontal.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "8.7.0",
+  "version": "8.8.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/js/aria/accordion.js

@@ -92,7 +92,6 @@ export function accordion(aria) {
           // If toggling is not allowed, set disabled state on trigger
           if (!allowToggle) {
             target.setAttribute('aria-disabled', 'true');
-            //target.querySelector('span').innerText = '';
             target.querySelector('.c-accordion__show').classList.add('hidden');
             target.querySelector('.c-accordion__hide').classList.add('hidden');
           }
@@ -178,11 +177,56 @@ export function accordion(aria) {
       // If an expanded/ active accordion is found, disable
       if (expanded) {
         expanded.setAttribute('aria-disabled', 'true');
-        //expanded.querySelector('span').innerText = '';
         expanded.querySelector('.c-accordion__show').classList.add('hidden');
         expanded.querySelector('.c-accordion__hide').classList.add('hidden');
       }
     }
 
+    window.activateItemAccordion = function (menuId, activeItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+        if (activeItem) {
+          activateElement(menuId, activeItemId);
+          return [menu, activeItem]
+        } else {
+          console.log('There is no element with this id in the menu.');
+          return null;
+        }
+      } else {
+        console.log('There is no menu with this id in the document.');
+        return null;
+      }
+    };
+
+    function activateElement(menu, activeItem) {
+      const getAccordion = document.querySelector(`#${menu}`);
+      const allowMultiple = getAccordion.hasAttribute('data-allow-multiple');
+      const allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
+      const selectAllTriggers = document.querySelectorAll(`#${menu} .c-accordion__trigger`);
+      [...selectAllTriggers].forEach((trigger) => {
+        const getPanel = trigger.parentElement.parentElement.querySelector('.c-accordion__panel');
+        const getShowMessage = trigger.querySelector('.c-accordion__show');
+        const getHideMessage = trigger.querySelector('.c-accordion__hide');
+        if (isActive(trigger)) {
+          trigger.setAttribute('aria-expanded', 'true');
+          getPanel.removeAttribute('hidden');
+          getShowMessage.classList.add('hidden');
+          getHideMessage.classList.remove('hidden');
+        } else {
+          trigger.setAttribute('aria-expanded', 'false');
+          getPanel.setAttribute('hidden', 'true');
+          getShowMessage.classList.remove('hidden');
+          getHideMessage.classList.add('hidden');
+        }
+      });
+
+      function isActive(element){
+        const { id } = element;
+        return typeof activeItem === "object" && allowToggle
+          ? activeItem.includes(id)
+          : id === activeItem;
+      }
+    }
   });
 }

package/src/js/aria/listbox.js

@@ -279,10 +279,6 @@ export function listbox(aria) {
         'aria-selected',
         element.getAttribute('aria-selected') === 'true' ? 'false' : 'true'
       );
-      element.setAttribute(
-        'aria-checked',
-        element.getAttribute('aria-checked') === 'true' ? 'false' : 'true'
-      );
 
       if (this.moveButton) {
         if (this.listboxNode.querySelector('[aria-selected="true"]')) {
@@ -308,7 +304,6 @@ export function listbox(aria) {
     }
     if (!this.multiselectable) {
       element.removeAttribute('aria-selected');
-      element.removeAttribute('aria-checked');
     }
     aria.Utils.removeClass(element, 'focused');
   };
@@ -324,7 +319,6 @@ export function listbox(aria) {
     this.defocusItem(document.getElementById(this.activeDescendant));
     if (!this.multiselectable) {
       element.setAttribute('aria-selected', 'true');
-      element.setAttribute('aria-checked', 'true');
     }
     aria.Utils.addClass(element, 'focused');
     this.listboxNode.setAttribute('aria-activedescendant', element.id);
@@ -559,5 +553,72 @@ export function listbox(aria) {
     this.handleFocusChange = focusChangeHandler;
   };
 
+  function activateElement(menuId, activeItem) {
+    const getListBox = document.querySelector(`#${menuId}`);
+    const getTippy = document.querySelector(`#${menuId} [data-tippy-root]`);
+    const getTippyBox = document.querySelector(`#${menuId} .tippy-box`);
+    const getListBoxUl = document.querySelector(`#${menuId} [data-module="c-listbox-list"]`);
+    const getListBoxButton = document.querySelector(`#${menuId} .c-listbox`);
+    const getListBoxButtonText = document.querySelector(`#${menuId} .c-listbox span`);
+    const getMultiSelectable = getListBoxButton.getAttribute('aria-labelledby');
+    const allowMultiple = getMultiSelectable.includes('is-multiselectable-label');
+    const selectAllElements = document.querySelectorAll(`#${menuId} li`);
+
+    getListBoxButton.click();
+    getTippy.style.visibility = 'visible';
+    getTippyBox.setAttribute('data-state','visible');
+    getListBoxButton._tippy.popper._tippy.show();
+    getListBoxUl.focus();
+
+    [...selectAllElements].forEach((element) => {
+      if (isActive(element, activeItem)) {
+        element.setAttribute('aria-selected', 'true');
+        if(!allowMultiple && getListBoxButton.dataset.change){
+          getListBoxButtonText.innerHTML = element.textContent;
+        }
+      } else {
+        element.setAttribute('aria-selected', 'false');
+      }
+    });
+
+    getTippy.style.visibility = 'hidden';
+    getTippyBox.setAttribute('data-state','hidden');
+
+    getListBoxUl.dispatchEvent(new KeyboardEvent("keydown", {
+      key: "Escape",
+      keyCode: 27,
+      code: "Escape",
+      which: 27
+    }));
+
+    getListBoxButton._tippy.popper._tippy.hide();
+    getListBoxButton.classList.remove('open');
+
+    function isActive(element, activeItem) {
+      const { id } = element;
+      return typeof activeItem === "object" && allowMultiple
+        ? activeItem.includes(id)
+        : id === activeItem;
+    }
+  };
+
+  window.activateItemListBox = function (menuId, activeItemId) {
+    const menu = document.getElementById(menuId);
+    if (menu) {
+      const getListBoxButton = document.querySelector(`#${menuId} .c-listbox`);
+      getListBoxButton.click();
+      const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+      if (activeItem) {
+        activateElement(menuId, activeItemId);
+        return [menu, activeItem]
+      } else {
+        console.log('There is no element with this id in the menu.');
+        return null;
+      }
+    } else {
+      console.log('There is no menu with this id in the document.');
+      return null;
+    }
+  };
   return aria;
-}
+}

package/src/js/aria/tabs.js

@@ -281,13 +281,18 @@ export function tabs(aria) {
       //Add active class to current tab
       element.classList.add("c-tabs__link--is-active");
       element.setAttribute('role', 'tab');
-      element.innerHTML = `<strong class="font-bold">${element.innerHTML}</strong>`;
+      if(element.querySelector('strong') === null) {
+        element.innerHTML = `<strong class="font-bold">${element.innerHTML}</strong>` ;
+      }
     }
 
     function removeActiveClass(element) {
       element.classList.remove("c-tabs__link--is-active");
       element.removeAttribute('role');
-      element.innerHTML = element.innerHTML;
+      if(element.querySelector('strong')) {
+        const replaceStrong = element.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
+        element.innerHTML = `${replaceStrong}`;
+      }
     }
 
     window.activateItemTabs = function (menuId, tabItemId) {
@@ -296,16 +301,13 @@ export function tabs(aria) {
         const activeItemTab = document.querySelector(`#${menuId} #${tabItemId}`);
         const activeItemPanel = document.querySelector(`[aria-labelledby="${tabItemId}"]`);
         if (activeItemTab) {
-          document.querySelectorAll('.c-tabs__link').forEach((tab) => {
-            tab.classList.remove("c-tabs__link--is-active");
-            tab.innerHTML = tab.innerHTML;
+          document.querySelectorAll(`#${menuId} .c-tabs__link`).forEach((tab) => {
+            removeActiveClass(tab)
           })
 
-          activeItemTab.classList.add("c-tabs__link--is-active");
-          activeItemTab.setAttribute('role', 'tab');
-          activeItemTab.innerHTML = `<strong class="font-bold">${activeItemTab.innerHTML}</strong>`;
+          addActiveClass(activeItemTab)
 
-          document.querySelectorAll('.c-tabs__panel').forEach((panel) => {
+          document.querySelectorAll(`#${menuId} .c-tabs__panel`).forEach((panel) => {
             panel.setAttribute('hidden', 'hidden')
           })
 

package/src/js/desy-html.js

@@ -126,17 +126,36 @@ export function dropdownComponent(aria) {
 export function listboxComponent(aria) {
   listbox(aria);
   const modules = document.querySelectorAll('[data-module]');
+  let activeButton;
   for (const item in modules) if (modules.hasOwnProperty(item)) {
     const moduleValue = modules[item].getAttribute('data-module');
 
-
     if (moduleValue == 'c-listbox'){
       const buttonListbox = modules[item].querySelector('[data-module = "c-listbox-button"]');
       const tooltip = modules[item].querySelector('[data-module = "c-listbox-tooltip"]');
       const list = modules[item].querySelector('[data-module = "c-listbox-list"]');
-
       if(buttonListbox && tooltip) {
         const listbox = new aria.Listbox(list);
+        const hideOnClick = {
+          name: 'hideOnClick',
+          defaultValue: true,
+          fn(instance) {
+            return {
+              onCreate() {
+                buttonListbox.addEventListener("click", (event) => {
+                  if(!buttonListbox.classList.contains('open')){
+                    instance.show();
+                    list.focus()
+                    buttonListbox.classList.add('open');
+                  } else {
+                    list.blur();
+                    instance.hide();
+                  }
+                });
+              },
+            };
+          },
+        };
         const hideOnPopperBlur = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
           name: 'hideOnPopperBlur',
@@ -185,34 +204,40 @@ export function listboxComponent(aria) {
           inlinePositioning: true,
           content: tooltip,
           allowHTML: true, // Make sure you are sanitizing any user data if rendering HTML to prevent XSS attacks.
-          trigger: 'click',
-          hideOnClick: true,
+          trigger: 'manual',
           interactive: true,
           arrow: false,
           offset: [0, -10],
           theme: '',
-          plugins: [hideOnEscOrEnter,hideOnPopperBlur],
+          plugins: [hideOnEscOrEnter,hideOnPopperBlur, hideOnClick],
           role: false,
           aria: {
             content: 'auto'
           },
-          onShown(instance) {
-            list.focus();
+          onMount(instance) {
             if (list.querySelectorAll('[aria-selected="true"]')[0]) {
               listbox.focusItem(list.querySelectorAll('[aria-selected="true"]')[0]);
             }
           },
-          onHidden(instance) {
-            buttonListbox.focus();
+          onHidden(instance){
+            buttonListbox.classList.remove('open');
           }
         });
 
         listbox.setHandleFocusChange(function(evt){
-          if ((!list.hasAttribute('aria-multiselectable'))&&(buttonListbox.getAttribute('data-change')=='change')){
+          if ((!list.hasAttribute('aria-multiselectable')) && (buttonListbox.getAttribute('data-change')=='change')){
             buttonListbox.firstElementChild.innerHTML = evt.innerHTML;
           }
         });
 
+        const getMultiSelectable = buttonListbox.getAttribute('aria-labelledby');
+        const allowMultiple = getMultiSelectable.includes('is-multiselectable-label');
+
+        if(!allowMultiple) {
+          list.addEventListener("click", (event) => {
+            buttonListbox.click();
+          })
+        }
       }
     }
   }

package/src/templates/components/accordion/_examples.accordion.njk

@@ -70,7 +70,7 @@
   },
   {
     "name": "Con un item abierto",
-    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion", "with-one-item-opened-example-1-title")</code> para cerrar el item actual y abrir el primer item de este ejemplo.',
     "data": {
       "idPrefix": "with-one-item-opened-example",
       "headingLevel": 3,
@@ -89,12 +89,15 @@
           "headerText": "Item de acordeón 3",
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion"
+      }
     }
   },
   {
     "name": "Con 2 items abiertos",
-    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-multiple", ["with-2-items-opened-example-2-title", "with-2-items-opened-example-3-title"])</code>.',
     "data": {
       "idPrefix": "with-2-items-opened-example",
       "headingLevel": 3,
@@ -114,7 +117,10 @@
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "open": true
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion-multiple"
+      }
     }
   },
   {

package/src/templates/components/accordion-history/_examples.accordion-history.njk

@@ -106,7 +106,7 @@
   },
   {
     "name": "Con un item abierto",
-    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-history", "with-one-item-opened-example-1-title")</code> para cerrar el item actual y abrir el primer item de este ejemplo.',
     "data": {
       "idPrefix": "with-one-item-opened-example",
       "headingLevel": 3,
@@ -125,12 +125,15 @@
           "headerText": "Item de acordeón 3",
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion-history"
+      }
     }
   },
   {
     "name": "Con 2 items abiertos",
-    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>.',
+    "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-history-multiple", ["with-2-items-opened-example-2-title", "with-2-items-opened-example-3-title"])</code>.',
     "data": {
       "idPrefix": "with-2-items-opened-example",
       "headingLevel": 3,
@@ -150,7 +153,10 @@
           "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
           "open": true
         }
-      ]
+      ],
+      "attributes": {
+        "id": "accordion-history-multiple"
+      }
     }
   },
   {
@@ -380,4 +386,4 @@
       ]
     }
   }
-] %}
+] %}

package/src/templates/components/listbox/_examples.listbox.njk

@@ -444,6 +444,7 @@
     },
     {
       "name": "con item activo",
+      "description": 'Podemos seleccionar inicialmente un item si le añadimos el parámetro <code>"active": true</code>. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox("listbox", "with-active-item-listbox-item-2")</code> para seleccionar el segundo item de este ejemplo.',
       "data": {
         "id": "with-active-item",
         "text": "con item activo",
@@ -472,12 +473,15 @@
             "href": "#",
             "text": "Opción 5"
           }
-        ]
+        ],
+        "attributes": {
+          "id": "listbox"
+        }
       }
     },
     {
       "name": "Permite selecciones múltiples",
-      "description": 'Usa el parámetro <code>"isMultiselectable": true</code>.',
+      "description": 'Usa el parámetro <code>"isMultiselectable": true</code>. En este caso al seleccionar un item el elemento no se cerrará. También puedes usar con javascript la función global <code>activateItemListBox(elementMenu, activeItemId)</code> para seleccionar varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemListBox("listbox-multiple", ["is-multiselectable-listbox-item-2", "is-multiselectable-listbox-item-3"])</code> para seleccionar el segundo y el tercer item de este ejemplo.',
       "data": {
         "id": "is-multiselectable",
         "isMultiselectable": true,
@@ -506,7 +510,10 @@
             "href": "#",
             "text": "Opción 5"
           }
-        ]
+        ],
+        "attributes": {
+          "id": "listbox-multiple"
+        }
       }
     },
     {
@@ -609,4 +616,4 @@
         ]
       }
     }
-] %}
+] %}

package/src/templates/components/listbox/_template.listbox.njk

@@ -66,7 +66,7 @@ treat it as an interactive element - without this it will be
 {% endset -%}
 
 <!-- listbox -->
-<div data-module="c-listbox" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}">
+<div data-module="c-listbox" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% if params.label  %}
   <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
     {% if params.label.html %}
@@ -87,4 +87,4 @@ treat it as an interactive element - without this it will be
     </ul>
   </div>
 </div>
-<!-- /listbox -->
+<!-- /listbox -->

package/src/templates/components/tabs/_examples.tabs.njk

@@ -366,7 +366,10 @@
             "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
           }
         }
-      ]
+      ],
+      "attributes": {
+        "id": "tabs-active-icons"
+      }
     }
   },
   {

package/src/templates/pages/_template.with-header-advanced.njk

@@ -1,6 +1,8 @@
 {% include "pages/_page.head.njk" %}
 
 {% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
+{% from "components/menu-vertical/_macro.menu-vertical.njk" import componentMenuVertical %}
+{% from "components/menu-navigation/_macro.menu-navigation.njk" import componentMenuNavigation %}
 {% from "components/nav/_macro.nav.njk" import componentNav %}
 {% from "components/details/_macro.details.njk" import componentDetails %}
 
@@ -13,6 +15,132 @@
   <!-- /pageSpinnerBlock -->
   <!-- headerBlock -->
   {% block headerBlock %}
+    {% set menuCustom %}
+      <div class="hidden lg:flex lg:flex-wrap lg:flex-1 lg:gap-base">
+        {{ componentMenuNavigation({
+          "idPrefix": "header-custom-nav",
+          "classes": "bg-neutral-lighter c-menu-navigation--last-right w-full",
+          "items": [
+            {
+              "text": "Inicio",
+              "active": true,
+              "id": "header-custom-nav-item-0",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "href": "#"
+            },
+            {
+              "text": "Gestiones",
+              "id": "header-custom-nav-item-1",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "header-custom-nav-item-1"
+                }
+              }
+            },
+            {
+              "text": "Centros sanitarios",
+              "id": "header-custom-nav-item-2",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2",
+                    "active": true
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "header-custom-nav-item-2"
+                }
+              }
+            },
+            {
+              "text": "Cuida tu salud",
+              "id": "header-custom-nav-item-3",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "header-custom-nav-item-3"
+                }
+              }
+            },
+            {
+              "text": "Participación",
+              "id": "header-custom-nav-item-4",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "href": "#"
+            },
+            {
+              "text": "Contacto",
+              "id": "header-custom-nav-item-5",
+              "classes": "c-menu-navigation__button--header -mr-base",
+              "href": "#"
+            },
+            {
+              "text": "Hola, Marta",
+              "id": "header-custom-nav-item-6",
+              "classes": "c-menu-navigation__button--header",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Perfil"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Cerrar sesión"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "header-custom-nav-item-6"
+                }
+              }
+            }
+          ],
+          "attributes": {
+            "aria-label": "Menu de navegación principal",
+            "id": "mi-menu-header"
+          }
+        }) }}
+      </div>
+    {% endset %}
     {% call componentHeaderAdvanced({
       "skipLink": {
         "href": "#content"
@@ -21,35 +149,7 @@
         "homepageUrl": "index.html",
         "text": "Portal de Salud"
       },
-      "navigation": {
-        "items": [
-          {
-            "href": "#",
-            "text": "Inicio",
-            "active": true
-          },
-          {
-            "href": "#",
-            "text": "Gestiones"
-          },
-          {
-            "href": "#",
-            "text": "Centros sanitarios"
-          },
-          {
-            "href": "#",
-            "text": "Cuida tu salud"
-          },
-          {
-            "href": "#",
-            "text": "Participación"
-          },
-          {
-            "href": "#",
-            "text": "Contacto"
-          }
-        ]
-      },
+      "customNavigationHtml": menuCustom | safe,
       "offcanvas": {
         "text": "Menú",
         "textClose": "Cerrar menú"
@@ -59,39 +159,120 @@
       <nav class="w-full p-2" aria-labelledby="menu-movil-title">
         <h2 id="menu-movil-title" class="sr-only">Menú principal</h2>
         <h3 class="p-base text-base font-bold">Portal de Salud</h3>
-        {{ componentNav({
-          "idPrefix": "nav-mobile-pages",
-          "hasNav": false,
+        {{ componentMenuVertical({
+          "idPrefix": "menu-mobile",
           "items": [
             {
               "href": "#",
               "text": "Inicio",
+              "id": "menu-mobile-item-0",
               "active": true
             },
             {
               "href": "#",
-              "text": "Gestiones"
+              "text": "Gestiones",
+              "id": "menu-mobile-item-1",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "menu-mobile-item-1"
+                }
+              }
             },
             {
               "href": "#",
-              "text": "Centros sanitarios"
+              "text": "Centros sanitarios",
+              "id": "menu-mobile-item-2",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "menu-mobile-item-2"
+                }
+              }
             },
             {
               "href": "#",
-              "text": "Cuida tu salud"
+              "text": "Cuida tu salud",
+              "id": "menu-mobile-item-3",
+              "sub": {
+                "items": [
+                  {
+                    "href": "#",
+                    "text": "Subitem 1"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 2"
+                  },
+                  {
+                    "href": "#",
+                    "text": "Subitem 3"
+                  }
+                ],
+                "attributes": {
+                  "aria-labelledby": "menu-mobile-item-3"
+                }
+              }
             },
             {
               "href": "#",
-              "text": "Participación"
+              "text": "Participación",
+              "id": "menu-mobile-item-4"
             },
             {
               "href": "#",
-              "text": "Contacto"
+              "text": "Contacto",
+              "id": "menu-mobile-item-5"
             }
           ],
           "attributes": {
             "aria-label": "Lista de páginas"
           }
+        }) }}
+        <hr class="mt-lg mb-base border-b border-neutral-base">
+        <h3 class="p-base text-base font-bold">Usuario/a: Ana Pérez</h3>
+        {{ componentNav({
+          "idPrefix": "nav-mobile-user",
+          "hasNav": false,
+          "items": [
+            {
+              "href": "#",
+              "text": "Perfil"
+            },
+            {
+              "href": "#",
+              "text": "Cerrar sesión"
+            }
+          ],
+          "attributes": {
+            "aria-label": "Lista de acciones de usuario"
+          }
         })  }}
       </nav>
     {% endcall %}