Por defecto #
Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón. Tiene un título que enlaza a la página de inicio. Puedes usar con javascript la función global activateItemHeaderNavigation(elementMenu, idItemSeleccionado)
para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe activateItemHeaderNavigation('header-nav-item', 'page-catalogo')
para desactivar el item actual y activar el tercer item del header de la página.
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Header Advanced", versión: 12.0.1, del sistema de diseño DESY
Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.
Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- header-advanced -->
<header>
<div>
<nav aria-labelledby="skip-link">
<!-- skip-link -->
<a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline" id="skip-link">Saltar al contenido principal</a>
<!-- /skip-link -->
</nav>
<!-- header-mini -->
<div>
<div>
<div class="bg-white border-b border-neutral-base">
<div class="flex items-center px-base container mx-auto">
<a href="https://www.aragon.es/" class="inline-block pt-2.5 pb-2 text-black focus:outline-none focus:shadow-outline-black">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="117" height="26" class="inline-block fill-current" role="img" aria-label="Gobierno de Aragón. Ir a aragon.es">
<defs>
<clipPath id="b-logo-expanded">
<path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z" />
</clipPath>
<clipPath id="a-logo-expanded">
<path d="M0 0h144v32H0z" />
</clipPath>
</defs>
<g clip-path="url(#a-logo-expanded)">
<path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z" />
<g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)">
<g fill="#dd171b" fill-rule="evenodd">
<path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z" />
</g>
</g>
<path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd" />
</g>
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- /header-mini -->
<div class="bg-heading-base bg-no-repeat bg-cover lg:bg-auto bg-center lg:bg-right bg-general lg:bg-general-lg text-white">
<div class="container mx-auto px-base">
<div class="lg:flex lg:flex-wrap py-base lg:py-lg">
<div class="flex lg:flex-1">
<div>
<h2 class=" text-2xl lg:text-3xl font-bold"><a href="/" class="hover:underline focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base focus:text-black" title="Ir a la página de inicio">Titulo de cabecera</a></h2>
</div>
</div>
</div>
</div>
</div>
<div class="bg-neutral-lighter border-b border-neutral-base">
<div class="container mx-auto px-base">
<div class="flex items-center justify-between min-h-14">
<div class="flex flex-wrap items-center">
<div class="-ml-base">
<!-- header__navigation -->
<nav id="header-nav-item" data-module="c-header-navigation" class="hidden lg:block" aria-label="Menú principal">
<ul class="ml-sm flex flex-wrap items-baseline">
<li>
<a id="header-nav-item-1" href="#1" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Inicio</a>
</li>
<li>
<a id="header-nav-item-2" href="#2" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base" aria-current="page"><strong class="font-bold">Navigation item 2</strong></a>
</li>
<li>
<a id="header-nav-item-3" href="#3" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 3</a>
</li>
<li>
<a id="header-nav-item-4" href="#4" class="max-w-40 lg:max-w-xs px-3 py-4 text-sm text-black hover:underline truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base">Navigation item 4</a>
</li>
</ul>
</nav>
<!-- /header__navigation -->
</div>
</div>
<!-- header__offcanvasButton -->
<div class="-mr-2 flex lg:hidden">
<button id="header-offcanvas-button"
type="button"
onclick="openDialog('header-offcanvas', this)"
tabindex="0"
class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">
<span id="header-offcanvas-button-text" class="inline-block align-middle text-right">Menú</span> <svg role="img" aria-label="Cerrado" class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg>
</button>
</div>
<!-- /header__offcanvasButton -->
</div>
</div>
<!-- header__offcanvas -->
<div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
<div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
<div class="h-full overflow-auto relative bg-white z-10">
<div class="text-right p-sm">
<button
onclick="closeDialog(this)"
id="header-offcanvas-button-close"
type="button"
class="c-button c-button--sm c-button--transparent m-sm">Cerrar menu <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true">
<path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z" />
</svg></button>
</div>
<!-- exampleOffcanvas -->
<nav class="w-full p-2" aria-label="Menú móvil">
<h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
<!-- nav -->
<ul data-module="c-nav" class="text-sm" aria-label="Lista de páginas">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page" id="nav-mobile-pages-1">
<strong class="font-bold">Inicio</strong>
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-2">
Expedientes
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
Bandejas
</a>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
</ul>
<!-- /nav -->
<h3 class="p-base text-base font-bold">Usuario/a: Marta Pérez</h3>
<!-- nav -->
<ul data-module="c-nav" class="text-sm" aria-label="Lista de acciones de usuario">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-user-1">
Perfil
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-user-2">
Cerrar sesión
</a>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
</ul>
<!-- /nav -->
<!-- details -->
<details class=" px-base">
<summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
<span class="c-link text-sm">
Cambiar de aplicación
</span>
</summary>
<div class="py-sm">
<div>
<!-- nav -->
<ul data-module="c-nav" class="text-sm" aria-label="Lista de aplicaciones">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page" id="nav-mobile-apps-1">
<strong class="font-bold">Gestor de expedientes</strong>
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-apps-2">
Catálogo de servicios
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-apps-3">
Bandeja de entrada
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-apps-4">
Sistema de comprobación y verificación de documentos por CSV
</a>
</li>
</ul>
<!-- /nav -->
<!-- /exampleOffcanvas -->
</div>
</div>
</details>
<!-- /details -->
</nav>
</div>
</div>
</div>
<!-- /header__offcanvas -->
</div>
</div>
</header>
<!-- /header-advanced -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Header Advanced", versión: 12.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
{% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
{% call componentHeaderAdvanced ("{\"title\":{\"homepageUrl\":\"/\",\"text\":\"Titulo de cabecera\"},\"navigation\":{\"items\":[{\"href\":\"#1\",\"text\":\"Inicio\"},{\"href\":\"#2\",\"text\":\"Navigation item 2\",\"active\":true},{\"href\":\"#3\",\"text\":\"Navigation item 3\"},{\"href\":\"#4\",\"text\":\"Navigation item 4\"}]},\"offcanvas\":{\"text\":\"Menú\",\"textClose\":\"Cerrar menu\",\"labelledId\":\"offcanvas-title\"}}") %}
<!-- exampleOffcanvas -->
<nav class="w-full p-2" aria-label="Menú móvil">
<h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
<!-- nav -->
<ul data-module="c-nav" class="text-sm" aria-label="Lista de páginas">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page" id="nav-mobile-pages-1">
<strong class="font-bold">Inicio</strong>
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-2">
Expedientes
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
Bandejas
</a>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
</ul>
<!-- /nav -->
<h3 class="p-base text-base font-bold">Usuario/a: Marta Pérez</h3>
<!-- nav -->
<ul data-module="c-nav" class="text-sm" aria-label="Lista de acciones de usuario">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-user-1">
Perfil
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-user-2">
Cerrar sesión
</a>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
</ul>
<!-- /nav -->
<!-- details -->
<details class=" px-base">
<summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
<span class="c-link text-sm">
Cambiar de aplicación
</span>
</summary>
<div class="py-sm">
<div>
<!-- nav -->
<ul data-module="c-nav" class="text-sm" aria-label="Lista de aplicaciones">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page" id="nav-mobile-apps-1">
<strong class="font-bold">Gestor de expedientes</strong>
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-apps-2">
Catálogo de servicios
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-apps-3">
Bandeja de entrada
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-apps-4">
Sistema de comprobación y verificación de documentos por CSV
</a>
</li>
</ul>
<!-- /nav -->
<!-- /exampleOffcanvas -->
</div>
</div>
</details>
<!-- /details --> </nav>
{% endcall %}
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/header-advanced/_macro.header-advanced.njk" import componentHeaderAdvanced %}
{% call componentHeaderAdvanced({
"title": {
"homepageUrl": "/",
"text": "Titulo de cabecera"
},
"navigation": {
"items": [
{
"href": "#1",
"text": "Inicio"
},
{
"href": "#2",
"text": "Navigation item 2",
"active": true
},
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
}
]
},
"offcanvas": {
"text": "Menú",
"textClose": "Cerrar menu",
"labelledId": "offcanvas-title"
}
}) %}
<!-- exampleOffcanvas -->
<nav class="w-full p-2" aria-label="Menú móvil">
<h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
<!-- nav -->
<ul data-module="c-nav" class="text-sm" aria-label="Lista de páginas">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page" id="nav-mobile-pages-1">
<strong class="font-bold">Inicio</strong>
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-2">
Expedientes
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-pages-3">
Bandejas
</a>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
</ul>
<!-- /nav -->
<h3 class="p-base text-base font-bold">Usuario/a: Marta Pérez</h3>
<!-- nav -->
<ul data-module="c-nav" class="text-sm" aria-label="Lista de acciones de usuario">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-user-1">
Perfil
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-user-2">
Cerrar sesión
</a>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
</ul>
<!-- /nav -->
<!-- details -->
<details class=" px-base">
<summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
<span class="c-link text-sm">
Cambiar de aplicación
</span>
</summary>
<div class="py-sm">
<div>
<!-- nav -->
<ul data-module="c-nav" class="text-sm" aria-label="Lista de aplicaciones">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-current="page" id="nav-mobile-apps-1">
<strong class="font-bold">Gestor de expedientes</strong>
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-apps-2">
Catálogo de servicios
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-apps-3">
Bandeja de entrada
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="nav-mobile-apps-4">
Sistema de comprobación y verificación de documentos por CSV
</a>
</li>
</ul>
<!-- /nav -->
<!-- /exampleOffcanvas -->
</div>
</div>
</details>
<!-- /details --> </nav>
{% endcall %}