diff --git a/src/assets/example.svg b/src/assets/example.svg
new file mode 100644
index 0000000000000000000000000000000000000000..24d66224fda7585b21f20e6e8ebff88ba55f722b
--- /dev/null
+++ b/src/assets/example.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ viewBox="0 -256 1792 1792"
+ id="svg3013"
+ version="1.1"
+ inkscape:version="0.48.3.1 r9886"
+ width="100%"
+ height="100%"
+ sodipodi:docname="download_font_awesome.svg">
+ <metadata
+ id="metadata3023">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs3021" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="640"
+ inkscape:window-height="480"
+ id="namedview3019"
+ showgrid="false"
+ inkscape:zoom="0.13169643"
+ inkscape:cx="896"
+ inkscape:cy="896"
+ inkscape:window-x="0"
+ inkscape:window-y="25"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="svg3013" />
+ <g
+ transform="matrix(1,0,0,-1,113.89831,1293.0169)"
+ id="g3015">
+ <path
+ d="m 1120,608 q 0,-12 -10,-24 L 791,265 q -9,-9 -23,-9 -14,0 -23,9 L 425,585 q -9,9 -9,23 0,13 9.5,22.5 9.5,9.5 22.5,9.5 h 192 v 352 q 0,13 9.5,22.5 9.5,9.5 22.5,9.5 h 192 q 13,0 22.5,-9.5 Q 896,1005 896,992 V 640 h 192 q 14,0 23,-9 9,-9 9,-23 z m 160,32 q 0,104 -40.5,198.5 Q 1199,933 1130,1002 1061,1071 966.5,1111.5 872,1152 768,1152 664,1152 569.5,1111.5 475,1071 406,1002 337,933 296.5,838.5 256,744 256,640 256,536 296.5,441.5 337,347 406,278 475,209 569.5,168.5 664,128 768,128 872,128 966.5,168.5 1061,209 1130,278 1199,347 1239.5,441.5 1280,536 1280,640 z m 256,0 Q 1536,431 1433,254.5 1330,78 1153.5,-25 977,-128 768,-128 559,-128 382.5,-25 206,78 103,254.5 0,431 0,640 0,849 103,1025.5 206,1202 382.5,1305 559,1408 768,1408 977,1408 1153.5,1305 1330,1202 1433,1025.5 1536,849 1536,640 z"
+ id="path3017"
+ inkscape:connector-curvature="0"
+ style="fill:currentColor" />
+ </g>
+</svg>
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index 7eeea7e01b529044e7e2715d10d919f69824a346..3b62026bd8f9aa03a40bd24d2838ac816fe6d7bb 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -284,6 +284,7 @@ h1 {
@include breakpoint($extrawide) {
// > 1200px
+ //@todo Check the size. SHould be 46 till 1600, and after 1600px it should be 52px;
@include font-size(52px, 64px);
letter-spacing: -1.6px;
}
diff --git a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
index e2e51ea473af5d94c3774e3c4ca3e81c9708c987..ff3c95e094b175f8d5c3faca17b0ec54c3d73dd3 100644
--- a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
+++ b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss
@@ -17,7 +17,7 @@
padding: 0 2rem;
}
- // Large desktop Layout >1441px
+ // Large desktop Layout >1600px
@include breakpoint($xlarge) {
max-width: 1216px;
padding: 0;
@@ -38,9 +38,9 @@
padding: 0 2rem;
}
- // Large desktop Layout >1441px
+ // Large desktop Layout >1200px
@include breakpoint($extrawide) {
- max-width: 1440px;
+ max-width: 1216px;
padding: 0;
}
}
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 14d264bd03301fe3f4c3d11a04e097792efedd28..8765b635f3b6c732a8b00110968b66318bc112e9 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -13,20 +13,38 @@
:host(.menu--language:not([is-mobile])) {
@include breakpoint($narrow) {
+ height: 100%;
position: relative;
right: auto;
top: auto;
}
}
+:host(.menu--language__is-open) {
+ &::after {
+ @include breakpoint($wide) {
+ content: ' ';
+ height: 4px;
+ background-color: var(--grayscale-black);
+ display: block;
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ //bottom: -24px;
+ //left: 0;
+ }
+ }
+}
+
.menu--language__toggle {
@include font-size(14px, 24px);
align-items: center;
- background: transparent;
+ background: var(--grayscale-white);
border: 0 none;
color: var(--brand-main-nearly-black);
display: flex;
flex-flow: row;
+ font-family: var(--main-font-family);
font-weight: 600;
letter-spacing: -0.4px;
margin: 0 -4px;
@@ -35,6 +53,7 @@
@include breakpoint($extrawide) {
@include font-size(12px, 12px);
+ font-weight: 400;
letter-spacing: -0.6px;
}
@@ -56,20 +75,20 @@
.menu--language__toggle__caret {
transform: rotate(180deg);
}
- background-color: var(--grayscale-background-box);
+ //background-color: var(--grayscale-background-box);
@include breakpoint($wide) {
- margin-bottom: -28px;
- margin-top: -26px;
- padding: 26px 8px 28px;
+ //margin-bottom: -28px;
+ //margin-top: -26px;
+ //padding: 26px 8px 28px;
}
@include breakpoint($extrawide) {
- margin-bottom: -38px;
- margin-top: -26px;
- padding: 26px 8px 38px;
+ //margin-bottom: -38px;
+ //margin-top: -26px;
+ //padding: 26px 8px 38px;
}
@include breakpoint($xlarge) {
- margin-bottom: -50px;
- padding: 26px 12px 50px;
+ //margin-bottom: -50px;
+ //padding: 26px 12px 50px;
}
}
@@ -82,36 +101,37 @@
}
.menu--language__dropdown {
- background-color: var(--grayscale-white);
- border-radius: 0 0 5px 5px;
- box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
- display: flex;
- flex-flow: column;
- justify-items: center;
- margin: 0;
- padding: 15px;
- position: absolute;
- right: 5px;
- text-transform: uppercase;
- top: 40px;
+ display: none;
visibility: hidden;
- @include breakpoint($wide) {
- padding: 32px 0 0;
- top: 70px;
- }
- @include breakpoint($extrawide) {
- top: 80px;
- }
- @include breakpoint($xlarge) {
- top: 90px;
- }
-
&.is-open {
+ background-color: var(--grayscale-white);
+ border-radius: 0 0 5px 5px;
+ box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
+ display: flex;
+ flex-flow: column;
+ justify-items: center;
+ left: -15px;
+ margin: 0;
+ padding: 15px;
+ position: absolute;
+ text-transform: uppercase;
visibility: visible;
+ width: max-content;
z-index: 100;
+ @include breakpoint($wide) {
+ //@todo check side paddings
+ left: -32px;
+ padding: 32px 0 0;
+ }
+ @include breakpoint($xlarge) {
+ left: -40px;
+ padding: 40px 0 0;
+ }
+
a {
+ //@todo check fonts
@include font-size(16px, 20px);
margin-left: 0;
}
@@ -133,6 +153,7 @@
}
}
+/*
.hy-menu-backdrop {
bottom: 0;
left: 0;
@@ -148,3 +169,4 @@
z-index: 99;
}
}
+*/
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 6af1f0e7d552ec7a62012bb43ea20b13dc12ff40..8ce89f96fb54b5cf8d59c77db73fed132ebfe2aa 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -32,45 +32,35 @@ export class MenuLanguage {
this._labels = typeof data === 'string' ? JSON.parse(data) : data;
}
- @Listen('languageMenuToggle') languageMenuToggle() {
- this.isMenuOpen = !this.isMenuOpen;
-
- let hyHeader = this.el.closest('.hy-site-header');
- let hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+ @Listen('languageMenuLeave') languageMenuLeave() {
+ this.isMenuOpen = false;
+ }
- if (hyBackdropDiv) {
- if (this.isMenuOpen) {
- (hyBackdropDiv as HTMLElement).classList.add('is-active');
- (hyBackdropDiv as HTMLElement).style.top = '90px';
- } else {
- (hyBackdropDiv as HTMLElement).classList.remove('is-active');
- (hyBackdropDiv as HTMLElement).style.top = '0';
- }
- }
+ @Listen('languageMenuToggle') languageMenuToggle() {
+ //this.isMenuOpen = !this.isMenuOpen;
}
@Listen('click')
handleComponentClick(event) {
- event.stopPropagation();
- }
+ this.isMenuOpen = !this.isMenuOpen;
+ const languageMenuSelector = event.target as HTMLElement;
- @Listen('click', {target: 'window'})
- handleClick(event) {
if (this.isMenuOpen) {
- const target = event.target as HTMLTextAreaElement;
- const targetElement = target.tagName.toLowerCase();
-
- if (targetElement !== 'hy-menu-language') {
- const hyHeader = this.el.closest('.hy-site-header');
- const hyBackdropDiv = (hyHeader as HTMLElement).children[0];
-
- if (hyBackdropDiv && hyBackdropDiv.classList.contains('is-active')) {
- (hyBackdropDiv as HTMLElement).classList.remove('is-active');
- (hyBackdropDiv as HTMLElement).style.top = '0';
- this.isMenuOpen = !this.isMenuOpen;
- }
- }
+ let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
+ const headerHeight = `${
+ languageMenuSelector.offsetHeight +
+ hyHeader.offsetTop +
+ hyHeader.offsetHeight +
+ 8 -
+ languageMenuSelector.offsetTop -
+ languageMenuSelector.offsetHeight
+ }px`;
+ const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(
+ `.menu--language__dropdown`
+ )[0] as HTMLElement;
+ languagePanel.style.top = headerHeight;
}
+
event.stopPropagation();
}
@@ -81,7 +71,6 @@ export class MenuLanguage {
render() {
const black = 'var(--brand-main-nearly-black)';
- const menuLanguageContainerClass = ['menu--language'].join(' ');
return this.isMobile ? (
<Host class={'menu--language'}>
@@ -99,9 +88,17 @@ export class MenuLanguage {
})}
</Host>
) : (
- <Host class={menuLanguageContainerClass}>
+ <Host
+ //onMouseLeave={() => this.languageMenuLeave()}
+ class={{
+ 'menu--language': true,
+ 'menu--language__is-open': this.isMenuOpen,
+ }}
+ >
<button
- onClick={() => this.languageMenuToggle()}
+ //onClick={() => this.languageMenuToggle()}
+ //onMouseOver={() => this.languageMenuToggle()}
+ //onFocus={() => this.languageMenuToggle()}
class={{
'menu--language__toggle': true,
'is-open': this.isMenuOpen,
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index adb3f88cb66859db1e18a2260ee5a2ee34df991e..6b6c6e9f2bda67f69baf6918f8d26ffc966c5e43 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -1,16 +1,33 @@
:host {
- display: block;
+ align-items: center;
+ display: flex;
+ flex-flow: row;
+ justify-content: center;
+ margin: 0 32px;
+ padding: 0;
+ height: 100%;
}
.hy-site-header {
+ &__menu-desktop {
+ height: 100%;
+ }
// ul - menu items first level and panels that consist of menu items second level and shortcut items per panel.
&__menu-desktop-container {
align-items: center;
display: flex;
+ flex-direction: row;
flex-flow: row;
+ height: 100%;
list-style: none;
+ margin: 0;
+ padding: 0;
width: 100%;
+ li {
+ display: flex;
+ height: 100%;
+ }
// First level menu items
.desktop-menu-link {
background-color: transparent;
@@ -20,58 +37,86 @@
font-family: var(--main-font-family);
@include breakpoint($extrawide) {
- @include font-size(15px, 16px);
+ @include font-size(14px, 14px);
@include font-weight($bold);
+ align-items: center;
border-top: 0 none;
- padding: 10px 8px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ letter-spacing: -0.6px;
+ padding: 0 7px;
+ position: relative;
text-transform: uppercase;
}
- @include breakpoint($fullhd) {
- @include font-size(18px, 16px);
- letter-spacing: -0.5px;
- padding: 10px;
+ @include breakpoint($xlarge) {
+ @include font-size(16px, 16px);
+ letter-spacing: -0.7px;
+ padding: 0 9px;
}
- // Underline if link is in active trail.
- &--is-active-trail {
- @include breakpoint($extrawide) {
+ &__label {
+ position: relative;
+ width: min-content;
+ @include breakpoint($xlarge) {
+ width: 100%;
+ }
+
+ &--is-active-trail::after {
border-bottom: 4px solid var(--brand-main-nearly-black);
- padding-bottom: 8px;
+ bottom: -12px;
+ content: ' ';
+ position: absolute;
+ right: 0;
+ width: 100%;
}
+ &--is-active-trail--disabled::after {
+ border: none;
+ }
+ }
+ hy-icon {
+ display: inline-block !important;
+ padding-left: 3px;
@include breakpoint($xlarge) {
- padding-bottom: 12px;
+ padding-left: 4px;
}
- }
- &__heading__icon {
- display: none;
+ svg {
+ height: 8px;
+ width: 10px;
+
+ @include breakpoint($xlarge) {
+ height: 8.44px;
+ width: 12px;
+ }
+ }
}
- // On hover: change background and show heading icon.
+ // On hover: heading icon is turned 180deg and grows bigger.
&--is-active {
- background-color: var(--grayscale-background-box);
- padding: 35px 10px;
position: relative;
- .desktop-menu-link__heading__icon {
- bottom: 0;
- display: block;
- left: 0;
- position: absolute;
- width: 100%;
+ hy-icon {
+ transform: rotateX(180deg);
+ }
- hy-icon {
- justify-content: center;
- transform: rotateX(180deg);
- svg {
- padding: 8px 0;
- }
- }
+ .desktop-menu-link__label--is-active-trail::after {
+ border: none;
}
}
+
+ // Underline active link when showing menu panel
+ &--is-active::after {
+ border-bottom: 4px solid var(--brand-main-nearly-black);
+ bottom: 0;
+ content: ' ';
+ position: absolute;
+ right: 0;
+ width: 100%;
+ }
}
// Panel with second level menu items and shortcuts.
@@ -79,14 +124,14 @@
display: none;
&--is-active {
- background-color: var(--grayscale-white);
+ background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);
+ box-shadow: 0 0 20px 0 rgba(14, 104, 139, 0.1) inset;
display: flex;
flex-direction: row;
opacity: 1;
position: absolute;
left: 0;
padding-left: 300px;
- padding-bottom: 28px;
width: 100%;
z-index: 510;
}
@@ -115,21 +160,19 @@
&__desktop-menu {
display: flex;
- //position: relative;
+ margin-bottom: -8px;
+ margin-top: 6px;
&__menu-items {
- //@todo check max-with in Specs
- min-width: 450px;
- max-width: 550px;
+ min-width: 440px;
+ max-width: 540px;
}
// first level link inside panel
&__first-level-menu-item {
@include font-weight($bold);
- //align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
- //flex-direction: row;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
@@ -137,7 +180,7 @@
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
align-items: flex-start;
- background-color: var(--grayscale-background-box);
+ background-color: var(--grayscale-white);
flex-direction: column;
letter-spacing: -0.75px;
margin-bottom: 4px;
@@ -145,7 +188,7 @@
position: relative;
text-transform: none;
}
- @include breakpoint($fullhd) {
+ @include breakpoint($xlarge) {
@include font-size(26px, 32px);
letter-spacing: -0.81px;
margin-bottom: 6px;
@@ -157,20 +200,25 @@
margin-left: 14px;
}
.description {
- @include font-size(16px, 24px);
- @include font-weight($semibold);
+ @include font-size(14px, 18px);
+ @include font-weight($regular);
color: var(--grayscale-dark);
- letter-spacing: 0;
+ letter-spacing: -0.2;
margin-left: 14px;
- margin-bottom: 28px;
- margin-top: 8px;
+ margin-bottom: 20px;
+ margin-top: 4px;
+
+ @include breakpoint($xlarge) {
+ @include font-size(16px, 20px);
+ letter-spacing: -0.25;
+ }
}
span.heading-icon {
position: absolute;
top: 12px;
left: -6px;
- @include breakpoint($fullhd) {
+ @include breakpoint($xlarge) {
top: 27px;
}
svg {
@@ -183,7 +231,8 @@
// menu item links
&__second-level-menu {
- background-color: var(--grayscale-background-box);
+ //background-color: var(--grayscale-background-box);
+ background-color: var(--grayscale-white);
list-style: none;
margin: 0;
padding: 0;
@@ -200,18 +249,18 @@
width: 100%;
@include breakpoint($extrawide) {
- @include font-size(15px, 22px);
+ @include font-size(14px, 18px);
align-items: center;
flex-direction: row;
- letter-spacing: -0.47px;
+ letter-spacing: -0.5px;
padding-left: 24px;
padding-right: 48px;
text-transform: none;
}
- @include breakpoint($fullhd) {
- @include font-size(18px, 22px);
- letter-spacing: -0.56px;
+ @include breakpoint($xlarge) {
+ @include font-size(16px, 18px);
+ letter-spacing: -0.5px;
}
&:focus {
@@ -244,12 +293,13 @@
// Shortcuts
.shortcuts-panel {
+ background-color: var(--grayscale-white);
position: absolute;
left: 0; // override in js
list-style: none;
min-width: 350px;
+ margin: 6px 4px 0 4px;
max-width: 400px;
- //margin: 0 48px;
padding: 0 48px;
top: 0;
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index f58e62e1eeb89bc764f207d3fa68ddd05edb7e92..3e7ac2be0ca0a9dc89dc12b79bf7105fb4374c28 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -37,9 +37,10 @@ export class HyDesktopMenuLinks {
@State() menuLinkItems: Array<object> = [];
@State() hasToolbar: boolean = false;
@State() isDesktopMenuOpen: boolean = false;
+ @State() currenOpenMenuId: number = 0;
private _submenuLeftMargin: number = 32;
- private _headerBorderOffset: number = 8;
+ private _headerBorderOffset: number = 0;
@Watch('dataDesktopLinks')
dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
@@ -58,39 +59,14 @@ export class HyDesktopMenuLinks {
if (state === 'open') {
hyBackdropDiv.classList.add('is-active');
hyBackdropDiv.style.top = `${top}px`;
- }
-
- if (state === 'close') {
- hyBackdropDiv.classList.remove('is-active');
+ } else {
hyBackdropDiv.style.top = '0';
+ hyBackdropDiv.classList.remove('is-active');
}
}
}
- handleDesktopMenuClose() {
- this.isDesktopMenuOpen = false;
- this.showBackdropShadow();
-
- const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
- const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
- const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[aria-expanded="true"]`) as HTMLElement;
-
- // Return focus to the button of the last desktop panel that was active.
- if (activeMenuItem !== null) activeMenuItem.focus();
-
- // Reset elements by removing the active classes.
- menuItems.forEach((item) => {
- item.classList.remove('desktop-menu-link--is-active');
- item.setAttribute('aria-expanded', 'false');
- });
- menuPanelItems.forEach((item) => {
- item.classList.remove('hy-desktop-menu-panel--is-active');
- item.setAttribute('aria-hidden', 'true');
- });
- }
-
- handleDesktopMenuToggle(id) {
- this.isDesktopMenuOpen = true;
+ showPanel(id) {
const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel'); // all panels
const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement;
@@ -115,6 +91,14 @@ export class HyDesktopMenuLinks {
}
activeMenuItemSibling.setAttribute('aria-hidden', 'false');
+ //Hide is-active-trail underlining
+ const activeTrailMenuItem = this.el.shadowRoot.querySelector(
+ `.desktop-menu-link__label--is-active-trail`
+ ) as HTMLElement;
+ if (activeTrailMenuItem) {
+ activeTrailMenuItem.classList.add('desktop-menu-link__label--is-active-trail--disabled');
+ }
+
// Add panels top value automatically with the correct header height
const headerHeight = `${
this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset
@@ -150,38 +134,109 @@ export class HyDesktopMenuLinks {
}
}
- handleDesktopMenuClick(id) {
- const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
- const activeMenuItemSibling = activeMenuItem.nextElementSibling as HTMLElement; // current panel
+ closePanel() {
+ this.isDesktopMenuOpen = false;
+ this.currenOpenMenuId = 0;
+ this.showBackdropShadow();
+ this.clearPanelItemsStatus();
+ }
- if (!this.isDesktopMenuOpen) {
- // Add active classes to the currently active item and its sibling element.
- this.isDesktopMenuOpen = true;
- activeMenuItem.classList.add('desktop-menu-link--is-active');
- activeMenuItem.setAttribute('aria-expanded', 'true');
- activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active');
-
- if (this.hasToolbar) {
- activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active--has-toolbar');
- }
- activeMenuItemSibling.setAttribute('aria-hidden', 'false');
+ clearPanelItemsStatus() {
+ const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
+ const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
+ const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[aria-expanded="true"]`) as HTMLElement;
+
+ // Return focus to the button of the last desktop panel that was active.
+ if (activeMenuItem !== null) activeMenuItem.focus();
- let rect = activeMenuItemSibling.getBoundingClientRect();
- this.showBackdropShadow('open', rect.bottom);
+ //Show is-active-trail underlining
+ const activeTrailMenuItem = this.el.shadowRoot.querySelector(
+ `.desktop-menu-link__label--is-active-trail`
+ ) as HTMLElement;
+ if (activeTrailMenuItem) {
+ activeTrailMenuItem.classList.remove('desktop-menu-link__label--is-active-trail--disabled');
+ }
+
+ // Reset elements by removing the active classes.
+ menuItems.forEach((item) => {
+ item.classList.remove('desktop-menu-link--is-active');
+ item.setAttribute('aria-expanded', 'false');
+ });
+ menuPanelItems.forEach((item) => {
+ item.classList.remove('hy-desktop-menu-panel--is-active');
+ item.setAttribute('aria-hidden', 'true');
+ });
+ }
+
+ handleDesktopMenuClose(event) {
+ this.closePanel();
+
+ event.stopPropagation();
+ }
+
+ handleDesktopMenuLeave(event) {
+ let leaveEvent = event as MouseEvent;
+ let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
+ const headerHeight = hyHeader.offsetTop + hyHeader.offsetHeight;
+
+ if (leaveEvent.clientY < headerHeight - 4) {
+ this.closePanel();
+ }
+
+ event.stopPropagation();
+ }
+
+ handleDesktopMenuToggle(event, id) {
+ let toggleEvent = event as MouseEvent;
+
+ const activeMenuItem = this.el.shadowRoot.querySelector(
+ `.desktop-menu-link[link-id="${id}"] .desktop-menu-link__label`
+ ) as HTMLElement;
+ let topBorder = activeMenuItem.getClientRects()[0].top;
+
+ if (this.currenOpenMenuId != id) {
+ this.currenOpenMenuId = id;
+
+ if (toggleEvent.clientY < topBorder) {
+ this.closePanel();
+ } else {
+ this.isDesktopMenuOpen = true;
+ this.showPanel(id);
+ }
} else {
- // Remove active classes to the currently active item and its sibling element.
- this.isDesktopMenuOpen = false;
- activeMenuItem.classList.remove('desktop-menu-link--is-active');
- activeMenuItem.setAttribute('aria-expanded', 'false');
- activeMenuItemSibling.classList.remove('hy-desktop-menu-panel--is-active');
- if (this.hasToolbar) {
- activeMenuItemSibling.classList.remove('hy-desktop-menu-panel--is-active--has-toolbar');
+ // Mouse moving around the same menu link
+ if (toggleEvent.clientY < topBorder) {
+ this.closePanel();
+ } else {
+ if (!this.isDesktopMenuOpen) {
+ this.isDesktopMenuOpen = true;
+ this.showPanel(id);
+ }
}
+ }
- activeMenuItemSibling.setAttribute('aria-hidden', 'true');
+ event.stopPropagation();
+ }
+
+ handleDesktopMenuFocus(event, id) {
+ if (this.isDesktopMenuOpen && this.currenOpenMenuId != id) {
+ this.currenOpenMenuId = id;
+ this.showPanel(id);
+ }
+
+ event.stopPropagation();
+ }
- this.showBackdropShadow();
+ handleDesktopMenuClick(event, id) {
+ this.isDesktopMenuOpen = !this.isDesktopMenuOpen;
+ if (!this.isDesktopMenuOpen) {
+ this.handleDesktopMenuClose(event);
+ } else {
+ this.currenOpenMenuId = id;
+ this.showPanel(id);
}
+
+ event.stopPropagation();
}
componentDidLoad() {
@@ -212,6 +267,10 @@ export class HyDesktopMenuLinks {
'desktop-menu-link',
isActive === 'true' ? 'desktop-menu-link--is-active-trail' : '',
].join(' ');
+ let classAttributesLabel = [
+ 'desktop-menu-link__label',
+ isActive === 'true' ? 'desktop-menu-link__label--is-active-trail' : '',
+ ].join(' ');
menuLinkItems.push(
<li>
@@ -219,17 +278,21 @@ export class HyDesktopMenuLinks {
type="button"
class={classAttributes}
link-id={id}
- onClick={() => this.handleDesktopMenuClick(id)}
- onMouseOver={() => this.handleDesktopMenuToggle(id)}
- onFocus={() => this.handleDesktopMenuToggle(id)}
+ onClick={(e) => this.handleDesktopMenuClick(e, id)}
+ //onMouseOver={(e) => this.handleDesktopMenuToggle(e, id)}
+ onMouseMove={(e) => this.handleDesktopMenuToggle(e, id)}
+ onMouseLeave={(e) => this.handleDesktopMenuLeave(e)}
+ onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
aria-expanded="false"
>
- {label}
- <span class="desktop-menu-link__heading__icon">
- <hy-icon icon={'hy-icon-caret-down'} size={32} />
- </span>
+ <span class={classAttributesLabel}>{label}</span>
+ <hy-icon icon={'hy-icon-caret-down'} size={32} />
</button>
- <div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
+ <div
+ class="hy-desktop-menu-panel"
+ onMouseLeave={(e) => this.handleDesktopMenuClose(e)}
+ aria-hidden="true"
+ >
<div class="hy-desktop-menu-panel__desktop-menu">
<div class="hy-desktop-menu-panel__desktop-menu__menu-items">
<a
@@ -291,7 +354,7 @@ export class HyDesktopMenuLinks {
)}
</div>
<button
- onClick={() => this.handleDesktopMenuClose()}
+ onClick={(e) => this.handleDesktopMenuClose(e)}
class={{
'hy-desktop-menu-panel__panel-toggle': true,
}}
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 8f4b7e6eaaf30c696dae83fdf08527c69ccbd566..f303e2642a6893b9d27119e9a7900449bea39e73 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -11,7 +11,7 @@
place-content: center space-between;
z-index: 99;
- @include breakpoint($wide) {
+ @include breakpoint($narrow) {
align-content: center;
display: flex;
flex-flow: row;
@@ -20,12 +20,12 @@
max-width: $fullhd;
}
- @include breakpoint($extrawide) {
- height: 96px;
+ @include breakpoint($wide) {
+ height: 80px;
}
@include breakpoint($xlarge) {
- height: 120px;
+ height: 112px;
}
&__logo-container {
@@ -141,29 +141,32 @@
}
.menu--secondary {
+ height: 100%;
+
@include breakpoint($wide) {
align-items: center;
display: flex;
flex-flow: row;
+ margin-right: 0;
+ }
+ @include breakpoint($extrawide) {
+ margin-right: 32px;
+ }
+
+ &__item {
+ margin: 0 10px;
+ padding: 10px 0;
- &__item {
+ @include breakpoint($wide) {
align-items: center;
display: flex;
flex-flow: row;
- margin: 0 10px;
- padding: 10px 0;
}
- }
-
- @include breakpoint($extrawide) {
- &__item {
+ @include breakpoint($extrawide) {
margin: 0 6px;
padding: 10px 0;
}
- }
-
- @include breakpoint($xlarge) {
- &__item {
+ @include breakpoint($xlarge) {
margin: 0 8px;
padding: 10px 0;
}
@@ -172,8 +175,8 @@
.hy-link__donate {
@include breakpoint($wide) {
- margin-left: 10px;
- margin-right: 10px;
+ //margin-left: 10px;
+ //margin-right: 10px;
padding: 0;
text-decoration: none;
@@ -184,13 +187,14 @@
}
@include breakpoint($extrawide) {
- margin-left: 8px;
- margin-right: 32px;
+ //margin-left: 8px;
+ //margin-right: 32px;
+ margin-right: 0;
}
@include breakpoint($xlarge) {
- margin-left: 10px;
- margin-right: 32px;
+ //margin-left: 10px;
+ //margin-right: 32px;
}
&__label {
@@ -206,6 +210,7 @@
@include breakpoint($extrawide) {
@include font-size(12px, 12px);
+ font-weight: 400;
letter-spacing: -0.6px;
}
diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss
index 9e05b7adc8e908c7e8c48338b301d93ebc12eccf..7f4314ec367e3ed40fa419049886092068123490 100644
--- a/src/components/site-header/site-logo/site-logo.scss
+++ b/src/components/site-header/site-logo/site-logo.scss
@@ -23,35 +23,40 @@
@include font-weight($bold);
color: var(--site-logo-color);
font-family: var(--main-font-family);
- letter-spacing: -0.9px;
+ letter-spacing: -0.7px;
margin-left: 8px;
max-width: 90px;
text-transform: uppercase;
.hy-site-header__logo-container & {
@include breakpoint($narrow) {
- max-width: none;
+ min-width: min-content;
+ max-width: max-content;
}
}
@include breakpoint($narrow) {
@include font-size(15px, 16px);
+ letter-spacing: -0.75px;
margin-left: 6px;
}
@include breakpoint($extrawide) {
@include font-size(14px, 14px);
+ letter-spacing: -0.6px;
+ margin-left: 4px;
}
@include breakpoint($xlarge) {
@include font-size(16px, 16px);
- margin-left: 8px;
+ letter-spacing: -0.7px;
+ margin-left: 4px;
}
}
&__icon svg {
height: 32px;
- width: 34px;
+ width: 33.41px;
@include breakpoint($narrow) {
height: 48px;
diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss
index dafd132f6668a65a51566ba7024ac7963b86e017..f9991d1ef717a68f74887c77b025468924fb6e71 100644
--- a/src/components/site-header/site-search/site-search.scss
+++ b/src/components/site-header/site-search/site-search.scss
@@ -12,7 +12,8 @@
@include breakpoint($wide) {
flex-direction: row-reverse;
- padding: 4px 0;
+ //padding: 4px 0;
+ padding: 0;
&:focus {
outline: solid 2px var(--additional-yellow);
@@ -54,6 +55,7 @@
@include breakpoint($extrawide) {
@include font-size(12px, 12px);
+ font-weight: 400;
letter-spacing: -0.6px;
}