<!-- Error rendering component -->
<!-- TwigException: getLang function does not exist and is not defined in the context -->
<!-- Error: TwigException: getLang function does not exist and is not defined in the context
at /builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/@frctl/twig/src/adapter.js:156:24
at new Promise (<anonymous>)
at TwigAdapter.render (/builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/@frctl/twig/src/adapter.js:134:16)
at ComponentSource._renderVariant (/builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
at _renderVariant.next (<anonymous>)
at onFulfilled (/builds/michaelhulsman/footballrs.net/htdocs/content/themes/footballrs.net/node_modules/co/index.js:65:19) -->
{# --BLUEPRINT DO NOT REMOVE--
/--BLUEPRINT DO NOT REMOVE-- #}
{% set lang = getLang() %}
{% set locale = getLocale() %}
<div class="curtain"></div>
<nav class="main">
<div
data-vue="dynamic-navigation"
data-my-profile-route="{{ route('member.showProfile.' ~ lang) }}"
data-nav-items="{{ navItems|json_encode }}"
></div>
<div class="link-bar">
{% for activeLanguage in activeLanguages %}
{% if activeLanguage.locale == locale %}
<a class="active">{{ activeLanguage.langUpper }}</a>
{% else %}
<a href="{{ languageLinks[activeLanguage.lang] }}">{{ activeLanguage.langUpper }}</a>
{% endif %}
{% endfor %}
</div>
</nav>
/* No context defined. */
<?php
namespace Theme\Views\Molecules\navigation;
use ACFToolkit\Types\CustomMolecule;
class Navigation extends CustomMolecule
{
public string $name = 'navigation';
public string $label = 'Navigation';
public int $needsJs = 1;
public int $needsVue = 0;
public int $needsVueInitialisation = 0;
public function __construct($name = '', $title = '', $children = [])
{
parent::__construct($name, $title);
$this->addChildren(array_merge($children, [
]));
}
}
<?php
namespace Theme\Views\Molecules\navigation;
use ACFToolkit\ViewModels\BaseViewModel;
class NavigationViewModel extends BaseViewModel
{
public function language_links()
{
$activeLanguages = $this->data['activeLanguages'];
$languageLinks = $this->data['languageLinks'];
$locale = app()->getLocale();
$result = [];
foreach ($activeLanguages as $activeLanguage) {
$result[] = [
'title' => $activeLanguage['langUpper'],
'link' => $languageLinks[$activeLanguage['lang']],
'active' => $activeLanguage['locale'] == $locale
];
}
return $result;
}
}
export class Navigation {
static CSS_SELECTOR = 'nav.main'
static STATE_OPEN = true
static STATE_CLOSED = false
static init = () => {
document.querySelectorAll(Navigation.CSS_SELECTOR).forEach(navigation => {
new Navigation(navigation)
})
}
constructor(el)
{
this.el = el
this.state = Navigation.STATE_CLOSED
this.curtain = document.querySelector('.curtain')
document.body.addEventListener('burger-toggle', this.toggle.bind(this))
}
close(e){
if(e.keyCode === 27){
this.toggle()
}
}
toggle(){
this.state = !this.state
this.curtain.classList.toggle('show')
this.el.classList.toggle('open')
if(this.state === Navigation.STATE_OPEN){
document.addEventListener('keyup', this.close.bind(this))
} else {
document.removeEventListener('keyup', this.close.bind(this))
}
}
}
.curtain {
@apply pointer-events-none opacity-0 fixed top-0 w-full bg-black/40 transition-opacity;
z-index: 1998;
height: 100dvh;
&.show {
@apply opacity-100;
}
}
nav.main {
@apply fixed max-h-0 w-full overflow-hidden bg-white;
z-index: 2000;
transition: max-height .35s ease-in-out;
ul {
li {
&:last-of-type {
a {
@apply border-b-0;
}
}
}
a {
@apply font-teko-semibold no-underline headline--xl flex items-center gap-x-1 py-2 border-lighter border-b text-primary;
&:after {
content: '';
@apply block border-t-2 border-r-2 border-primary rotate-45;
border-top-right-radius: 5px;
display: block;
width:12px;
height: 12px;
}
}
}
i {
width: 32px;
height: 32px;
svg {
path {
fill: theme('colors.primary');
}
}
}
span {
padding-top: 6px;
}
&.open {
@apply max-h-full;
}
}
{% include '@molecules/navigation/navigation.twig' with {
} only %}Fields