<header class="global-fixed-header">
<a href="#main-content" class="skip-to-content">Skip to main content</a>
<div class="global-site-navigation-top-bar">
<div class="container">
<div class="global-site-navigation-top-bar--links">
<a href="/">Latest Podcast Episode</a>
<a href="/">Official Merchandise</a>
</div>
</div>
</div>
<div class="global-site-header container">
<div class="container__content">
<a href="/" class="logo" aria-label="England Football Learning logo"></a>
</div>
<button class="hamburger new" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">Open
navigation</button>
<nav role="navigation" class="global-site-navigation" id="main-nav" aria-label="Primary">
<div class="global-site-navigation__home"><span>Menu</span></div>
<ul>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Started</span></a>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="true"><span>Courses</span></a>
<button class="global-site-navigation__main-tab" aria-controls="courses" aria-haspopup="true" aria-expanded="false" role="menuitem" aria-label="Courses">
</button>
<div class="global-site-navigation__level2-wrapper" id="courses" data-lazy-background=/assets/example-content/menu-lion-watermark.png>
<ul class="global-site-navigation__level2">
<li>
<a class="global-site-navigation__section-heading" href="/">Football</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-2" id="accordion-button-2"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-2" role="region" aria-labelledby="accordion-button-2">
<li><a href="/"><span>Intro to Coaching Football</span></a></li>
<li><a href="/"><span>UEFA C</span></a></li>
<li><a href="/"><span>UEFA B</span></a></li>
<li><a href="/" data-attr="true"><span>UEFA A</span></a></li>
<li><a href="/"><span>UEFA Pro License</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">FUTSAL</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-3" id="accordion-button-3"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-3" <li><a href="/"><span>National Futsal Course</span></a>
</li>
<li><a href="/"><span>UEFA B in Coaching Futsal</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">GOALKEEPING</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-4" id="accordion-button-4"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-4" aria-labelledby="accordion-button-4">
<li><a href="/"><span>National Goalkeeping Course</span></a></li>
<li><a href="/"><span>UEFA B in Coaching Goalkeepers</span></a></li>
<li><a href="/"><span>UEFA A in Coaching Goalkeepers</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">SAFEGUARDING</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-5" id="accordion-button-5"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-5" aria-labelledby="accordion-button-5">
<li><a href="/"><span>Safeguarding Children Courses</span></a></li>
<li><a href="/"><span>Safeguarding for All</span></a></li>
<li><a href="/"><span>Safeguarding for Parents</span></a></li>
<li><a href="/"><span>Safeguarding for Adults</span></a></li>
<li><a href="/"><span>Safeguarding for Children Reaccreditation</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">MEDICAL</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-6" id="accordion-button-6"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-6" aria-labelledby="accordion-button-6">
<li><a href="/"><span>Introduction to First Aid in Football</span></a></li>
<li><a href="/"><span>Emergency First Aid in Football</span></a></li>
<li><a href="/"><span>Emergency Medical First Aid in Football</span></a></li>
<li><a href="/"><span>Intermediate Trauma Medical Management in Football</span></a></li>
<li><a href="/"><span>Advanced Trauma Medical Management in Football</span></a></li>
<li><a href="/"><span>Reaccreditation</span></a></li>
<li><a href="/"><span>Sudden Cardiac Arrest</span></a></li>
</ul>
</li>
<li>
<ul class="global-site-navigation__section-heading--more">
<li><a href="/">DISABILITY</span></a></li>
<li><a href="/">TALENT ID</span></a></li>
<li><a href="/">PHYSICAL EDUCATION</span></a></li>
<li><a href="/">FREE COURSES</span></a></li>
<li><a href="/">ONLINE COURSES</span></a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Sessions</span></a>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Articles</span></a>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Ongoing Learning</span></a>
</li>
<li class="global-site-navigation__level1 link-external">
<a href="/" aria-haspopup="false" target="_blank"><span>Help</span></a>
</li>
<li class="global-site-navigation__level1 site-notification new">
<a href="/" aria-haspopup="false">Notification</a>
</li>
</ul>
<div class="global-site-navigation__bottom-link hidden">
<a href="/">Check out the latest Coachcast Podcast Episode:<span>S2 Ep1: Futsal with Ian Parkes</span></a>
</div>
</nav>
<div class="container__content b2c-nav-container">
<a href="/" class="site-search" aria-label="search"></a>
<div class="site-signin">
<!-- <a href="#"><span class="mob-only">Sign in/Up</span><span class="desktop-only">Sign in</span></a>
<span class="desktop-only">or</span>-->
<a class="user-login" role="menuitem" aria-label="My account" aria-haspopup="true" aria-controls="myaccount-nav" aria-expanded="false" tabindex="0"></a>
<nav role="navigation" class="global-site-navigation__level2-wrapper site-myaccount-menus" id="myaccount-nav" data-lazy-background="/assets/example-content/menu-lion-watermark.png" aria-label="Myaccount">
<ul>
<li>
<p class="global-site-navigation__section-heading">My Account</p>
<div class="my-account-not-loggedin">
<ul class="global-site-navigation__level3">
<li><a href="#" class="link-external" target="_blank" aria-label="Sign in to Account link opens in a new tab">Sign in to Account</a></li>
<li><a href="#" class="link-external" target="_blank" aria-label="Register an Account link opens in a new tab">Register an Account</a></li>
<li><a href="#" target="_blank" aria-label="Register an Account link opens in a new tab">Register an Account</a></li>
</ul>
</div>
<div class="my-account-loggedin hidden">
<ul class="global-site-navigation__level3">
<li><a href="#" class="" target="" data-hide-age-limit="18" data-hide-redirect-tab="/components/preview/efl-profile-page?tab=my-learning" aria-label="Learner profile bio">Bio</a></li>
<li><a href="#" class="link-external" target="_blank" aria-label="My Coach Profile link opens in a new tab">My Coach Profile</a></li>
<li><a href="#" class="link-external" target="_blank" aria-label="Manage my account prefrences link opens in a new tab">Manage my account prefrences</a></li>
<li><a href="#">Sign out of Account</a></li>
</ul>
</div>
</li>
</ul>
<div class="global-site-navigation__bottom-link">
<a href="/">Check out the latest Coachcast Podcast Episode:<span>S2 Ep1: Futsal with Ian Parkes</span></a>
</div>
</nav>
</div>
</div>
</div>
</header>
No notes defined.
{
"signedIn": true,
"background-image": "/assets/example-content/menu-lion-watermark.png",
"withoutTopBar": false,
"withoutBottomLink": false
}
const ACCORDION_TRIGGER_REF = '.accordion-trigger';
const handleClick = (target, accordion) => {
// Check if the current toggle is expanded.
const isDisabled = target.getAttribute('aria-disabled') === 'true';
if (isDisabled) {
return;
}
const isExpanded = target.getAttribute('aria-expanded') === 'true';
const active = accordion.querySelector(
`${ACCORDION_TRIGGER_REF}[aria-expanded="true"]`
);
// without allowMultiple, close the open accordion
if (active && active !== target) {
// Set the expanded state on the triggering element
active.setAttribute('aria-expanded', 'false');
// Hide the accordion sections, using aria-controls to specify the desired section
document
.getElementById(active.getAttribute('aria-controls'))
.setAttribute('aria-expanded', 'false');
}
if (!isExpanded) {
// Set the expanded state on the triggering element
target.setAttribute('aria-expanded', 'true');
// Hide the accordion sections, using aria-controls to specify the desired section
document
.getElementById(target.getAttribute('aria-controls'))
.setAttribute('aria-expanded', 'true');
const menuHeight = document.querySelector(
'.global-site-navigation > ul > li[data-linkdisplay=true] > div'
).scrollHeight;
const bottomLink = document.querySelector(
'.global-site-navigation__bottom-link'
);
const navHeight = document.querySelector('.global-site-navigation')
.clientHeight;
if (bottomLink) {
if (menuHeight > navHeight) {
bottomLink.style.top = `${menuHeight - 42}px`;
bottomLink.style.bottom = `initial`;
} else {
bottomLink.style.top = `initial`;
bottomLink.style.bottom = `0`;
}
}
} else {
// Set the expanded state on the triggering element
target.setAttribute('aria-expanded', 'false');
// Hide the accordion sections, using aria-controls to specify the desired section
document
.getElementById(target.getAttribute('aria-controls'))
.setAttribute('aria-expanded', 'false');
const menuHeight = document.querySelector(
'.global-site-navigation > ul > li[data-linkdisplay=true] > div'
).scrollHeight;
const bottomLink = document.querySelector(
'.global-site-navigation__bottom-link'
);
const navHeight = document.querySelector('.global-site-navigation')
.clientHeight;
if (bottomLink) {
if (menuHeight > navHeight) {
bottomLink.style.top = `${menuHeight - 42}px`;
bottomLink.style.bottom = `initial`;
} else {
bottomLink.style.top = `initial`;
bottomLink.style.bottom = `0`;
}
}
}
};
export const disableAccordion = accordion => {
const allItems = accordion.querySelectorAll(ACCORDION_TRIGGER_REF);
allItems.forEach(element => {
element.setAttribute('aria-disabled', 'true');
element.setAttribute('aria-expanded', 'true');
document
.getElementById(element.getAttribute('aria-controls'))
.setAttribute('aria-expanded', 'true');
});
};
export const enableAccordion = accordion => {
const allItems = accordion.querySelectorAll(ACCORDION_TRIGGER_REF);
allItems.forEach(element => {
element.setAttribute('aria-disabled', 'false');
element.setAttribute('aria-expanded', 'false');
document
.getElementById(element.getAttribute('aria-controls'))
.setAttribute('aria-expanded', 'false');
});
allItems.forEach(trigger =>
trigger.addEventListener('click', ({ target }) =>
handleClick(target, accordion)
)
);
};
import debounce from 'lodash.debounce';
import { enableAccordion, disableAccordion } from './accordion';
import showSignedInNav from './signed-in-navigation';
const MOBILE_BREAKPOINT = 900;
const defaultWidth = window.innerWidth;
const KEYCODE_MAP = {
RETURN: 13,
SPACE: 32,
};
const ACCOUNT_API = '/account/IsUserLoggedIn/';
const createMenuAccordion = parentElement => {
if (window.innerWidth >= MOBILE_BREAKPOINT) {
disableAccordion(parentElement);
return;
}
enableAccordion(parentElement);
window.addEventListener(
'resize',
debounce(() => {
if (defaultWidth !== window.innerWidth) {
if (window.innerWidth >= MOBILE_BREAKPOINT) {
disableAccordion(parentElement);
return;
}
enableAccordion(parentElement);
}
}, 250)
);
};
const closeSignInNav = (event, body) => {
const { target } = event;
target.setAttribute('aria-expanded', 'false');
body.classList.remove('navigation-open');
body.classList.remove('navigation-open--main');
target.removeEventListener('mouseout', closeSignInNav);
target.removeEventListener('focusout', closeSignInNav);
};
const openSignInNav = (event, body) => {
const { target } = event;
if (
event.type === 'click' &&
target.getAttribute('aria-expanded') === 'true'
) {
closeSignInNav(event, body);
return;
}
target.setAttribute('aria-expanded', 'true');
body.classList.add('navigation-open');
body.classList.add('navigation-open--main');
target.parentElement.addEventListener('mouseleave', () => {
closeSignInNav(event, body);
});
};
const closeNavTab = ({ listenerElement, trigger, body }) => {
if (trigger) {
trigger.setAttribute('aria-expanded', 'false');
if (trigger.nodeName === 'A') {
trigger.setAttribute('aria-expanded', 'false');
}
} else {
const allTabs = document.querySelectorAll(
'.global-site-navigation__main-tab'
);
allTabs.forEach(tab => tab.setAttribute('aria-expanded', 'false'));
}
body.classList.remove('navigation-open');
body.classList.remove('navigation-open--main');
if (listenerElement) {
listenerElement.removeEventListener('mouseout', closeNavTab);
listenerElement.removeEventListener('focusout', closeNavTab);
}
};
// eslint-disable-next-line complexity
const openNavTab = (event, navigation, body) => {
const { target } = event;
if (
!target.classList.contains('global-site-navigation__main-tab') &&
(!target.getAttribute('aria-haspopup') ||
target.getAttribute('aria-haspopup') === 'false')
) {
return;
}
if (target.nodeName === 'A' && event.type === 'click') {
return;
}
event.preventDefault();
// Grab anything that's already open
const openItems = navigation.querySelector(
'.global-site-navigation__main-tab[aria-expanded=true]'
);
const navLevel1 = navigation.querySelectorAll(
'.global-site-navigation__level1'
);
const homeLink = navigation.querySelector('.global-site-navigation__home');
const bottomLink = navigation.querySelector(
'.global-site-navigation__bottom-link'
);
if (window.innerWidth < MOBILE_BREAKPOINT) {
if (target.nodeName === 'BUTTON') {
if (openItems) {
target.closest('li').classList.add('mob-animation');
}
}
}
navLevel1.forEach(link => {
link.setAttribute('data-linkdisplay', 'false');
});
// if (window.innerWidth < MOBILE_BREAKPOINT) {
// navLevel1.forEach(link => {
// link.classList.add('secondary-open');
// });
// target.closest('li').classList.remove('secondary-open');
// setTimeout(() => {
// navLevel1.forEach(link => {
// link.classList.remove('secondary-open');
// });
// }, 400);
// }
// open the current tab
target.setAttribute('aria-expanded', 'true');
if (target.nodeName === 'A') {
target.nextElementSibling.setAttribute('aria-expanded', 'true');
} else if (target.nodeName === 'SPAN') {
target
.closest('a')
.nextElementSibling.setAttribute('aria-expanded', 'true');
}
target.closest('li').setAttribute('data-linkdisplay', 'true');
homeLink.classList.add('hidden');
body.classList.add('navigation-open');
body.classList.add('navigation-open--main');
document.querySelector('.global-site-header').classList.add('nav-active');
const menuHeight = target
.closest('li')
.querySelector('.global-site-navigation__level2-wrapper').scrollHeight;
const headerHeight = document.querySelector('.global-site-header')
.clientHeight;
const navHeight = navigation.clientHeight;
if (window.innerWidth < MOBILE_BREAKPOINT) {
target
.closest('li')
.querySelector('a')
.addEventListener('click', ev => {
if (ev.target.closest('li[data-linkdisplay="true"]')) {
ev.preventDefault();
ev.target.closest('li').classList.add('mob-animation');
ev.target
.closest('li')
.querySelector('button')
.click();
ev.target.closest('li').classList.remove('mob-animation');
}
});
}
if (bottomLink) {
if (menuHeight - bottomLink.clientHeight > navHeight) {
if (window.innerWidth >= MOBILE_BREAKPOINT) {
bottomLink.style.top = `${menuHeight + headerHeight - 5}px`;
} else {
bottomLink.style.top = `${menuHeight - bottomLink.clientHeight + 14}px`;
}
bottomLink.style.bottom = `initial`;
} else {
bottomLink.style.top = `initial`;
bottomLink.style.bottom = `0`;
}
}
if (bottomLink) {
bottomLink.classList.remove('hidden');
}
if (event.type === 'mouseover') {
if (bottomLink) {
bottomLink.addEventListener('mouseover', e => {
e.target
.closest('.global-site-navigation')
.classList.add('bottomhover');
bottomLink.addEventListener('mouseleave', ev => {
ev.target
.closest('.global-site-navigation')
.classList.remove('bottomhover');
const allTabs = document.querySelectorAll(
'.global-site-navigation__main-tab'
);
allTabs.forEach(tab => tab.setAttribute('aria-expanded', 'false'));
bottomLink.classList.add('hidden');
target.setAttribute('data-linkdisplay', 'false');
if (target.nodeName === 'A') {
target.setAttribute('aria-expanded', 'false');
}
});
});
}
// when we opened the tab with a mouseover, we should close it on mouseleave
target.parentElement.addEventListener(
'mouseleave',
({ target: listenerElement }) => {
setTimeout(() => {
if (
listenerElement
.closest('.global-site-navigation')
.classList.contains('bottomhover')
) {
return;
}
closeNavTab({ listenerElement, target, body });
if (bottomLink) {
bottomLink.classList.add('hidden');
}
target.closest('li').setAttribute('data-linkdisplay', 'false');
if (target.nodeName === 'A') {
target.setAttribute('aria-expanded', 'false');
}
}, 10);
}
);
return;
}
if (openItems) {
openItems.setAttribute('aria-expanded', 'false');
if (window.innerWidth < MOBILE_BREAKPOINT) {
target.closest('li').classList.remove('mob-animation');
if (
target
.closest('li')
.querySelector('.global-site-navigation__level2-wrapper')
) {
target
.closest('li')
.querySelector('.global-site-navigation__level2-wrapper')
.classList.add('secondary-hide');
setTimeout(() => {
target
.closest('li')
.querySelector('.global-site-navigation__level2-wrapper')
.classList.remove('secondary-hide');
}, 400);
}
}
if (bottomLink && window.innerWidth >= MOBILE_BREAKPOINT) {
bottomLink.classList.add('hidden');
}
}
if (bottomLink && target.getAttribute('aria-expanded') === 'true') {
bottomLink.classList.remove('hidden');
}
// If there are no open items, then remove the navigation-open class
const isAllTabsClosed = !navigation.querySelector(
'.global-site-navigation__main-tab[aria-expanded=true]'
);
if (isAllTabsClosed) {
document
.querySelector('.global-site-header')
.classList.remove('nav-active');
navLevel1.forEach(link => {
link.removeAttribute('data-linkdisplay');
});
homeLink.classList.remove('hidden');
if (bottomLink) {
if (!openItems) {
bottomLink.classList.add('hidden');
} else {
bottomLink.style.top = `initial`;
bottomLink.style.bottom = `0`;
}
}
}
};
const handleKeydown = (event, parentElement, body) => {
if (![KEYCODE_MAP.SPACE, KEYCODE_MAP.RETURN].includes(event.keyCode)) {
return;
}
openNavTab(event, parentElement, body);
};
const hamburgerMenu = parentElement => {
const hamburger = document.querySelector('[aria-controls="main-nav"]');
const bottomLink = parentElement.querySelector(
'.global-site-navigation__bottom-link'
);
const homeLink = parentElement.querySelector('.global-site-navigation__home');
if (!hamburger.offsetParent) {
hamburger.setAttribute('aria-expanded', 'true');
return;
}
let mobileNavigation;
if (window.innerWidth < MOBILE_BREAKPOINT) {
mobileNavigation = document.querySelector('.global-site-navigation');
mobileNavigation.classList.add('mobile-navigation-closed');
}
hamburger.addEventListener('click', ({ target }) => {
const currentValue = target.getAttribute('aria-expanded');
const navLevel1 = parentElement.querySelectorAll(
'.global-site-navigation__level1'
);
const myAccount = document.querySelector('#myaccount-nav');
navLevel1.forEach(link => {
link.removeAttribute('data-linkdisplay');
});
document.querySelector('body').classList.toggle('navigation-open');
document.querySelector('body').classList.toggle('navigation-open--main');
const allMenu = document.querySelectorAll(
'.global-site-navigation__main-tab'
);
allMenu.forEach(tab => tab.setAttribute('aria-expanded', 'false'));
target.setAttribute('aria-expanded', currentValue !== 'true');
myAccount.classList.remove('expanded');
if (currentValue === 'true') {
homeLink.classList.remove('hidden');
if (mobileNavigation) {
setTimeout(() => {
mobileNavigation.classList.add('mobile-navigation-closed');
if (bottomLink) {
bottomLink.classList.add('hidden');
}
}, 300);
}
} else {
// eslint-disable-next-line no-lonely-if
if (mobileNavigation) {
setTimeout(() => {
mobileNavigation.classList.remove('mobile-navigation-closed');
if (bottomLink) {
bottomLink.classList.remove('hidden');
}
}, 300);
}
}
if (
document.querySelector('.global-site-navigation__main-tab.active') ===
null
) {
document
.querySelector('.global-site-header')
.classList.remove('nav-active');
} else if (document.querySelector('a[data-attr=true]')) {
document
.querySelector('.global-site-header')
.querySelector('a[data-attr=true]')
.closest('.global-site-navigation__level1')
.querySelector('.global-site-navigation__main-tab')
.setAttribute('aria-expanded', 'true');
} else if (
document.querySelectorAll('div[data-brand]').length &&
(document
.querySelectorAll('div[data-brand]')[0]
.getAttribute('data-brand') === 'mens' ||
document
.querySelectorAll('div[data-brand]')[0]
.getAttribute('data-brand') === 'womens')
) {
document
.querySelector('.global-site-navigation__level1:first-child')
.querySelector('.global-site-navigation__main-tab')
.setAttribute('aria-expanded', 'true');
}
/* else {
document
.querySelector('.site-navigation__level1:last-child')
.querySelector('.site-navigation__main-tab')
.setAttribute('aria-expanded', 'true');
} */
});
};
const initFixedHeader = () => {
const { body } = document;
let { pageYOffset: prevScrollPos } = window;
const headerEle = document.querySelector('.global-fixed-header');
const { offsetHeight: headerEleHt } = headerEle;
const headerEleHeight =
window.innerWidth <= MOBILE_BREAKPOINT ? 105 : headerEleHt;
let isScrolling = false;
const minScrollDistance = window.innerWidth <= MOBILE_BREAKPOINT ? 10 : 20;
setTimeout(() => {
const getStartedPage = document.querySelector('.efl-get-started');
if (!getStartedPage) {
body.style.marginTop = `${headerEleHeight}px`; // default body margin
}
}, 500);
window.addEventListener(
'scroll',
() => {
// If there's already a scroll being calculated, we don't
// need to do anything
if (isScrolling) {
return;
}
isScrolling = true;
setTimeout(() => {
const { pageYOffset: currentScrollPos } = window;
// const { offsetHeight: headerEleHeight } = headerEle;
// set the body top padding in order to keep empty space
// of equal height of the header element.
const getStartedPage = document.querySelector('.efl-get-started');
if (!getStartedPage) {
body.style.marginTop = `${headerEleHeight}px`;
}
// at the top or scroll position is smaller than height of header element.
if (currentScrollPos <= 0 || currentScrollPos <= headerEleHeight) {
headerEle.style.top = 0;
isScrolling = false;
return;
}
if (currentScrollPos > prevScrollPos + minScrollDistance) {
// scroll down
headerEle.style.top = `-${headerEleHeight}px`;
} else if (currentScrollPos < prevScrollPos - minScrollDistance) {
// scroll up
headerEle.style.top = 0;
}
prevScrollPos = currentScrollPos;
isScrolling = false;
}, 100);
},
{ passive: true }
);
};
const highlightNavLinks = parentElement => {
if (parentElement.querySelector('a[data-attr=true]')) {
parentElement.querySelector('a[data-attr=true]').classList.add('active');
parentElement
.querySelector('a[data-attr=true]')
.closest('.global-site-navigation__level1')
.querySelector('a')
.classList.add('active');
if (window.innerWidth < MOBILE_BREAKPOINT) {
document.querySelector('.global-site-header').classList.add('nav-active');
parentElement
.querySelector('a[data-attr=true]')
.closest('.global-site-navigation__level1')
.querySelector('.global-site-navigation__main-tab')
.setAttribute('aria-expanded', 'true');
/* parentElement
.querySelector('a[data-attr=true]')
.closest('.site-navigation__level3')
.removeAttribute('hidden'); */
parentElement
.querySelector('a[data-attr=true]')
.closest('.global-site-navigation__level3')
.closest('li')
.querySelector('button')
.setAttribute('aria-expanded', 'true');
parentElement
.querySelector('a[data-attr=true]')
.closest('.global-site-navigation__level3')
.setAttribute('aria-expanded', 'true');
}
}
};
const userSignInAnalytics = (loginStatus, { fanCode, userStatus }) => {
const isLogin = loginStatus;
// eslint-disable-next-line no-undef
const loginWith = dataLayerLoginType;
const status = userStatus;
window.dataLayer.push({
loginStatus: isLogin,
logintype: loginWith,
loginId: fanCode,
userStatus: status,
});
};
export default async parentElement => {
const { isAuthenticated, ...userDetails } = await fetch(ACCOUNT_API)
.then(response => response.json())
.catch(error => {
// eslint-disable-next-line no-console
console.error('Error fetched membership status', error);
return {};
});
if (isAuthenticated) {
if (userDetails.userName) {
showSignedInNav(userDetails, isAuthenticated);
userSignInAnalytics('yes', userDetails);
} else {
showSignedInNav(userDetails, false);
userSignInAnalytics('no', userDetails);
}
} else {
showSignedInNav(userDetails, isAuthenticated);
userSignInAnalytics('no', userDetails);
}
const signIn = document.querySelector('.global-site-header .user-login');
hamburgerMenu(parentElement);
createMenuAccordion(parentElement);
const body = document.querySelector('body');
if (window.innerWidth >= MOBILE_BREAKPOINT) {
parentElement.addEventListener('mouseover', event =>
openNavTab(event, parentElement, body)
);
signIn.addEventListener('mouseover', event => openSignInNav(event, body));
const level3Nav = document.querySelectorAll(
'.global-site-navigation__level2 .accordion-trigger'
);
level3Nav.forEach(nav => {
// eslint-disable-next-line no-param-reassign
nav.tabIndex = -1;
});
const focusLink = parentElement.querySelector(
'.global-site-navigation__bottom-link a'
);
const dropdown = parentElement.querySelectorAll(
'.global-site-navigation__level2-wrapper'
);
const lastLink = parentElement.querySelector(
'.global-site-navigation__level1:last-child a'
);
const navNext = document.querySelector('.b2c-nav-container a');
const loginNav = document.querySelector('.user-login');
// bottom link accessibility focus
if (focusLink) {
dropdown.forEach(drop => {
const droplink = drop.querySelectorAll('a');
droplink[droplink.length - 1].onkeydown = function(e) {
if (!e.shiftKey && e.keyCode === 9) {
e.preventDefault();
focusLink.focus();
}
};
});
focusLink.addEventListener('keydown', function(e) {
if (e.shiftKey && e.keyCode === 9) {
// shift was down when tab was pressed
e.preventDefault();
const prevEl = parentElement
.querySelector(
'.global-site-navigation__main-tab[aria-expanded=true]'
)
.closest('li')
.querySelectorAll('a');
prevEl[prevEl.length - 1].focus();
} else if (e.keyCode === 9) {
e.preventDefault();
parentElement
.querySelector(
'.global-site-navigation__main-tab[aria-expanded=true]'
)
.closest('li')
.nextElementSibling.querySelector('a')
.focus();
}
});
lastLink.addEventListener('keydown', function(e) {
if (!e.shiftKey && e.keyCode === 9) {
e.preventDefault();
navNext.focus();
}
});
loginNav.addEventListener('click', function(e) {
e.preventDefault();
if (e.target.getAttribute('aria-expanded') === 'false') {
e.target.setAttribute('aria-expanded', 'true');
} else {
e.target.setAttribute('aria-expanded', 'false');
}
});
loginNav.addEventListener('keydown', function(e) {
if (e.keyCode === 13) {
e.preventDefault();
if (e.target.getAttribute('aria-expanded') === 'false') {
e.target.setAttribute('aria-expanded', 'true');
} else {
e.target.setAttribute('aria-expanded', 'false');
}
}
});
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
const bottomLink = parentElement.querySelector(
'.global-site-navigation__bottom-link'
);
if (bottomLink) {
setTimeout(() => {
bottomLink.classList.add('hidden');
}, 11);
}
loginNav.setAttribute('aria-expanded', 'false');
// eslint-disable-next-line no-dupe-keys
closeNavTab({ parentElement, parentElement, body });
}
});
} else {
parentElement.addEventListener('click', event =>
openNavTab(event, parentElement, body)
);
signIn.addEventListener('click', event => {
const hamburger = document.querySelector('[aria-controls="main-nav"]');
const myAccount = document.querySelector('#myaccount-nav');
if (hamburger.getAttribute('aria-expanded') === 'true') {
hamburger.click();
}
if (event.target.getAttribute('aria-expanded') === 'true') {
myAccount.classList.remove('expanded');
setTimeout(() => {
openSignInNav(event, body);
}, 400);
} else {
openSignInNav(event, body);
setTimeout(() => {
myAccount.classList.add('expanded');
}, 100);
}
});
}
// eslint-disable-next-line no-param-reassign
parentElement.tabIndex = -1;
parentElement
.querySelectorAll('.global-site-navigation__main-tab')
.forEach(tab =>
tab.addEventListener('keydown', event =>
handleKeydown(event, parentElement, body)
)
);
initFixedHeader();
highlightNavLinks(parentElement);
window.addEventListener('resize', () => {
if (defaultWidth !== window.innerWidth) {
const hamburger = document.querySelector('[aria-controls="main-nav"]');
if (window.innerWidth < MOBILE_BREAKPOINT) {
// parentElement.removeEventListener('mouseover', closeNavTab);
hamburger.setAttribute('aria-expanded', 'false');
parentElement.classList.add('mobile-navigation-closed');
// hamburgerMenu(parentElement);
// enableAccordion(parentElement);
parentElement.addEventListener('click', event =>
openNavTab(event, parentElement, body)
);
const level3Nav = document.querySelectorAll(
'.global-site-navigation__level2 .accordion-trigger'
);
const level2Nav = parentElement.querySelectorAll(
'.global-site-navigation__level1'
);
level3Nav.forEach(nav => {
// eslint-disable-next-line no-param-reassign
nav.tabIndex = 0;
});
level2Nav.forEach(nav => {
// eslint-disable-next-line no-param-reassign
nav.removeAttribute('data-linkdisplay');
});
} else {
// parentElement.removeEventListener('click', openNavTab);
hamburger.setAttribute('aria-expanded', 'true');
parentElement.classList.remove('mobile-navigation-closed');
parentElement.addEventListener('mouseover', event =>
openNavTab(event, parentElement, body)
);
const level3Nav = document.querySelectorAll(
'.global-site-navigation__level2 .accordion-trigger'
);
level3Nav.forEach(nav => {
// eslint-disable-next-line no-param-reassign
nav.tabIndex = -1;
});
body.classList.remove('navigation-open');
body.classList.remove('navigation-open--main');
const bottomLink = parentElement.querySelector(
'.global-site-navigation__bottom-link'
);
if (bottomLink) {
setTimeout(() => {
bottomLink.classList.add('hidden');
}, 11);
}
}
}
});
};
/* stylelint-disable no-descending-specificity */
.accordion-section {
transition: max-height 0.5s ease-in-out;
margin-left: 1.6rem;
&[aria-expanded='false'] {
max-height: 0;
overflow: hidden;
}
&[hidden] {
transform: translateX(-100%);
}
}
@media screen and (max-width: 900px) {
.global-site-header {
.mobile-navigation-closed {
max-height: 0;
min-height: 0;
}
}
.accordion-trigger {
height: 4.4rem;
width: 4.4rem;
float: right;
&::after {
content: '';
background: url('./assets/images/accordion-expand.svg');
background-repeat: no-repeat;
height: 1.3rem;
width: 1.3rem;
display: inline-block;
margin-top: 0.85rem;
transition: transform 0.3s ease-in-out;
}
}
.accordion-trigger[aria-expanded='true'] {
&::after {
background: url('./assets/images/accordion-collapse.svg');
height: 0.2rem;
transform: rotate(0deg);
}
}
.navigation-open {
overflow: hidden;
padding-top: 5.6rem;
.global-site-header {
position: fixed;
width: 100%;
height: 100vh;
top: 4rem;
overflow-y: auto;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.9);
&.nav-active {
.site-navigation__mobile-prompt {
display: none;
}
}
& > .container__content {
background-color: $white;
&.b2c-nav-container {
background-color: transparent;
}
&::before {
content: '';
width: 100%;
display: inline-block;
position: absolute;
height: 1.6rem;
top: 0;
z-index: 10;
left: 0;
}
}
}
}
}
.navigation-open--b2c .hamburger {
display: none;
}
.navigation-open--main [aria-controls='myaccount-nav'] {
display: flex;
justify-content: center;
&.loggedin {
&::after {
display: none !important;
}
}
}
.global-fixed-header {
left: 0;
top: 0;
transition: all 0.4s ease-in-out 0s;
width: 100%;
z-index: 100;
position: fixed;
background-color: $white;
max-width: 100vw;
.container {
overflow: visible;
}
.global-site-navigation-top-bar {
display: flex;
height: 4rem;
background-color: $blue;
justify-content: center;
&--links {
position: relative;
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-end;
margin-right: 2.4rem;
gap: 1.6rem;
a {
color: $white;
padding: 0.8rem 0;
font-family: $text-font-ef;
letter-spacing: 0.02em;
font-size: 1.4rem;
line-height: 1.8rem;
text-decoration: none;
display: flex;
align-items: center;
&::after {
content: '';
border-right: 1px solid rgba(255, 255, 255, 0.23);
height: 2.1rem;
width: 0.1rem;
margin-left: 1.6rem;
}
&:last-of-type {
&::after {
display: none;
}
}
}
}
}
.global-site-navigation__bottom-link {
background-color: $blue;
padding: 1rem 1.6rem 0.8rem 1.6rem;
position: absolute;
z-index: 10;
width: 100%;
bottom: 0;
& > a {
color: $white;
font-family: $text-font-ef;
font-size: 1.6rem;
line-height: 2.4rem;
width: 29.3rem;
position: relative;
display: flex;
flex-direction: column;
text-decoration: none;
span {
font-size: 1.8rem;
line-height: 1.8rem;
font-weight: 700;
display: inline-block;
}
&::after {
content: '';
background: url('./assets/images/menu-arrow-white.svg') no-repeat center;
width: 1.3rem;
height: 1rem;
position: absolute;
right: -2.4rem;
top: 1.4rem;
}
}
}
@media screen and (min-width: 900px) {
box-shadow: 0 2px 3px rgba(1, 30, 65, 0.14);
.global-site-navigation-top-bar {
&--links {
gap: 1.6rem;
}
}
.global-site-navigation__bottom-link {
width: 100%;
padding: 0.8rem 1.6rem;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
& > a {
width: 100%;
max-width: 124.4rem;
display: inline-block;
margin: 0 auto;
span {
margin-left: 0.8rem;
}
&::after {
display: inline-block;
padding-left: 4.2rem;
top: 1.5rem;
position: initial;
}
}
}
}
}
.global-site-header {
padding: 0;
position: relative;
z-index: 10;
& > .container__content {
padding: 1.7rem 1.6rem;
background-color: $white;
&.b2c-nav-container {
background-color: transparent;
padding: 0;
& > a.site-search {
position: absolute;
top: 2.2rem;
right: 6.6rem;
&::after {
content: '';
background: url('./assets/images/menu-search.svg');
width: 2.4rem;
height: 2.4rem;
display: inline-block;
position: relative;
}
}
}
}
.site-signin {
font-family: $text-font-ef;
letter-spacing: 0.02em;
font-size: 1.4rem;
line-height: 1.4rem;
color: $color-interface-light;
background-color: $white;
box-sizing: border-box;
border-radius: 7rem;
text-decoration: none;
& > a {
font-family: $text-font-ef;
letter-spacing: 0.02em;
font-size: 1.4rem;
line-height: 1.4rem;
color: $color-interface-light;
text-transform: capitalize;
text-decoration: none;
position: absolute;
right: 0;
&.user-login {
top: 2.2rem;
right: 2.6rem;
cursor: pointer;
&::after {
content: '';
background-repeat: no-repeat;
background-position: center;
background-image: url('./assets/images/profile.svg');
width: 2.4rem;
height: 2.4rem;
display: inline-block;
position: relative;
}
&.loggedin {
&[aria-expanded='false'] {
color: $white;
font-size: 1.4rem;
background-color: $crest-blue;
border-radius: 7rem;
width: 2.4rem;
height: 2.4rem;
text-align: center;
line-height: 2.4rem;
background-image: none;
text-decoration: none;
overflow: hidden;
&::after {
background-image: none;
}
}
&[aria-expanded='true'] {
text-indent: -999em;
color: transparent;
width: 2.4rem;
height: 2.4rem;
&::after {
left: 0;
position: absolute;
}
}
}
&[aria-expanded='true'] {
&::after {
background-image: url('./assets/images/icon-close-primaryblue.svg');
}
}
&[aria-expanded='true'] + nav {
padding-left: 0;
padding-right: 0;
padding-top: 0;
display: block;
}
}
}
}
.site-myaccount {
font-family: $text-font-ef;
background-color: $white;
border: none;
position: absolute;
top: 0;
right: 0;
font-size: 0;
padding: 0;
&::after {
content: attr(data-username);
color: $white;
font-size: 1.4rem;
background-color: $crest-blue;
border-radius: 3rem;
width: 2.8rem;
height: 2.8rem;
display: inline-block;
line-height: 2.8rem;
text-align: center;
}
}
.site-mobile-myaccount {
color: $white;
background-color: $blue;
padding: 0.8rem 1.4rem;
}
.mob-only {
font-size: 0;
&::after {
content: '';
background: url('./assets/images/sign-in-icon.svg');
width: 2.4rem;
height: 2.4rem;
display: inline-block;
position: relative;
top: 0.4rem;
}
}
.desktop-only,
.site-register {
display: none;
}
.site-myaccount-menus {
background: $grey-light;
-webkit-backdrop-filter: blur(81px);
backdrop-filter: blur(81px);
border-radius: 0;
position: absolute;
width: 100vw;
height: calc(100vh - 107px);
z-index: 10;
margin-top: 1rem;
left: 0;
top: 5rem;
border-top: 0.1rem solid #eceef3;
display: none;
transform: translateX(100vw);
p {
color: $red;
text-align: left;
width: 100%;
padding: 1.2rem 0;
padding-bottom: 1.6rem;
font-size: 2rem;
font-weight: 500;
box-shadow: 0 2px 3px rgba(1, 30, 65, 0.14);
background: $white;
padding-left: 1.6rem;
}
.global-site-navigation__level3 {
text-align: left;
margin-top: 2.4rem;
padding-bottom: 1.4rem;
& > li {
border-bottom: 1px solid $light-blue;
padding-left: 0.8rem;
margin-left: 1.6rem;
margin-right: 1.6rem;
a {
color: $blue;
text-transform: uppercase;
padding: 1.2rem 0.8rem;
display: flex;
align-items: center;
justify-content: space-between;
&::after {
display: block;
position: initial;
content: '';
background-repeat: no-repeat;
background-image: url('./assets/images/chevron.svg');
width: 1.2rem;
height: 1rem;
}
&.link-external {
&::after {
background-image: url('./assets/images/menu-external-link.svg');
width: 3rem;
height: 3rem;
background-position: center;
}
}
}
&:last-of-type {
padding-bottom: 0;
}
}
}
}
[aria-controls='myaccount-nav'][aria-expanded='true']
+ .site-myaccount-menus {
display: block;
width: 100vw;
padding-left: 0;
padding-right: 0;
padding-top: 0;
&.expanded {
transform: translateX(0);
}
}
.logo {
max-width: 12rem;
margin: auto;
background: url('./assets/images/efl-logo.svg') no-repeat center;
width: 12rem;
height: 2.6rem;
display: flex;
}
.hamburger,
.site-myaccount-nav--close {
color: transparent;
background: url('./assets/images/icon-menu.svg') no-repeat center;
border: none;
position: absolute;
left: 2.4rem;
top: 1.4rem;
width: 2rem;
transition: background-image 0.4s ease-out;
&[aria-expanded='true'] {
background-image: url('./assets/images/icon-close-red.svg');
}
}
.hamburger {
&.new {
&::after {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
background-color: $red;
position: absolute;
top: 2px;
right: -5px;
}
&[aria-expanded='true'] {
&::after {
display: none;
}
}
}
}
.site-myaccount-nav--close {
background-color: white;
padding: 0.6rem;
top: 2px;
right: calc(100vw - 70px);
left: initial;
&[aria-expanded='false'] {
display: none;
}
}
}
/* stylelint-disable no-duplicate-selectors */
.global-fixed-header {
.link-external {
display: flex;
align-items: center;
justify-content: space-between;
&::after {
background-image: url('./assets/images/menu-external-link.svg');
content: '';
display: inline-block;
height: 3rem;
margin-left: 0.4rem;
width: 3rem;
position: initial;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
}
.global-site-navigation__level3 {
& a.link-external {
position: relative;
&::after {
top: unset;
width: 2.4rem;
height: 2.4rem;
right: 1.6rem;
left: initial;
}
}
}
}
.global-site-navigation {
background-color: $grey-light;
border-top: 0.1rem solid $grey-light;
transition: transform 0.4s ease-in-out;
position: relative;
min-height: calc(100vh - 107px);
overflow-y: auto;
overflow-x: hidden;
// FUNCTIONAL STYLES
// These styles are needed to create the show / hide interaction
.hamburger[aria-expanded='false'] + & {
transform: translateX(-100vw);
}
&__main-tab[aria-expanded='false'] + &__level2-wrapper {
transform: translateX(200vw);
min-height: initial;
top: 4.2rem;
background-color: $grey-light;
}
&__home {
color: $red;
font-family: $text-font-ef;
font-size: 2rem;
line-height: 2.6rem;
text-transform: uppercase;
padding: 1.2rem 0;
box-shadow: 0 2px 3px rgba(1, 30, 65, 0.14);
background-color: $white;
& > span {
margin: auto;
display: flex;
margin-left: 1.6rem;
}
}
// LAYOUT styles
& > ul {
display: flex;
justify-content: space-around;
flex-direction: column;
margin-top: 0.8rem;
width: 100%;
> li {
text-align: left;
transition: transform 0.4s ease-in-out;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid $light-blue;
padding-left: 0.8rem;
margin-left: 1.6rem;
margin-right: 1.8rem;
& > a {
color: $blue;
font-family: $text-font-ef;
font-size: 2rem;
line-height: 2.6rem;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
padding: 2rem 0 1.2rem 0;
white-space: nowrap;
position: relative;
width: 100%;
& > span {
pointer-events: none;
position: relative;
&::after {
content: '';
margin-top: 1rem;
background-color: transparent;
border-radius: 0.2rem;
display: inline-block;
height: 0.3rem;
position: absolute;
bottom: -0.7rem;
left: 0;
width: 0%;
z-index: 11;
}
}
}
&.site-notification {
position: relative;
display: flex !important;
justify-content: space-between;
&::after {
content: '';
background: url('./assets/images/global-notification-bell.svg')
no-repeat center;
width: 2.4rem !important;
height: 2.4rem !important;
display: inline-block !important;
position: relative;
top: initial;
bottom: initial !important;
margin-top: 0 !important;
}
& > a {
display: flex;
position: relative !important;
top: 0;
}
&.new {
&::before {
content: '';
width: 9px;
height: 9px;
border-radius: 50px;
background-color: $red;
position: absolute;
right: 2px;
top: 21px;
z-index: 9;
}
}
}
& > button {
text-align: center;
position: relative;
box-shadow: 0 2px 3px rgba(1, 30, 65, 0);
padding: 1.2rem 0;
text-indent: -99em;
width: 4.4rem;
height: 4.4rem;
float: right;
&[aria-haspopup='true'] {
&::after {
content: '';
background: url('./assets/images/chevron.svg');
background-repeat: no-repeat;
width: 0.6rem;
height: 1rem;
position: absolute;
right: 1.9rem;
top: 1.7rem;
}
&[aria-expanded='true'] {
&::after {
transform: rotate(180deg);
}
}
}
&.active {
border-bottom: 0.3rem solid $red;
}
}
&[data-linkdisplay='false'] {
transform: translateX(-100vw);
top: 4.2rem;
position: relative;
&.secondary-open {
transform: translateX(0);
}
}
&[data-linkdisplay='true'] {
box-shadow: 0 2px 3px rgba(1, 30, 65, 0.14);
padding-top: 0.1rem;
position: absolute;
top: 0;
width: calc(100% + 1.6rem);
display: inline-block;
margin-left: -1.6rem;
background-color: $white;
& > a {
color: $red;
position: relative;
top: 0.8rem;
padding: 1.2rem 0;
margin-left: -3px;
@media screen and (max-width: $mq-small) {
&.active {
& > span {
&::after {
background-color: transparent !important;
}
}
}
}
}
& > div {
margin-top: 25px;
height: auto;
overflow-y: auto;
padding-bottom: 9.7rem;
background-color: $grey-light;
background-size: 0;
}
}
&.global-site-navigation__level1 > a {
&.active {
& > span {
&::after {
background-color: $red;
width: 100%;
}
}
}
}
&.mob-animation {
transform: translateX(-100vw);
transition: none;
}
}
}
&__level2-wrapper {
-webkit-backdrop-filter: blur(81px);
backdrop-filter: blur(81px);
background: rgba(255, 255, 255, 0.9);
height: auto;
position: absolute;
padding: $spacing-m $spacing-xl;
padding-left: 0;
width: 100%;
z-index: 10;
transition: transform 0.4s ease-in-out;
padding-right: 2.5rem;
&.secondary-hide {
visibility: hidden;
}
}
&__level2 {
> li {
border-bottom: 1px solid $color-borders;
margin-left: 2.3rem;
}
}
// LINK STYLES
button {
background: none;
border: none;
&:not([aria-disabled]) {
cursor: pointer;
}
}
&__main-tab {
color: $blue;
font-family: $text-font-ef;
font-size: 2rem;
line-height: 2.6rem;
font-weight: 400;
margin-bottom: $spacing-xs;
padding: 0.6rem 0;
text-transform: uppercase;
white-space: nowrap;
&[aria-expanded='true'] {
color: $red;
position: relative;
float: left;
width: 4.4rem;
}
&.active {
color: $blue;
position: relative;
margin-bottom: 12px;
}
}
&__section-heading--more {
margin-top: 0;
li {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 1px solid $light-blue;
text-align: left;
}
}
&__section-heading,
&__section-heading--more a {
color: $blue;
font-family: $text-font-ef;
font-size: 1.8rem;
line-height: 2.6rem;
font-weight: 400;
text-align: left;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
width: calc(100% - 5.2rem);
padding: 2rem 0 1.2rem 0;
}
&__level3 {
a {
color: $color-interface-light;
display: block;
font-family: $text-font-ef;
font-size: 1.8rem;
line-height: 2.6rem;
padding: 1rem 0.8rem;
text-decoration: none;
padding-left: 0;
text-align: left;
span {
position: relative;
&::after {
content: '';
margin-top: 1rem;
background-color: transparent;
border-radius: 0.2rem;
display: inline-block;
height: 0.3rem;
position: absolute;
bottom: -0.7rem;
left: 0;
width: 0%;
z-index: 11;
}
}
&.active {
color: $blue;
span {
&::after {
background-color: $red;
width: 100%;
}
}
}
}
}
// PROMOS
&__promos {
padding: $spacing-xxl 0;
}
&__promo {
align-items: flex-end;
background-size: cover;
border-radius: $spacing-s;
color: $white;
display: flex;
font-family: $text-font-ef;
font-size: 2.4rem;
font-style: italic;
font-weight: bold;
height: 12rem;
justify-content: flex-start;
margin: $spacing-m 0;
padding: $spacing-xs $spacing-m;
text-decoration: none;
width: 100%;
}
&__mobile-prompt {
font-family: $text-font2;
font-style: italic;
font-size: 1.6rem;
line-height: 2rem;
margin: 0 auto;
text-align: center;
width: 25.5rem;
margin-top: 7.3rem;
color: $color-interface-light;
position: absolute;
left: calc(50% - 12.75rem);
&::before {
content: '';
background: url('./assets/images/arrow-up-icon.svg') no-repeat center
center;
width: 3rem;
height: 3rem;
display: inline-block;
position: absolute;
top: -5rem;
left: calc(50% - 1.5rem);
}
}
@media screen and (min-width: 900px) {
$nav-column-width: 26.2rem;
&__main-tab {
margin-bottom: 16px;
font-size: 1.4rem;
line-height: 2.4rem;
text-indent: initial !important;
width: auto !important;
&[aria-haspopup='true'] {
&::after {
background: url('./assets/images/red-chevron.svg') !important;
width: 1.8rem !important;
height: 1.8rem !important;
right: 0 !important;
top: 0 !important;
transition: transform 0.3s ease-in-out;
}
}
&[aria-expanded='true'] {
&[aria-haspopup='true'] {
&::after {
transform: rotate(180deg) !important;
}
}
}
}
&__main-tab[aria-expanded='false'] + &__level2-wrapper {
display: none;
background-color: transparent;
}
&__main-tab[aria-expanded='true'] + &__level2-wrapper {
&::before {
content: '';
display: block;
width: 100%;
height: 0.1rem;
border-top: 1px solid $grey-light;
}
}
&__level2 {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
max-width: 130rem;
gap: 5.2rem;
&:first-of-type {
max-width: initial;
}
> li {
position: relative;
flex: 1;
max-width: 16rem;
margin-left: 0;
}
> li:not(:last-of-type) {
border-bottom: none;
}
}
&__level2-wrapper {
transition: initial;
left: 50%;
transform: translateX(-50%) !important;
padding-right: 0;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
border-top: 2.2rem solid $white;
&#get-started,
&#Get-Started {
.global-site-navigation__section-heading {
width: 25rem;
}
.global-site-navigation__level3 > li {
width: 26rem;
}
}
}
.link-external {
&::after {
left: 0;
background-position: center 2px;
margin-top: -14px;
height: 2rem;
position: relative;
top: 0.4rem;
width: 2rem;
}
}
&__section-heading,
&__level3 {
text-align: center;
width: auto;
letter-spacing: -0.01em;
.link-external {
text-transform: none;
&::after {
top: unset;
background-image: url('./assets/images/menu-external-link.svg');
}
}
a {
position: relative;
padding: 1.2rem 0 0.8rem 0;
font-size: 1.4rem;
line-height: 2rem;
letter-spacing: 0.02em;
span::after {
content: '';
background-image: url('./assets/images/menu-chevron.svg');
background-repeat: no-repeat;
background-position: center;
transform: translateX(-2rem) rotate(-90deg);
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
opacity: 0;
height: 2rem;
width: 2rem;
position: absolute;
display: inline;
z-index: 1;
}
&::before {
content: '';
border-bottom: 1px solid rgba(91, 104, 133, 0.3);
width: 4.4rem;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
transition: width 0.4s ease-in-out;
}
&::after {
content: '';
border-bottom: 1px solid rgba(183, 197, 233, 0.3);
width: 16rem;
position: absolute;
bottom: 0;
left: 0;
}
span {
position: initial;
&::after {
margin-top: initial;
left: initial;
bottom: initial;
background-color: transparent !important;
width: 2rem !important;
}
}
&:hover,
&.active {
color: #0068b2;
&::before {
width: 16rem;
border-bottom: 1px solid #0068b2;
}
span::after {
transform: translateX(0) rotate(-90deg);
opacity: 1;
}
}
}
}
&__level3 {
width: auto;
margin-left: 0;
& > li {
width: 18rem;
margin: 0 auto;
text-align: left;
&:last-child {
padding-bottom: 5.2rem;
}
&:first-child {
padding-top: 1.4rem;
}
}
}
&__section-heading {
position: relative;
width: 17rem;
text-align: left;
margin-left: 0;
&::before {
content: '';
border-bottom: 1px solid #5b6885;
width: 4.6rem;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
transition: width 0.4s ease-in-out;
}
&::after {
content: '';
border-bottom: 1px solid #b7c5e9;
width: 16rem;
position: absolute;
bottom: 0;
left: 0;
}
&:hover {
color: #0068b2;
&::before {
width: 16rem;
border-bottom: 1px solid #0068b2;
}
}
&--more {
margin-top: 0;
& > li {
margin-bottom: 0;
padding-bottom: 0;
margin-right: 2rem;
white-space: nowrap;
& > a {
width: 100%;
&:hover {
color: #0068b2;
}
}
}
}
}
& &__promos {
display: flex;
flex-basis: 100%;
grid-template-columns: repeat(4, $nav-column-width);
justify-content: center;
max-width: 105rem;
padding: 5rem 0;
}
&__promo {
max-width: 24.4rem;
margin: auto;
}
&__mobile-prompt {
display: none;
}
}
&.hide {
display: none;
}
}
@media screen and (min-width: 900px) {
.global-site-header {
display: flex;
justify-content: center;
grid-template-columns: 20rem auto 20rem;
overflow: initial;
padding-bottom: 1.6rem;
padding-top: 2.5rem;
padding-left: 3.2rem;
padding-right: 3.2rem;
background-color: $white;
gap: initial;
.container__content {
padding: 0;
margin: 0;
}
.global-site-navigation {
background-color: $white;
width: 100%;
max-width: 100rem;
margin-top: 0;
border-top: none;
transition: initial;
position: initial;
min-height: initial;
overflow-y: initial;
overflow-x: visible;
outline: none;
transform: initial !important;
&__home {
display: none;
}
& > ul {
width: 100%;
flex-direction: row;
margin-top: 0;
& > li {
text-align: center;
margin: 0;
padding: 0;
display: initial;
border: none;
&.global-site-navigation__level1 {
width: auto;
& > a {
display: inline;
font-size: 1.4rem;
line-height: 2.4rem;
padding: 0;
position: relative;
span {
&::after {
content: '';
margin-top: 1rem;
background-color: transparent;
border-radius: 0.2rem;
display: inline-block;
height: 0.3rem;
position: absolute;
bottom: -1rem;
left: 0;
width: 0%;
z-index: 11;
transition: width 0.3s ease-in-out;
}
}
&[aria-expanded='true'] {
span {
&::after {
background-color: $red;
width: 100%;
}
}
}
&:hover {
span {
&::after {
background-color: $red;
width: 100%;
}
}
}
&.active {
span {
&::after {
background-color: $red;
width: 100%;
}
}
}
}
}
& > button {
display: inline-block;
width: 1.8rem !important;
padding: 0;
margin: 0;
height: 1.8rem !important;
margin-left: 2px;
top: 3px;
&[aria-expanded='true'] {
box-shadow: none;
float: right;
}
}
&[data-linkdisplay='false'] {
transform: initial;
top: 0;
position: initial;
}
&[data-linkdisplay='true'] {
position: initial;
box-shadow: none;
width: auto;
& > a {
color: $blue;
top: initial;
margin-left: 0;
}
& > div {
margin-top: 0;
padding-bottom: 0;
background: rgba(255, 255, 255, 0.9);
background-size: cover;
background-repeat: no-repeat;
}
}
&.site-notification {
width: 2.4rem !important;
height: 2.4rem;
& > a {
width: 2.4rem;
height: 2.4rem;
text-indent: -999em;
font-size: 0;
position: absolute;
display: flex;
&::after {
content: '';
background: url('./assets/images/global-notification-bell.svg')
no-repeat center;
width: 2.4rem !important;
height: 2.4rem !important;
display: inline-block !important;
position: relative;
top: initial;
bottom: initial !important;
margin-top: 0 !important;
}
&:hover {
& > span {
&::after {
background-color: transparent !important;
}
}
}
}
&.new {
&::before {
display: none;
}
& > a {
&::before {
content: '';
width: 9px;
height: 9px;
border-radius: 50px;
background-color: $red;
position: absolute;
right: 2px;
top: 3px;
z-index: 15;
}
}
}
}
}
}
}
.hamburger[aria-expanded='false'] + & {
transform: initial;
}
.hamburger,
.site-mobile-signin,
.site-mobile-myaccount,
.site-myaccount-nav--close,
.mob-only {
display: none;
}
.desktop-only,
.site-register {
display: initial;
}
.site-myaccount,
.site-signin {
border: none;
display: block;
float: right;
position: relative;
top: -3px;
left: 0.2rem;
}
.site-myaccount {
font-size: 1.6rem;
color: $crest-blue;
font-weight: 500;
&::after {
margin-left: 1rem;
}
}
.b2c-nav-container {
display: flex;
a.site-search {
top: 0 !important;
right: 0 !important;
position: relative !important;
}
}
.site-signin {
font-family: $text-font-ef;
letter-spacing: 0.02em;
font-size: 1.6rem;
line-height: 2.4rem;
display: block;
color: $color-interface-light;
float: right;
padding: 0 1.8rem;
padding-top: 0.2rem;
padding-right: 3.8rem;
& > a {
font-family: $text-font-ef;
letter-spacing: 0.02em;
font-size: 1.6rem;
line-height: 1.4rem;
text-transform: capitalize;
text-decoration: underline;
position: relative;
width: 2.4rem;
height: 2.4rem;
display: inline-block;
&:hover {
text-decoration: underline;
color: $blue;
}
&.user-login {
top: 0;
right: 0;
&[aria-expanded='true'] {
&::after {
background-image: url('./assets/images/profile.svg');
}
&::before {
content: '';
width: 2.4rem;
height: 0.3rem;
border-radius: 0.2rem;
display: flex;
position: absolute;
border-bottom: 3px solid $red;
top: 3rem;
}
}
&[aria-expanded='true'] + nav {
display: block;
}
&.loggedin {
color: $white;
font-size: 1.4rem;
background-color: $crest-blue;
border-radius: 7rem;
width: 2.4rem;
height: 2.4rem;
text-align: center;
line-height: 2.4rem;
background-image: none;
text-decoration: none;
&::after {
background-image: none;
}
&[aria-expanded='true'] {
color: $white;
text-indent: initial;
}
}
}
}
}
.site-myaccount-menus {
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(81px);
backdrop-filter: blur(81px);
left: 137%;
width: 100vw !important;
height: auto;
max-width: 100vw;
top: 2.2rem;
transform: translateX(-100%) !important;
border-top: 2.6rem solid #fff;
padding-bottom: 4rem;
& > ul {
display: flex;
justify-content: flex-end;
align-items: flex-start;
margin-right: 5.4rem;
}
p {
background-color: transparent;
box-shadow: none;
color: #5b6885;
border-bottom: 1px solid rgba(91, 104, 133, 0.1);
display: none;
&::before,
&::after {
display: none;
}
}
.global-site-navigation__level3 {
margin-top: 0 !important;
padding-bottom: 6.4rem;
padding-top: 5.8rem;
display: flex;
& > li {
border-bottom: none;
padding-top: 0.8rem;
width: auto;
a {
font: $efl-p-1;
padding: 0;
text-align: right;
display: flex;
padding-right: 2.7rem;
text-transform: none;
&::after {
top: 4px;
right: 0;
display: none;
}
&:hover {
color: $blue-accent;
}
&.active {
color: $blue-accent;
}
}
a.link-external {
&::after {
top: unset;
display: block;
background-image: url('./assets/images/menu-external-link.svg');
background-size: contain;
width: 2.4rem;
height: 2.4rem;
visibility: hidden;
background-position: center;
}
&:hover::after {
visibility: visible;
}
}
}
a {
&::before {
display: none;
}
&::after {
border: none;
width: 1.6rem;
position: inherit;
}
}
}
}
.logo {
max-width: 20.8rem;
margin: 0;
position: relative;
top: -0.5rem;
height: 3rem;
width: 13.7rem;
z-index: 11;
}
}
}
@media screen and (min-width: $mq-large) {
.global-site-header {
grid-template-columns: 20% auto 20%;
gap: 7rem;
.global-site-navigation {
& > ul {
& > li {
// if any items added or removed from main navigation
// based on that we need to update translate to align notification icon
&.site-notification {
transform: translateX(70px);
}
}
}
}
}
}
@media screen and (min-width: 1440px) {
.global-site-header {
grid-template-columns: 20% auto 20%;
.site-myaccount-menus {
left: calc(134% + 50vw - 72rem);
width: 100vw !important;
max-width: 100vw;
transform: translateX(-100vw) !important;
& > ul {
margin-right: calc(50vw - 72rem + 5.4rem);
}
}
}
}
@media screen and (max-width: 900px) {
.navigation-open--main ._hj-YR-2H__Feedback__container {
z-index: 2;
}
}
// TODO: Hide my account when Nav is open
// eslint-disable-next-line complexity
export default ({ userName, age, signInUrl }, isAuthenticated) => {
const b2cNavContainer = document.querySelector('.b2c-nav-container');
const profileIcon = b2cNavContainer.querySelector('.user-login');
// EFL learner profile bio tab redirect
const learnerProfileBio = b2cNavContainer.querySelector(
'a[data-hide-age-limit]'
);
if (isAuthenticated) {
// remove before loggedin links
b2cNavContainer.querySelector('.my-account-not-loggedin').remove();
// display logged in links
b2cNavContainer
.querySelector('.my-account-loggedin')
.classList.remove('hidden');
profileIcon.innerText = userName;
profileIcon.classList.add('loggedin');
if (learnerProfileBio) {
const { hideAgeLimit, hideRedirectTab } = learnerProfileBio.dataset;
// eslint-disable-next-line radix
const ageCheck = parseInt(hideAgeLimit);
// eslint-disable-next-line no-restricted-globals
const currentLocation = `${location.pathname}${location.search}`;
const bioURL = '/profile?tab=bio';
if (ageCheck > age) {
learnerProfileBio.closest('li').classList.add('hidden');
if (currentLocation.toLowerCase() === bioURL) {
// eslint-disable-next-line no-restricted-globals
location.href = `${hideRedirectTab}&popup=true`;
}
}
}
} else {
// remove loggedin links
b2cNavContainer.querySelector('.my-account-loggedin').remove();
// profile page redirect
const isProfilePage = document.querySelector('.efl-profile-page');
const profileDp = document.querySelector(
'.efl-profile-hero-banner__content--profile__picture--dp'
);
const bookmarkLinks = document.querySelectorAll(
'.efl-learner-profile-in-page-bookmark__link'
);
const authPage = document.querySelector('[data-auth-redirect="true"]');
const profileNotification = document.querySelector(
'.efl-global-notifications.priority-3'
);
const resetFaids1 = document.querySelectorAll('[data-fanid]');
const resetFaids2 = document.querySelectorAll('[data-fan-id]');
resetFaids1.forEach(ele => {
ele.setAttribute('data-fanid', '');
});
resetFaids2.forEach(ele => {
ele.setAttribute('data-fan-id', '');
});
if (authPage) {
// eslint-disable-next-line no-restricted-globals
location.href = signInUrl;
}
if (isProfilePage && profileDp) {
const { publicProfileFanid, experienceEditor } = profileDp.dataset;
if (!publicProfileFanid && experienceEditor !== 'true') {
// eslint-disable-next-line no-restricted-globals
location.href = window.location.origin;
}
}
// global notification (profile) remove
if (profileNotification) {
profileNotification.remove();
}
if (bookmarkLinks) {
bookmarkLinks.forEach(bookmark => {
bookmark.classList.remove('active');
bookmark.classList.remove('logged-in');
});
}
}
};
<header class="global-fixed-header">
<a href="#main-content" class="skip-to-content">Skip to main content</a>
{{#unless withoutTopBar}}
<div class="global-site-navigation-top-bar">
<div class="container">
<div class="global-site-navigation-top-bar--links">
<a href="/">Latest Podcast Episode</a>
<a href="/">Official Merchandise</a>
</div>
</div>
</div>
{{/unless}}
<div class="global-site-header container">
<div class="container__content">
<a href="/" class="logo" aria-label="England Football Learning logo"></a>
</div>
<button class="hamburger new" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">Open
navigation</button>
<nav role="navigation" class="global-site-navigation" id="main-nav" aria-label="Primary">
<div class="global-site-navigation__home"><span>Menu</span></div>
<ul>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Started</span></a>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="true"><span>Courses</span></a>
<button class="global-site-navigation__main-tab" aria-controls="courses" aria-haspopup="true" aria-expanded="false"
role="menuitem" aria-label="Courses">
</button>
<div class="global-site-navigation__level2-wrapper" id="courses" data-lazy-background={{background-image}}>
<ul class="global-site-navigation__level2">
<li>
<a class="global-site-navigation__section-heading" href="/">Football</a>
<button class="accordion-trigger" aria-expanded="false"
aria-controls="accordion-section-2" id="accordion-button-2"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-2" role="region"
aria-labelledby="accordion-button-2">
<li><a href="/"><span>Intro to Coaching Football</span></a></li>
<li><a href="/"><span>UEFA C</span></a></li>
<li><a href="/"><span>UEFA B</span></a></li>
<li><a href="/" data-attr="true"><span>UEFA A</span></a></li>
<li><a href="/"><span>UEFA Pro License</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">FUTSAL</a>
<button class="accordion-trigger" aria-expanded="false"
aria-controls="accordion-section-3" id="accordion-button-3"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-3"
<li><a href="/"><span>National Futsal Course</span></a></li>
<li><a href="/"><span>UEFA B in Coaching Futsal</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">GOALKEEPING</a>
<button class="accordion-trigger" aria-expanded="false"
aria-controls="accordion-section-4" id="accordion-button-4"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-4"
aria-labelledby="accordion-button-4">
<li><a href="/"><span>National Goalkeeping Course</span></a></li>
<li><a href="/"><span>UEFA B in Coaching Goalkeepers</span></a></li>
<li><a href="/"><span>UEFA A in Coaching Goalkeepers</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">SAFEGUARDING</a>
<button class="accordion-trigger" aria-expanded="false"
aria-controls="accordion-section-5" id="accordion-button-5"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-5"
aria-labelledby="accordion-button-5">
<li><a href="/"><span>Safeguarding Children Courses</span></a></li>
<li><a href="/"><span>Safeguarding for All</span></a></li>
<li><a href="/"><span>Safeguarding for Parents</span></a></li>
<li><a href="/"><span>Safeguarding for Adults</span></a></li>
<li><a href="/"><span>Safeguarding for Children Reaccreditation</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">MEDICAL</a>
<button class="accordion-trigger" aria-expanded="false"
aria-controls="accordion-section-6" id="accordion-button-6"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-6"
aria-labelledby="accordion-button-6">
<li><a href="/"><span>Introduction to First Aid in Football</span></a></li>
<li><a href="/"><span>Emergency First Aid in Football</span></a></li>
<li><a href="/"><span>Emergency Medical First Aid in Football</span></a></li>
<li><a href="/"><span>Intermediate Trauma Medical Management in Football</span></a></li>
<li><a href="/"><span>Advanced Trauma Medical Management in Football</span></a></li>
<li><a href="/"><span>Reaccreditation</span></a></li>
<li><a href="/"><span>Sudden Cardiac Arrest</span></a></li>
</ul>
</li>
<li>
<ul class="global-site-navigation__section-heading--more">
<li><a href="/">DISABILITY</span></a></li>
<li><a href="/">TALENT ID</span></a></li>
<li><a href="/">PHYSICAL EDUCATION</span></a></li>
<li><a href="/">FREE COURSES</span></a></li>
<li><a href="/">ONLINE COURSES</span></a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Sessions</span></a>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Articles</span></a>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Ongoing Learning</span></a>
</li>
<li class="global-site-navigation__level1 link-external">
<a href="/" aria-haspopup="false" target="_blank"><span>Help</span></a>
</li>
<li class="global-site-navigation__level1 site-notification new">
<a href="/" aria-haspopup="false">Notification</a>
</li>
</ul>
{{#unless withoutBottomLink}}
<div class="global-site-navigation__bottom-link hidden">
<a href="/">Check out the latest Coachcast Podcast Episode:<span>S2 Ep1: Futsal with Ian Parkes</span></a>
</div>
{{/unless}}
</nav>
<div class="container__content b2c-nav-container">
<a href="/" class="site-search" aria-label="search"></a>
<div class="site-signin">
<!-- <a href="#"><span class="mob-only">Sign in/Up</span><span class="desktop-only">Sign in</span></a>
<span class="desktop-only">or</span>-->
<a class="user-login" role="menuitem" aria-label="My account" aria-haspopup="true" aria-controls="myaccount-nav" aria-expanded="false" tabindex="0"></a>
<nav role="navigation" class="global-site-navigation__level2-wrapper site-myaccount-menus" id="myaccount-nav" data-lazy-background="{{background-image}}" aria-label="Myaccount">
<ul>
<li>
<p class="global-site-navigation__section-heading">My Account</p>
<div class="my-account-not-loggedin">
<ul class="global-site-navigation__level3">
<li><a href="#" class="link-external" target="_blank" aria-label="Sign in to Account link opens in a new tab">Sign in to Account</a></li>
<li><a href="#" class="link-external" target="_blank" aria-label="Register an Account link opens in a new tab">Register an Account</a></li>
<li><a href="#" target="_blank" aria-label="Register an Account link opens in a new tab">Register an Account</a></li>
</ul>
</div>
<div class="my-account-loggedin hidden">
<ul class="global-site-navigation__level3">
<li><a href="#" class="" target="" data-hide-age-limit="18" data-hide-redirect-tab="/components/preview/efl-profile-page?tab=my-learning" aria-label="Learner profile bio">Bio</a></li>
<li><a href="#" class="link-external" target="_blank" aria-label="My Coach Profile link opens in a new tab">My Coach Profile</a></li>
<li><a href="#" class="link-external" target="_blank" aria-label="Manage my account prefrences link opens in a new tab">Manage my account prefrences</a></li>
<li><a href="#" >Sign out of Account</a></li>
</ul>
</div>
</li>
</ul>
{{#unless withoutBottomLink}}
<div class="global-site-navigation__bottom-link">
<a href="/">Check out the latest Coachcast Podcast Episode:<span>S2 Ep1: Futsal with Ian Parkes</span></a>
</div>
{{/unless}}
</nav>
</div>
</div>
</div>
</header>