<ui-ingress>
The ingress contains the header links. See the ingress at the top of this page.
<template
is="ui-ingress"
logo="object"
links="array"
searchAction="string"
searchPlaceholder="string"
currentLang="object"
languages="array"
menu="array"
menuText="string"
burgerText="string"
search="string"
>
<div class="ui-ingress">
<div class="ui-ingress-desktop">
<div class="ui-ingress-logo" if="props.logo?.asset?.url">
<a href="/">
<img src="{{props.logo.asset.url |> esc}}" alt="Logo" />
</a>
</div>
<nav if="props.links?.length" class="ui-ingress-nav">
<ul>
<li map="link of props.links">
<button
class="ui-ingress-nav-toggler"
fx-toggle="open"
if="link.submenu?.length"
>
<span>{{link.label |> esc}}</span>
<img src="/ui/img/chevron.svg" />
</button>
<ul class="ui-ingress-submenu toggles" if="link.submenu?.length">
<li map="item of link.submenu">
<a
href="{{item.route ?? '' |> esc}}"
if="item?.route && item?.label"
>
<span>{{item.label |> esc}}</span>
</a>
</li>
</ul>
<a href="{{link.href ?? '' |> esc}}" else>
<span>{{link.label |> esc}}</span>
</a>
</li>
</ul>
</nav>
<div class="ui-ingress-search" if="props.searchAction">
<form action="{{props.searchAction ?? '' |> esc}}">
<button>
<img src="/ui/img/search.svg" alt="search" width="24" height="24" />
</button>
<input
type="search"
name="s"
placeholder="{{props.searchPlaceholder ?? '' |> esc}}"
/>
</form>
</div>
<div
class="ui-ingress-lang"
if="typeof props.currentLang === 'object' && Array.isArray(props.languages) && props.languages.length > 1"
>
<div class="ui-ingress-lang-row" if="props.languages.length === 2">
<ul>
<li
class="{{lang.code === props.currentLang.code ? 'current' : ''}}"
map="lang of props.languages"
>
<a
href="{{lang.href ?? '' |> esc}}"
if="typeof lang.label === 'string'"
>
<img
src="{{lang.icon ?? '' |> esc}}"
if="typeof lang.icon === 'string'"
/>
<span if="typeof lang.label === 'string'">
{{lang.label ?? '' |> esc}}
</span>
</a>
</li>
</ul>
</div>
<div class="ui-ingress-lang-dropdown" if="props.languages.length > 2">
<a fx-toggle="open">
<img
src="{{props.currentLang.icon |> esc}}"
if="props.currentLang.icon"
/>
<span if="props.currentLang.legend">
{{props.currentLang.legend |> esc}}
</span>
</a>
<ul class="toggles">
<li
map="lang of props.languages"
if="lang.code !== props.currentLang.code"
>
<a
href="{{lang.href ?? '' |> esc}}"
if="typeof lang.label === 'string'"
>
<img
src="{{lang.icon ?? '' |> esc}}"
if="typeof lang.icon === 'string'"
/>
<span>{{lang.label ?? '' |> esc}}</span>
</a>
</li>
</ul>
</div>
</div>
<div
class="ui-ingress-menu"
if="Array.isArray(props.menu) && props.menu.length"
>
<a class="ui-ingress-menu-toggler" fx-toggle="open">
<span>{{props.menuText ?? '' |> esc}}</span>
<img src="/ui/img/chevron.svg" />
</a>
<ul class="toggles">
<li
map="item of props.menu"
if="Array.isArray(props.menu) && props.menu.length"
>
<img
src="{{item.icon ?? '' |> esc}}"
if="typeof item.icon === 'string'"
/>
<a
href="{{item.href ?? '' |> esc}}"
if="typeof item.label === 'string'"
>
{{item.label |> esc}}
</a>
</li>
</ul>
</div>
</div>
<div class="ui-ingress-mobile">
<div if="props.logo?.asset?.url" class="ui-ingress-mobile-logo">
<a href="/">
<img src="{{props.logo.asset.url |> esc}}" alt="Logo" />
</a>
</div>
<button
if="props.searchAction"
class="ui-ingress-mobile-search"
onclick="(function(el){
el.closest('.ui-ingress-mobile').classList.toggle('searching')
})(this)"
>
<img src="/ui/img/search.svg" alt="search" width="32" height="32" />
<span>{{props.search ?? '' |> esc}}</span>
</button>
<div
class="ui-ingress-mobile-lang-dropdown"
if="typeof props.currentLang === 'object' && Array.isArray(props.languages) && props.languages.length > 2"
>
<a fx-toggle="open">
<img
src="{{props.currentLang.icon |> esc}}"
if="props.currentLang.icon"
/>
<span if="props.currentLang.legend">
{{props.currentLang.legend |> esc}}
</span>
</a>
<ul class="toggles">
<li
map="lang of props.languages"
if="lang.code !== props.currentLang.code"
>
<a
href="{{lang.href ?? '' |> esc}}"
if="typeof lang.label === 'string'"
>
<img
src="{{lang.icon ?? '' |> esc}}"
if="typeof lang.icon === 'string'"
/>
<span>{{lang.label ?? '' |> esc}}</span>
</a>
</li>
</ul>
</div>
<ui-burger
text="{{props.burgerText}}"
click="(function(el) {
el.closest('.ui-ingress-mobile').classList.toggle('open')
document.body.style.overflow = 'hidden'
})(this)"
></ui-burger>
<div class="ui-ingress-mobile-overlay">
<div class="ui-ingress-mobile-top">
<div class="ui-ingress-overlay-logo" if="props.logo?.asset?.url">
<a href="/">
<img src="{{props.logo.asset.url |> esc}}" alt="Logo" />
</a>
</div>
<div class="ui-ingress-overlay-close">
<a
onclick="(function(el) {
el.closest('.ui-ingress-mobile').classList.toggle('open')
document.body.style.overflow = ''
})(this)"
>
×
</a>
</div>
</div>
<div class="ui-ingress-overlay-content">
<nav class="ui-ingress-mobile-nav">
<ul>
<li map="link of props.links">
<button
class="ui-ingress-mobile-toggle"
onclick="this.classList.toggle('open')"
if="link.submenu?.length"
>
<span>{{link.label |> esc}}</span>
<img src="/ui/img/chevron.svg" />
</button>
<ul class="ui-ingress-mobile-submenu" if="link.submenu?.length">
<li map="item of link.submenu">
<a
href="{{item.route ?? '' |> esc}}"
if="item?.route && item?.label"
>
<span>{{item.label |> esc}}</span>
</a>
</li>
</ul>
<a href="{{link.href ?? '' |> esc}}" else>
<span>{{link.label |> esc}}</span>
</a>
</li>
</ul>
</nav>
<div class="ui-ingress-mobile-menu" if="Array.isArray(props.menu)">
<div map="item of props.menu">
<img
src="{{item.icon |> esc}}"
if="typeof item.icon === 'string'"
/>
<a href="{{item.href |> esc}}" if="typeof item.href === 'string'">
{{item.label |> esc}}
</a>
</div>
</div>
</div>
<div
class="ui-ingress-mobile-lang-row"
if="Array.isArray(props.languages) && props.languages.length === 2"
>
<ul>
<li map="lang of props.languages">
<a
href="{{lang.href |> esc}}"
if="typeof lang.label === 'string'"
>
<img
src="{{lang.icon |> esc}}"
if="typeof lang.icon === 'string'"
/>
<span>{{lang.label |> esc}}</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="ui-ingress-searchbar" if="props.searchAction">
<form action="{{props.searchAction ?? '' |> esc}}">
<input
type="search"
name="s"
placeholder="{{props.searchPlaceholder ?? '' |> esc}}"
/>
<button>
<img src="/ui/img/search.svg" alt="search" width="24" height="24" />
</button>
</form>
</div>
</div>
</template>