diff --git a/src/components.d.ts b/src/components.d.ts
index cf8d89ed61767b0984feb4f157eae5f9978a6d6d..41ef26cacb6d8dac7f25de89c32520b025811784 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -531,6 +531,9 @@ export namespace Components {
labelFrontPage: string;
logoLabel: string;
logoUrl: string;
+ menuButtonBreadcrumbHome: string;
+ menuButtonBreadcrumbLogourl: string;
+ menuButtonBreadcrumbMain: string;
menuButtonBreadcrumbReturn: string;
menuButtonSubmenuExpand: string;
menuIsOpen: boolean;
@@ -613,8 +616,17 @@ export namespace Components {
label: string;
labelBack: string;
labelFrontPage: string;
+ logoUrl?: string;
}
interface HyMenuSidebar {
+ /**
+ * Label for frontpage
+ */
+ frontLabel: string;
+ /**
+ * Url to frontpage
+ */
+ frontUrl: string;
/**
* Isdemo
*/
@@ -635,10 +647,11 @@ export namespace Components {
* Menu type. Defaults to sidenav.
*/
menuType: MenuType;
+ minHeight: any;
/**
- * Previous panel to be toggled to keep track.
+ * Should have link to front page or show full menu button
*/
- minHeight: any;
+ noChildren: boolean;
/**
* Upper menus panel boolean.
*/
@@ -1846,6 +1859,9 @@ declare namespace LocalJSX {
labelFrontPage?: string;
logoLabel?: string;
logoUrl?: string;
+ menuButtonBreadcrumbHome?: string;
+ menuButtonBreadcrumbLogourl?: string;
+ menuButtonBreadcrumbMain?: string;
menuButtonBreadcrumbReturn?: string;
menuButtonSubmenuExpand?: string;
menuIsOpen?: boolean;
@@ -1938,9 +1954,18 @@ declare namespace LocalJSX {
label?: string;
labelBack?: string;
labelFrontPage?: string;
+ logoUrl?: string;
onRemoveBreadcrumb?: (event: CustomEvent<any>) => void;
}
interface HyMenuSidebar {
+ /**
+ * Label for frontpage
+ */
+ frontLabel?: string;
+ /**
+ * Url to frontpage
+ */
+ frontUrl?: string;
/**
* Isdemo
*/
@@ -1961,10 +1986,11 @@ declare namespace LocalJSX {
* Menu type. Defaults to sidenav.
*/
menuType?: MenuType;
+ minHeight?: any;
/**
- * Previous panel to be toggled to keep track.
+ * Should have link to front page or show full menu button
*/
- minHeight?: any;
+ noChildren?: boolean;
/**
* Upper menus panel boolean.
*/
@@ -2079,6 +2105,7 @@ declare namespace LocalJSX {
menuLabelClose?: string;
menuLabelOpen?: string;
menuType?: MenuType;
+ onHeaderScrollDown?: (event: CustomEvent<any>) => void;
onHeaderScrollUp?: (event: CustomEvent<any>) => void;
onMenuMobileToggled?: (event: CustomEvent<any>) => void;
}
diff --git a/src/components/adjacent-image-text/adjacent-image-text.scss b/src/components/adjacent-image-text/adjacent-image-text.scss
index 6e7ecf0d777da6d612fada40ff26bc6057e81062..2b59022804d5354d58830c7171323633c33b29f8 100644
--- a/src/components/adjacent-image-text/adjacent-image-text.scss
+++ b/src/components/adjacent-image-text/adjacent-image-text.scss
@@ -76,7 +76,7 @@ $margin-narrow: 32px;
margin-top: -63px;
padding-top: 38px;
position: relative;
- z-index: 99;
+ z-index: 98;
-webkit-border-image: -webkit-linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0
100%;
-moz-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
diff --git a/src/components/navigation/menu-language-item/menu-language-item.scss b/src/components/navigation/menu-language-item/menu-language-item.scss
index 86eaffe2e7fe41e1f246ce65812c697148ce81ca..c874d8eda9a9f606ff8493815b749ae9c273d099 100644
--- a/src/components/navigation/menu-language-item/menu-language-item.scss
+++ b/src/components/navigation/menu-language-item/menu-language-item.scss
@@ -3,14 +3,14 @@
}
a {
- @include font-size(12px, 16px);
+ @include font-size(12px, 12px);
@include font-weight($regular);
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
font-family: var(--main-font-family);
- letter-spacing: -0.07px;
- margin-left: 20px;
+ letter-spacing: -0.5px;
+ margin-left: 8px;
position: relative;
text-decoration: none;
text-transform: uppercase;
@@ -20,6 +20,7 @@ a {
@include font-weight($semibold);
color: var(--brand-main-light);
letter-spacing: -0.5px;
+ margin-left: 20px;
padding: 8px 12px;
text-transform: none;
@@ -51,7 +52,7 @@ a {
.hy-menu-language-item__label:after {
content: ' ';
- border-bottom: 3px solid var(--additional-orange);
+ border-bottom: 2px solid var(--grayscale-black);
bottom: -6px;
left: 0;
position: absolute;
diff --git a/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss b/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss
index 7e18b57364acac02cd48e3358639e24d0d4eb361..466081386c9baf0aa9e62e15c07aa8fb0d17a76e 100644
--- a/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss
+++ b/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss
@@ -6,6 +6,7 @@
display: flex;
margin: 0 0 24px 16px;
padding: 0;
+ text-decoration: none;
@include breakpoint($narrow) {
margin: 0 0 24px 28px;
diff --git a/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.tsx b/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.tsx
index 3c74aec84b2071f8ee6a6a4ae09c10ed4b33ab8f..9909b21964ec7babec481dc1e50a06af9dbae533 100644
--- a/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.tsx
+++ b/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.tsx
@@ -12,6 +12,7 @@ export class MenuMobileBreadcrumb {
@Prop() label: string;
@Prop() labelBack: string;
@Prop() labelFrontPage: string;
+ @Prop() logoUrl?: string;
// Listener for a click. The current breadcrumb will be remove from the list.
@Listen('handleClick', {capture: true}) handleClick() {
@@ -20,20 +21,14 @@ export class MenuMobileBreadcrumb {
render() {
return this.isFirst ? (
- <button
+ <a
aria-label={`${this.labelBack}: ${this.labelFrontPage}`}
class={'hy-menu-mobile-breadcrumb'}
- onClick={() => this.handleClick()}
+ href={this.logoUrl}
>
<hy-icon icon={'hy-icon-caret-left'} size={12} />
- <span class={'hy-menu-mobile-breadcrumb__label is-home'}>
- <hy-icon icon={'hy-icon-home'} size={16} />
- <span class={'hy-menu-mobile-breadcrumb__label__slash'} aria-hidden={'true'}>
- {' '}
- /{' '}
- </span>
- </span>
- </button>
+ <span class={'hy-menu-mobile-breadcrumb__label'}>{this.label}</span>
+ </a>
) : (
<button
aria-label={`${this.labelBack}: ${this.label}`}
diff --git a/src/components/navigation/menu-mobile-breadcrumb/readme.md b/src/components/navigation/menu-mobile-breadcrumb/readme.md
index 5be9655fd4e881114bc04b1d540159df0cf17a50..72a8bd9c24b00be5c0ed5cffd985df7f51a6d12d 100644
--- a/src/components/navigation/menu-mobile-breadcrumb/readme.md
+++ b/src/components/navigation/menu-mobile-breadcrumb/readme.md
@@ -11,6 +11,7 @@
| `label` | `label` | | `string` | `undefined` |
| `labelBack` | `label-back` | | `string` | `undefined` |
| `labelFrontPage` | `label-front-page` | | `string` | `undefined` |
+| `logoUrl` | `logo-url` | | `string` | `undefined` |
## Events
diff --git a/src/components/navigation/menu-sidebar/menu-sidebar.tsx b/src/components/navigation/menu-sidebar/menu-sidebar.tsx
index b64b5a69599dbb51cf2649d8e5681fce2fbd85c0..3fda712f329218249e55d9b22cd6c18a25ca616f 100644
--- a/src/components/navigation/menu-sidebar/menu-sidebar.tsx
+++ b/src/components/navigation/menu-sidebar/menu-sidebar.tsx
@@ -53,9 +53,21 @@ export class MenuSidebar {
*/
@Prop() isDemo: boolean = false;
/**
- * Previous panel to be toggled to keep track.
+ * Should have link to front page or show full menu button
+ */
+ @Prop() noChildren: boolean = false;
+ /**
+ * Url to frontpage
+ */
+ @Prop() frontUrl: string;
+ /**
+ * Label for frontpage
*/
+ @Prop() frontLabel: string;
@Prop({mutable: true}) minHeight: any = null;
+ /**
+ * Previous panel to be toggled to keep track.
+ */
@State() previousPanel: HTMLElement;
/**
* Previous item to be toggle to keep track.
@@ -305,16 +317,26 @@ export class MenuSidebar {
'--minHeight': `${this.minHeight}px` as 'minHeight',
}}
>
- <button
- aria-label={this.panelToggleAriaLabel}
- class="hy-menu-sidebar__panel-toggle"
- onClick={(e) => this.panelToggle(e)}
- >
- <hy-icon icon={'hy-icon-caret-left'} fill={'currentColor'} size={10} />
- <hy-icon icon={'hy-icon-caret-left'} fill={'currentColor'} size={10} />
+ {this.noChildren ? (
+ <a aria-label={this.frontLabel} class="hy-menu-sidebar__panel-toggle" href={this.frontUrl}>
+ <hy-icon icon={'hy-icon-caret-left'} fill={'currentColor'} size={10} />
+ <hy-icon icon={'hy-icon-caret-left'} fill={'currentColor'} size={10} />
+
+ {this.frontLabel}
+ </a>
+ ) : (
+ <button
+ aria-label={this.panelToggleAriaLabel}
+ class="hy-menu-sidebar__panel-toggle"
+ onClick={(e) => this.panelToggle(e)}
+ >
+ <hy-icon icon={'hy-icon-caret-left'} fill={'currentColor'} size={10} />
+ <hy-icon icon={'hy-icon-caret-left'} fill={'currentColor'} size={10} />
+
+ {this.panelToggleLabel}
+ </button>
+ )}
- {this.panelToggleLabel}
- </button>
<div
class={panelClassAttributes}
aria-hidden={this.panelOpen ? 'false' : 'true'}
diff --git a/src/components/navigation/menu-sidebar/readme.md b/src/components/navigation/menu-sidebar/readme.md
index b327245c2be75690c472cb49efb0b0cb67e3e4e3..ec3e710dd847b200f054c9f9ad0fa121427e26d3 100644
--- a/src/components/navigation/menu-sidebar/readme.md
+++ b/src/components/navigation/menu-sidebar/readme.md
@@ -4,20 +4,23 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------------------------- | ------------------------------- | ------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------ |
-| `isDemo` | `is-demo` | Isdemo | `boolean` | `false` |
-| `logoLabel` | `logo-label` | Logo label | `string` | `undefined` |
-| `logoUrl` | `logo-url` | Url for logo. | `string` | `undefined` |
-| `menuIsOpen` | `menu-is-open` | Is menu open boolean. | `boolean` | `false` |
-| `menuType` | `menu-type` | Menu type. Defaults to sidenav. | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.sidenav` |
-| `minHeight` | `min-height` | Previous panel to be toggled to keep track. | `any` | `null` |
-| `panelOpen` | `panel-open` | Upper menus panel boolean. | `boolean` | `false` |
-| `panelToggleAriaLabel` | `panel-toggle-aria-label` | Label for panel toggle button. | `string` | `undefined` |
-| `panelToggleCloseAriaLabel` | `panel-toggle-close-aria-label` | Label for panel toggle button. | `string` | `undefined` |
-| `panelToggleCloseLabel` | `panel-toggle-close-label` | Label for panel toggle button. | `string` | `undefined` |
-| `panelToggleLabel` | `panel-toggle-label` | Label for panel toggle button. | `string` | `undefined` |
-| `size` | `size` | Logo size | `SiteLogoSize.big \| SiteLogoSize.large \| SiteLogoSize.small` | `SiteLogoSize.big` |
+| Property | Attribute | Description | Type | Default |
+| --------------------------- | ------------------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------ |
+| `frontLabel` | `front-label` | Label for frontpage | `string` | `undefined` |
+| `frontUrl` | `front-url` | Url to frontpage | `string` | `undefined` |
+| `isDemo` | `is-demo` | Isdemo | `boolean` | `false` |
+| `logoLabel` | `logo-label` | Logo label | `string` | `undefined` |
+| `logoUrl` | `logo-url` | Url for logo. | `string` | `undefined` |
+| `menuIsOpen` | `menu-is-open` | Is menu open boolean. | `boolean` | `false` |
+| `menuType` | `menu-type` | Menu type. Defaults to sidenav. | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.sidenav` |
+| `minHeight` | `min-height` | | `any` | `null` |
+| `noChildren` | `no-children` | Should have link to front page or show full menu button | `boolean` | `false` |
+| `panelOpen` | `panel-open` | Upper menus panel boolean. | `boolean` | `false` |
+| `panelToggleAriaLabel` | `panel-toggle-aria-label` | Label for panel toggle button. | `string` | `undefined` |
+| `panelToggleCloseAriaLabel` | `panel-toggle-close-aria-label` | Label for panel toggle button. | `string` | `undefined` |
+| `panelToggleCloseLabel` | `panel-toggle-close-label` | Label for panel toggle button. | `string` | `undefined` |
+| `panelToggleLabel` | `panel-toggle-label` | Label for panel toggle button. | `string` | `undefined` |
+| `size` | `size` | Logo size | `SiteLogoSize.big \| SiteLogoSize.large \| SiteLogoSize.small` | `SiteLogoSize.big` |
## Dependencies
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index 3f2717bf29f6992c077d1423e5611c86cab36e57..8ea72d4ebe01f8a578c7a76aa6f86939340b0ecd 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -127,6 +127,7 @@
}
@include breakpoint($wide) {
+ // Hide languages in 960-1200px Hamburger panel as they can be found in Header.
.menu--language {
display: none;
visibility: hidden;
diff --git a/src/components/navigation/menu/menu.tsx b/src/components/navigation/menu/menu.tsx
index 73b477776a0892f5afab5b9f3acdf6949a23b363..0fb98ff94adb1147de9fa1295a8ed6e8842f4de0 100644
--- a/src/components/navigation/menu/menu.tsx
+++ b/src/components/navigation/menu/menu.tsx
@@ -20,6 +20,9 @@ export class Menu {
@Prop() menuType: MenuType = MenuType.desktop;
@Prop() menuButtonSubmenuExpand: string;
@Prop() menuButtonBreadcrumbReturn: string;
+ @Prop() menuButtonBreadcrumbHome: string;
+ @Prop() menuButtonBreadcrumbMain: string;
+ @Prop() menuButtonBreadcrumbLogourl: string;
@State() breadcrumbs: any;
private donateLink: DonateLink[];
@@ -142,19 +145,29 @@ export class Menu {
}}
>
<hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} />
- {this.breadcrumbs.length
- ? this.breadcrumbs.map((breadcrumb, index) => {
+ {this.breadcrumbs.length ? (
+ [
+ this.breadcrumbs.map((breadcrumb, index) => {
+ let current_label = index === 0 ? this.menuButtonBreadcrumbMain : breadcrumb.label;
return (
<hy-menu-mobile-breadcrumb
label-back={this.menuButtonBreadcrumbReturn}
label-front-page={this.labelFrontPage}
- label={breadcrumb.label}
+ label={current_label}
bid={breadcrumb.bid}
- is-first={index === 0}
/>
);
- })
- : ''}
+ }),
+ ]
+ ) : (
+ <hy-menu-mobile-breadcrumb
+ label-back={this.menuButtonBreadcrumbReturn}
+ label-front-page={this.menuButtonBreadcrumbHome}
+ label={this.menuButtonBreadcrumbHome}
+ is-first={true}
+ logo-url={this.logoUrl}
+ />
+ )}
</div>
<div
aria-hidden={this.menuIsOpen ? 'false' : 'true'}
diff --git a/src/components/navigation/menu/readme.md b/src/components/navigation/menu/readme.md
index baad4577f70315dd590dd4a65ea1bbd106279c1f..01d7e789433afc32665c088414925cc658858c82 100644
--- a/src/components/navigation/menu/readme.md
+++ b/src/components/navigation/menu/readme.md
@@ -4,18 +4,21 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------------------------- | ------------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | ------------------ |
-| `dataMenuDonate` | `data-menu-donate` | | `string` | `undefined` |
-| `dataMenuLanguage` | `data-menu-language` | | `string` | `undefined` |
-| `isDemo` | `is-demo` | | `boolean` | `false` |
-| `labelFrontPage` | `label-front-page` | | `string` | `undefined` |
-| `logoLabel` | `logo-label` | | `string` | `undefined` |
-| `logoUrl` | `logo-url` | | `string` | `undefined` |
-| `menuButtonBreadcrumbReturn` | `menu-button-breadcrumb-return` | | `string` | `undefined` |
-| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `undefined` |
-| `menuIsOpen` | `menu-is-open` | | `boolean` | `true` |
-| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.desktop` |
+| Property | Attribute | Description | Type | Default |
+| ----------------------------- | -------------------------------- | ----------- | -------------------------------------------------------------------------------------------------- | ------------------ |
+| `dataMenuDonate` | `data-menu-donate` | | `string` | `undefined` |
+| `dataMenuLanguage` | `data-menu-language` | | `string` | `undefined` |
+| `isDemo` | `is-demo` | | `boolean` | `false` |
+| `labelFrontPage` | `label-front-page` | | `string` | `undefined` |
+| `logoLabel` | `logo-label` | | `string` | `undefined` |
+| `logoUrl` | `logo-url` | | `string` | `undefined` |
+| `menuButtonBreadcrumbHome` | `menu-button-breadcrumb-home` | | `string` | `undefined` |
+| `menuButtonBreadcrumbLogourl` | `menu-button-breadcrumb-logourl` | | `string` | `undefined` |
+| `menuButtonBreadcrumbMain` | `menu-button-breadcrumb-main` | | `string` | `undefined` |
+| `menuButtonBreadcrumbReturn` | `menu-button-breadcrumb-return` | | `string` | `undefined` |
+| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `undefined` |
+| `menuIsOpen` | `menu-is-open` | | `boolean` | `true` |
+| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.sidepanel \| MenuType.tablet` | `MenuType.desktop` |
## Events
diff --git a/src/components/paragraph-text/readme.md b/src/components/paragraph-text/readme.md
index 1195f6c51210a4a95a6c9f6f7b3a8e63c2ceb232..913f6e56049365213af7070425de0efc5f7f5fec 100644
--- a/src/components/paragraph-text/readme.md
+++ b/src/components/paragraph-text/readme.md
@@ -39,6 +39,10 @@ Basic text paragraph.
## Dependencies
+### Used by
+
+- [hy-site-search](../site-header/site-search)
+
### Depends on
- [hy-box](../hy-box)
@@ -48,6 +52,7 @@ Basic text paragraph.
```mermaid
graph TD;
hy-paragraph-text --> hy-box
+ hy-site-search --> hy-paragraph-text
style hy-paragraph-text fill:#f9f,stroke:#333,stroke-width:4px
```
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 0297e1b94122d2969cead71693b6c285aec91049..414e33890d06748dd3bd8e1c376058f0142bbd5d 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
@@ -151,15 +151,6 @@
z-index: 510;
width: 100%;
- &--overflow {
- overflow-y: scroll;
- max-height: calc(100vh - 115px);
-
- &.hy-desktop-menu-panel--is-active--has-toolbar {
- max-height: calc(100vh - 195px);
- }
- }
-
&--is-active {
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;
@@ -239,15 +230,16 @@
justify-content: center;
letter-spacing: -0.75px;
margin-bottom: 4px;
- padding: 17px 32px 12px 32px;
+ padding: 17px 32px 12px;
position: relative;
text-transform: none;
}
+
@include breakpoint($xlarge) {
@include font-size(26px, 32px);
letter-spacing: -0.81px;
margin-bottom: 6px;
- padding: 25px 32px 20px 32px;
+ padding: 25px 32px 16px;
}
.label {
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 4877500bc007aa63691eebae8d8949c55dc6ad26..405849de63b0784311cfeba394e6f4e386e50d99 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
@@ -76,8 +76,9 @@ export class HyDesktopMenuLinks {
if (hyBackdropDiv) {
if (state === 'open') {
- let me = window.outerHeight - top;
- hyBackdropDiv.style.height = `${me}px`;
+ const windowHeight = window.outerHeight;
+
+ hyBackdropDiv.style.height = `${windowHeight}px`;
hyBackdropDiv.style.top = `${top}px`;
hyBackdropDiv.style.position = 'absolute';
hyBackdropDiv.classList.add('is-active');
@@ -88,18 +89,6 @@ export class HyDesktopMenuLinks {
}
}
- handleScrollLock() {
- const bodyElement = document.querySelector('body');
-
- if (!this.isDesktopMenuOpen) {
- (bodyElement as HTMLElement).style.overflow = 'initial';
-
- return;
- }
-
- (bodyElement as HTMLElement).style.overflow = 'hidden';
- }
-
showPanel(id) {
// Close menu lang menu if it's open
this.menuDesktopToggled.emit();
@@ -109,8 +98,6 @@ export class HyDesktopMenuLinks {
// Open desktop menu panel
this.isDesktopMenuOpen = true;
- this.handleScrollLock();
-
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;
@@ -134,18 +121,6 @@ export class HyDesktopMenuLinks {
activeMenuItem.setAttribute('aria-expanded', 'true');
activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active');
- let currentWindowHeight = window.innerHeight;
-
- window.addEventListener('resize', () => {
- currentWindowHeight = window.innerHeight;
- });
-
- const activeMenuItemSiblingHeight = activeMenuItemSibling.offsetHeight + 115;
-
- if (activeMenuItemSiblingHeight > currentWindowHeight) {
- activeMenuItemSibling.classList.add('hy-desktop-menu-panel--overflow');
- }
-
(activeMenuItemSibling as HTMLElement).style.opacity = '1';
if (this.hasToolbar) {
@@ -162,18 +137,53 @@ export class HyDesktopMenuLinks {
}
// Add panels top value automatically with the correct header height
- const headerHeight = this.el.parentElement.classList.contains('hy-site-header--sticky-active')
- ? `${this.el.parentElement.offsetHeight + this._headerBorderOffset}px`
- : `${this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset}px`;
- activeMenuItemSibling.style.top = headerHeight;
+ let topOffset = window.pageYOffset;
+ const bodyElementClasses = document.body.classList;
+ const headerElement = document.querySelector('hy-site-header');
+ const headerShadowRootElement = headerElement.shadowRoot.querySelector('header');
+ let headerElementHeight = headerShadowRootElement.offsetHeight + this._headerBorderOffset;
+ let headerElementOffset = headerShadowRootElement.offsetTop;
+
+ let panelElementOffset = headerElementHeight + headerElementOffset;
// Add shadow backdrop
let rect = activeMenuItemSibling.getBoundingClientRect();
+ let backdropOffset = headerElementHeight + headerElementOffset + rect.height;
+ let backdropToolbarOffset = backdropOffset - 79;
+
+ window.addEventListener('scroll', () => {
+ topOffset = window.pageYOffset;
+
+ if (topOffset === 0) {
+ activeMenuItemSibling.style.top = `${panelElementOffset}px`;
+ }
- let shadowTop = this.el.parentElement.classList.contains('hy-site-header--sticky-active')
- ? this.el.parentElement.offsetHeight + this._headerBorderOffset + rect.height
- : this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset + rect.height;
- this.showBackdropShadow('open', shadowTop);
+ if (headerShadowRootElement.classList.contains('hy-site-header--sticky-active') && topOffset > 0) {
+ if (bodyElementClasses.contains('toolbar-horizontal')) {
+ activeMenuItemSibling.style.top = `${headerElementHeight}px`;
+
+ if (this.isDesktopMenuOpen) {
+ this.showBackdropShadow('open', backdropToolbarOffset);
+ }
+ }
+ }
+ });
+
+ if (headerShadowRootElement.classList.contains('hy-site-header--sticky-active') && topOffset > 0) {
+ if (bodyElementClasses.contains('toolbar-horizontal')) {
+ activeMenuItemSibling.style.top = `${headerElementHeight}px`;
+
+ if (this.isDesktopMenuOpen) {
+ this.showBackdropShadow('open', backdropToolbarOffset);
+ }
+ } else {
+ activeMenuItemSibling.style.top = `${panelElementOffset}px`;
+ this.showBackdropShadow('open', backdropOffset);
+ }
+ } else {
+ activeMenuItemSibling.style.top = `${panelElementOffset}px`;
+ this.showBackdropShadow('open', backdropOffset);
+ }
// Position submenu block under the activated top menu item.
const menuPanelLeftPosition = activeMenuItem.offsetLeft - this._submenuLeftMargin;
@@ -203,7 +213,6 @@ export class HyDesktopMenuLinks {
this.isDesktopMenuOpen = false;
this.currenOpenMenuId = 0;
this.showBackdropShadow();
- this.handleScrollLock();
this.clearPanelItemsStatus(fadeOut);
clearTimeout(this._hoverTimer);
}
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index 9d2298e3f575ec2a789b7593b9b2b47bb27a534c..8395afe73fd1ddc6ce5c213b18c6973417c2ee43 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -23,6 +23,7 @@
| Event | Description | Type |
| ------------------- | ----------- | ------------------ |
+| `headerScrollDown` | | `CustomEvent<any>` |
| `headerScrollUp` | | `CustomEvent<any>` |
| `menuMobileToggled` | | `CustomEvent<any>` |
@@ -51,7 +52,9 @@ graph TD;
hy-menu-language --> hy-icon
hy-site-search --> hy-icon
hy-site-search --> hy-search-field
+ hy-site-search --> hy-paragraph-text
hy-search-field --> hy-icon
+ hy-paragraph-text --> hy-box
style hy-site-header fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 4b4f13975e7bede3cdd2d701a3a476e228fd8bba..69c07639f8efdf49bdceade70d30d6ad26814ab7 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -3,12 +3,7 @@
}
.hy-site-header {
- align-items: center;
background-color: var(--grayscale-white);
- box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;
- display: flex;
- flex-flow: row;
- place-content: center space-between;
z-index: 99;
&--sticky-active {
@@ -38,6 +33,14 @@
&--sticky-hidden {
top: 0;
}
+}
+
+.hy-site-header__content {
+ align-items: center;
+ box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;
+ display: flex;
+ flex-flow: row;
+ place-content: center space-between;
@include breakpoint($narrow) {
align-content: center;
@@ -55,125 +58,125 @@
@include breakpoint($xlarge) {
height: 112px;
}
+}
- &__logo-container {
- color: var(--brand-main-nearly-black);
- margin: 16px 8px;
-
- @include breakpoint($narrow) {
- margin: 16px 16px 16px 28px;
- }
+.hy-site-header__logo-container {
+ color: var(--brand-main-nearly-black);
+ margin: 16px 8px;
- @include breakpoint($wide) {
- margin: 16px 24px;
- }
-
- @include breakpoint($extrawide) {
- margin: 16px;
- }
+ @include breakpoint($narrow) {
+ margin: 16px 16px 16px 28px;
+ }
- &:hover {
- color: var(--brand-main);
- a,
- span {
- color: var(--brand-main) !important;
- }
- svg {
- fill: var(--brand-main);
- }
- }
+ @include breakpoint($wide) {
+ margin: 16px 24px;
}
- &__menu-container {
- align-items: center;
- display: flex;
- z-index: 510;
+ @include breakpoint($extrawide) {
+ margin: 16px;
}
- &__panel {
- background: var(--grayscale-white);
- bottom: 0;
- overflow: hidden;
- padding: 0;
- position: fixed;
- right: 0;
- top: 0;
- transform: translateX(100%);
- transition: 0.3s;
- visibility: hidden;
- width: 0;
-
- &.is-open {
- padding: 20px;
- transform: translateX(0);
- visibility: visible;
- width: 90%;
- z-index: 100;
-
- @include breakpoint($narrow) {
- width: 400px;
- }
+ &:hover {
+ color: var(--brand-main);
+ a,
+ span {
+ color: var(--brand-main) !important;
+ }
+ svg {
+ fill: var(--brand-main);
}
}
+}
- &__panel-toggle {
- background: transparent;
- border: 0 none;
- padding: 15px 16px 15px 12px;
+.hy-site-header__menu-container {
+ align-items: center;
+ display: flex;
+ z-index: 510;
+}
- @include breakpoint($narrow) {
- padding: 15px 28px 15px 15px;
- }
- @include breakpoint($wide) {
- padding: 15px 28px 15px 6px;
- }
+.hy-site-header__panel {
+ background: var(--grayscale-white);
+ bottom: 0;
+ overflow: hidden;
+ padding: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ transform: translateX(100%);
+ transition: 0.3s;
+ visibility: hidden;
+ width: 0;
- &.is-open {
- position: fixed;
- right: 0;
- top: 32px;
- transform: translateY(-50%);
- z-index: 101;
+ &.is-open {
+ padding: 20px;
+ transform: translateX(0);
+ visibility: visible;
+ width: 90%;
+ z-index: 100;
- @include breakpoint($narrow) {
- top: 40px;
- }
+ @include breakpoint($narrow) {
+ width: 400px;
}
+ }
+}
- &__label {
- @include font-weight($bold);
- align-items: center;
- color: var(--grayscale-black);
- display: flex;
- flex-direction: row;
- font-family: var(--main-font-family);
- font-size: 0;
- text-transform: uppercase;
+.hy-site-header__panel-toggle {
+ background: transparent;
+ border: 0 none;
+ padding: 15px 16px 15px 12px;
- @include breakpoint($narrow) {
- @include font-size(15px, 16px);
- text-transform: uppercase;
- }
+ @include breakpoint($narrow) {
+ padding: 15px 28px 15px 15px;
+ }
+ @include breakpoint($wide) {
+ padding: 15px 28px 15px 6px;
+ }
- svg {
- height: 24px;
- width: 24px;
+ &.is-open {
+ position: fixed;
+ right: 0;
+ top: 32px;
+ transform: translateY(-50%);
+ z-index: 101;
- @include breakpoint($narrow) {
- width: 20px;
- }
- }
+ @include breakpoint($narrow) {
+ top: 40px;
}
}
+}
- &__menu-label {
- @include font-size(14px, 24px);
- @include font-weight($bold);
- font-family: var(--main-font-family);
- letter-spacing: -0.45px;
- padding-right: 2px;
+.hy-site-header__panel-toggle__label {
+ @include font-weight($bold);
+ align-items: center;
+ color: var(--grayscale-black);
+ display: flex;
+ flex-direction: row;
+ font-family: var(--main-font-family);
+ font-size: 0;
+ text-transform: uppercase;
+
+ @include breakpoint($narrow) {
+ @include font-size(15px, 16px);
text-transform: uppercase;
}
+
+ svg {
+ height: 24px;
+ width: 24px;
+
+ @include breakpoint($narrow) {
+ width: 20px;
+ }
+ }
+}
+
+.hy-site-header__menu-label {
+ @include font-size(14px, 24px);
+ @include font-weight($bold);
+ font-family: var(--main-font-family);
+ letter-spacing: -0.45px;
+ padding-right: 2px;
+ text-transform: uppercase;
}
.hy-backdrop {
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 8d3945e83607d9ef49b01065aed2fa321a486ac1..50c8d71e205b09b105900c7f89d3ca32e6ed87cb 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -46,6 +46,7 @@ export class SiteHeader {
@State() isDesktopMenuOpen: boolean = false;
@Event() headerScrollUp: EventEmitter;
+ @Event() headerScrollDown: EventEmitter;
@Event() menuMobileToggled: EventEmitter;
private ro: ResizeObserver;
@@ -85,7 +86,7 @@ export class SiteHeader {
// Pass the dataMenuLanguage prop to menu component.
this.el.children[0].setAttribute('data-menu-language', this.dataMenuLanguage);
- this.navbarHeight = this.el.getClientRects()[0].height;
+ this.navbarHeight = this.el.getBoundingClientRect().height;
}
componentWillLoad() {
@@ -113,6 +114,9 @@ export class SiteHeader {
this.el.children[0].setAttribute('logo-url', this.logoUrl);
this.el.children[0].setAttribute('menu-button-submenu-expand', this.menuLabels['expand']);
this.el.children[0].setAttribute('menu-button-breadcrumb-return', this.menuLabels['return']);
+ this.el.children[0].setAttribute('menu-button-breadcrumb-home', this.menuLabels['home']);
+ this.el.children[0].setAttribute('menu-button-breadcrumb-main', this.menuLabels['main']);
+ this.el.children[0].setAttribute('menu-button-breadcrumb-logourl', this.logoUrl);
this.el.children[0].setAttribute('menu-language-label-open', this.languageLabels['open']);
this.el.children[0].setAttribute('menu-language-label-close', this.languageLabels['close']);
this.el.children[0].setAttribute('label-front-page', this.menuLabels['front_page']);
@@ -130,37 +134,39 @@ export class SiteHeader {
}
hasScrolled() {
- let st = window.pageYOffset;
+ let topOffset = window.pageYOffset;
+ const bodyElementClasses = document.querySelector('body').classList;
+
if (
- document.body.classList.contains('hy-menu-sidepanel__no-scroll') ||
- document.body.classList.contains('hy-menu-sidebar__no-scroll')
+ bodyElementClasses.contains('hy-menu-sidepanel__no-scroll') ||
+ bodyElementClasses.contains('hy-menu-sidebar__no-scroll')
) {
return;
}
- if (Math.abs(this.lastScrollTop - st) <= this.delta) {
+
+ if (Math.abs(this.lastScrollTop - topOffset) <= this.delta) {
return;
}
- const bodyElementClasses = document.querySelector('body').classList;
-
let hySiteHeader = this.el.shadowRoot.querySelector('.hy-site-header') as HTMLElement;
// If current position > last position AND scrolled past navbar...
- if (st > this.lastScrollTop && st > this.navbarHeight) {
+ if (topOffset > this.lastScrollTop && topOffset > this.navbarHeight) {
// Scroll Down
- hySiteHeader.classList.add('hy-site-header--sticky-active');
- hySiteHeader.classList.add('hy-site-header--sticky-hidden');
hySiteHeader.classList.remove('hy-site-header--sticky-visible');
hySiteHeader.classList.remove('has-toolbar', 'has-toolbar--large');
+
+ // Close Search panel
+ //CludoSayt.hide();
+ this.headerScrollDown.emit();
} else {
// Scroll Up
- if (st < this.el.offsetTop + this.navbarHeight) {
+ if (topOffset < this.el.offsetTop + this.navbarHeight) {
hySiteHeader.classList.remove('hy-site-header--sticky-active');
hySiteHeader.classList.remove('hy-site-header--sticky-visible');
hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
hySiteHeader.classList.remove('has-toolbar', 'has-toolbar--large');
// Close desktop menu panel if it's open.
- this.headerScrollUp.emit();
} else {
hySiteHeader.classList.add('hy-site-header--sticky-active');
hySiteHeader.classList.remove('hy-site-header--sticky-hidden');
@@ -175,7 +181,8 @@ export class SiteHeader {
}
}
}
- this.lastScrollTop = st;
+
+ this.lastScrollTop = topOffset;
}
componentDidUnload() {
@@ -208,36 +215,38 @@ export class SiteHeader {
return [
<header class={classAttributes.join(' ')}>
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
- <div class={'hy-site-header__logo-container'}>
- <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
- </div>
+ <div class="hy-site-header__content">
+ <div class={'hy-site-header__logo-container'}>
+ <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ </div>
- <hy-desktop-menu-links data-desktop-links={this.dataDesktopLinks}></hy-desktop-menu-links>
-
- <div class={'menu--secondary'}>
- <hy-menu-language
- class={'menu--secondary__item is-first'}
- is-mobile={false}
- data-menu-language={this.dataMenuLanguage}
- labels={this.languageLabels}
- />
- <hy-site-search
- class={'menu--secondary__item'}
- size={14}
- color={ColorVariant.black}
- show-label={true}
- labels={this.searchLabels}
- search-labels={this.dataSiteSearchLabels}
- search-tools={this.dataSearchTools}
- />
- {this.donateLink.map((i) => {
- return (
- <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
- <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
- <span class={'hy-link__donate__label'}>{i.label}</span>
- </a>
- );
- })}
+ <hy-desktop-menu-links data-desktop-links={this.dataDesktopLinks}></hy-desktop-menu-links>
+
+ <div class={'menu--secondary'}>
+ <hy-menu-language
+ class={'menu--secondary__item is-first'}
+ is-mobile={false}
+ data-menu-language={this.dataMenuLanguage}
+ labels={this.languageLabels}
+ />
+ <hy-site-search
+ class={'menu--secondary__item'}
+ size={14}
+ color={ColorVariant.black}
+ show-label={true}
+ labels={this.searchLabels}
+ search-labels={this.dataSiteSearchLabels}
+ search-tools={this.dataSearchTools}
+ />
+ {this.donateLink.map((i) => {
+ return (
+ <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
+ <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
+ <span class={'hy-link__donate__label'}>{i.label}</span>
+ </a>
+ );
+ })}
+ </div>
</div>
</header>,
];
@@ -245,70 +254,72 @@ export class SiteHeader {
return (
<header class={classAttributes.join(' ')}>
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
- <div class={'hy-site-header__logo-container'}>
- <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
- </div>
- <div class={'menu--secondary'}>
- <hy-menu-language
- class={'menu--secondary__item is-first'}
- is-mobile={false}
- data-menu-language={this.dataMenuLanguage}
- labels={this.languageLabels}
- />
- <hy-site-search
- class={'menu--secondary__item'}
- size={14}
- color={ColorVariant.black}
- show-label={true}
- labels={this.searchLabels}
- search-labels={this.dataSiteSearchLabels}
- search-tools={this.dataSearchTools}
- />
- {this.donateLink.map((i) => {
- return (
- <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
- <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
- <span class={'hy-link__donate__label'}>{i.label}</span>
- </a>
- );
- })}
- </div>
- <div class={'hy-site-header__menu-container'}>
- <span
- class={{
- 'hy-site-header__menu-label': true,
- 'is-visible': this.isMenuOpen,
- }}
- >
- {this.menuLabel}
- </span>
- <button
- onClick={() => this.mobileMenuToggle()}
- class={{
- 'hy-site-header__panel-toggle': true,
- 'is-open': this.isMenuOpen,
- }}
- aria-label={this.isMenuOpen ? this.menuLabels['close'] : this.menuLabels['open']}
- >
- {this.isMenuOpen ? (
- <span class="hy-site-header__panel-toggle__label">
- {this.menuLabelClose}
- <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
- </span>
- ) : (
- <span class="hy-site-header__panel-toggle__label">
- {this.menuLabelOpen}
- <hy-icon icon={'hy-icon-hamburger'} size={20} fill={ColorVariant.black} />
- </span>
- )}
- </button>
- <div
- class={{
- 'is-open': this.isMenuOpen,
- 'hy-site-header__panel': true,
- }}
- >
- <slot name={'menu'} />
+ <div class="hy-site-header__content">
+ <div class={'hy-site-header__logo-container'}>
+ <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ </div>
+ <div class={'menu--secondary'}>
+ <hy-menu-language
+ class={'menu--secondary__item is-first'}
+ is-mobile={false}
+ data-menu-language={this.dataMenuLanguage}
+ labels={this.languageLabels}
+ />
+ <hy-site-search
+ class={'menu--secondary__item'}
+ size={14}
+ color={ColorVariant.black}
+ show-label={true}
+ labels={this.searchLabels}
+ search-labels={this.dataSiteSearchLabels}
+ search-tools={this.dataSearchTools}
+ />
+ {this.donateLink.map((i) => {
+ return (
+ <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
+ <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
+ <span class={'hy-link__donate__label'}>{i.label}</span>
+ </a>
+ );
+ })}
+ </div>
+ <div class={'hy-site-header__menu-container'}>
+ <span
+ class={{
+ 'hy-site-header__menu-label': true,
+ 'is-visible': this.isMenuOpen,
+ }}
+ >
+ {this.menuLabel}
+ </span>
+ <button
+ onClick={() => this.mobileMenuToggle()}
+ class={{
+ 'hy-site-header__panel-toggle': true,
+ 'is-open': this.isMenuOpen,
+ }}
+ aria-label={this.isMenuOpen ? this.menuLabels['close'] : this.menuLabels['open']}
+ >
+ {this.isMenuOpen ? (
+ <span class="hy-site-header__panel-toggle__label">
+ {this.menuLabelClose}
+ <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
+ </span>
+ ) : (
+ <span class="hy-site-header__panel-toggle__label">
+ {this.menuLabelOpen}
+ <hy-icon icon={'hy-icon-hamburger'} size={20} fill={ColorVariant.black} />
+ </span>
+ )}
+ </button>
+ <div
+ class={{
+ 'is-open': this.isMenuOpen,
+ 'hy-site-header__panel': true,
+ }}
+ >
+ <slot name={'menu'} />
+ </div>
</div>
</div>
</header>
@@ -317,46 +328,48 @@ export class SiteHeader {
return (
<header class={classAttributes.join(' ')}>
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
- <div class={'hy-site-header__logo-container'}>
- <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
- </div>
- <div class={'hy-site-header__menu-container'}>
- <hy-site-search
- class={'menu--secondary__item'}
- size={14}
- color={ColorVariant.black}
- show-label={true}
- labels={this.searchLabels}
- search-labels={this.dataSiteSearchLabels}
- search-tools={this.dataSearchTools}
- />
- <button
- onClick={() => this.mobileMenuToggle()}
- class={{
- 'hy-site-header__panel-toggle': true,
- 'is-open': this.isMenuOpen,
- }}
- aria-label={this.isMenuOpen ? this.menuLabels['close'] : this.menuLabels['open']}
- >
- {this.isMenuOpen ? (
- <span class="hy-site-header__panel-toggle__label">
- {this.menuLabelClose}
- <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
- </span>
- ) : (
- <span class="hy-site-header__panel-toggle__label">
- {this.menuLabelOpen}
- <hy-icon icon={'hy-icon-hamburger'} size={20} fill={ColorVariant.black} />
- </span>
- )}
- </button>
- <div
- class={{
- 'is-open': this.isMenuOpen,
- 'hy-site-header__panel': true,
- }}
- >
- <slot name={'menu'} />
+ <div class="hy-site-header__content">
+ <div class={'hy-site-header__logo-container'}>
+ <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ </div>
+ <div class={'hy-site-header__menu-container'}>
+ <hy-site-search
+ class={'menu--secondary__item'}
+ size={14}
+ color={ColorVariant.black}
+ show-label={true}
+ labels={this.searchLabels}
+ search-labels={this.dataSiteSearchLabels}
+ search-tools={this.dataSearchTools}
+ />
+ <button
+ onClick={() => this.mobileMenuToggle()}
+ class={{
+ 'hy-site-header__panel-toggle': true,
+ 'is-open': this.isMenuOpen,
+ }}
+ aria-label={this.isMenuOpen ? this.menuLabels['close'] : this.menuLabels['open']}
+ >
+ {this.isMenuOpen ? (
+ <span class="hy-site-header__panel-toggle__label">
+ {this.menuLabelClose}
+ <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
+ </span>
+ ) : (
+ <span class="hy-site-header__panel-toggle__label">
+ {this.menuLabelOpen}
+ <hy-icon icon={'hy-icon-hamburger'} size={20} fill={ColorVariant.black} />
+ </span>
+ )}
+ </button>
+ <div
+ class={{
+ 'is-open': this.isMenuOpen,
+ 'hy-site-header__panel': true,
+ }}
+ >
+ <slot name={'menu'} />
+ </div>
</div>
</div>
</header>
diff --git a/src/components/site-header/site-search/readme.md b/src/components/site-header/site-search/readme.md
index 31c492284a89e15942a930a602d2a3b9192d134c..bf84fb50cd608d7d05876503a6179572ac22eece 100644
--- a/src/components/site-header/site-search/readme.md
+++ b/src/components/site-header/site-search/readme.md
@@ -31,6 +31,7 @@
- [hy-icon](../../icon)
- [hy-search-field](../../hy-search-field)
+- [hy-paragraph-text](../../paragraph-text)
### Graph
@@ -38,7 +39,9 @@
graph TD;
hy-site-search --> hy-icon
hy-site-search --> hy-search-field
+ hy-site-search --> hy-paragraph-text
hy-search-field --> hy-icon
+ hy-paragraph-text --> hy-box
hy-site-header --> hy-site-search
style hy-site-search fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/site-header/site-search/site-search.tsx b/src/components/site-header/site-search/site-search.tsx
index 3c9c8f76173064b23f22f34690a1e8e434571c18..41fe42e726f6494f2d1507258a7e1bc69bb79f32 100644
--- a/src/components/site-header/site-search/site-search.tsx
+++ b/src/components/site-header/site-search/site-search.tsx
@@ -71,21 +71,35 @@ export class SiteSearch {
// CLose the search panel if user opens the desktop menu panel.
@Listen('menuDesktopToggled', {target: 'document'})
desktopMenuToggled() {
- this.isSearchPanelOpen = false;
- this.showBackdropShadow();
+ this.closeSearchPanel();
}
// CLose the search panel if user opens the mobile menu panel.
@Listen('menuMobileToggled', {target: 'document'})
mobileMenuToggled() {
- this.isSearchPanelOpen = false;
- this.showBackdropShadow();
+ this.closeSearchPanel();
}
// CLose the search panel if user opens the language menu.
@Listen('menuLanguageToggled', {target: 'document'})
menuLanguageToggled() {
+ this.closeSearchPanel();
+ }
+
+ // CLose the search panel on Scroll down.
+ @Listen('headerScrollDown', {target: 'document'})
+ headerScrollDown() {
+ this.closeSearchPanel();
+ }
+
+ closeSearchPanel() {
this.isSearchPanelOpen = false;
+
+ let cludoSayt = document.querySelectorAll('stencil-cludo-sayt')[0] as HTMLElement;
+ if (cludoSayt) {
+ cludoSayt.classList.add('hidden');
+ }
+
this.showBackdropShadow();
}
@@ -105,6 +119,12 @@ export class SiteSearch {
const searchPanel = this.el.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;
searchPanel.style.top = headerHeight;
+ // Remove hidden class from cludo suggestions
+ let cludoSayt = document.querySelectorAll('stencil-cludo-sayt')[0] as HTMLElement;
+ if (cludoSayt) {
+ cludoSayt.classList.remove('hidden');
+ }
+
// Add shadow backdrop
let rect = searchPanel.getBoundingClientRect();
@@ -119,7 +139,7 @@ export class SiteSearch {
searchInput.focus();
});
} else {
- this.showBackdropShadow();
+ this.closeSearchPanel();
}
event.stopPropagation();
}
@@ -142,11 +162,6 @@ export class SiteSearch {
}
}
- handleSearchPanelClose() {
- this.isSearchPanelOpen = false;
- this.showBackdropShadow();
- }
-
render() {
return (
<Host
@@ -182,13 +197,30 @@ export class SiteSearch {
<div class="description">{this.searchDescriptionLabel}</div>
</div>
</div>
- <div class="site-search__panel__input">
- <hy-search-field input-id="search" />
- </div>
- <div class="site-search__panel__results">
- <div class="filters"></div>
- <div class="results"></div>
+ <div id="cludo-search-results" class="container_12">
+ <div class="search-banner"></div>
+ <div class="search-filters search-filters-mobile"></div>
+
+ <div class="col-md-12">
+ <div style={{margin: '20px 0 32px'}} id="cludo-search-content-form">
+ <hy-search-field input-id="search" label=""></hy-search-field>
+ </div>
+ </div>
+
+ <div class="col-md-3">
+ <div class="search-filters" aria-controls="search-results"></div>
+ </div>
+ <div class="col-md-9">
+ <div class="search-results-container">
+ <hy-paragraph-text>
+ <div class="search-result-count"></div>
+ </hy-paragraph-text>
+ <div class="search-did-you-mean" role="Complementary"></div>
+ <div class="search-results" role="region" id="search-results" aria-live="polite"></div>
+ </div>
+ </div>
</div>
+
{this._searchTools && this._searchTools.length > 0 && (
<div class="site-search__panel__tools">
<div class="title">{this.searchToolsLabel}</div>
@@ -207,7 +239,7 @@ export class SiteSearch {
</div>
)}
<button
- onClick={() => this.handleSearchPanelClose()}
+ onClick={() => this.closeSearchPanel()}
class={{
'site-search__panel__panel-toggle': true,
}}