diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 64c4a38520662582025947aa687f3b20336e3417..0fc9e7f0760a6620a04cf43ee0494a1adedc3b69 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -218,12 +218,13 @@ export class SiteHeader {
switch (this.menuType) {
case MenuType.desktop:
+ // Larger than 1200px screens
return [
<header class={classAttributes.join(' ')}>
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
{this.isGroup && (
<div class="hy-site-header__content-group">
- <div class={'hy-site-header__logo-container'}>
+ <div class={'hy-site-header__logo-container group '}>
<hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
</div>
@@ -233,15 +234,15 @@ export class SiteHeader {
data-main-menu={this.dataMainMenuLinks}
/>
- <div class={'menu--secondary'}>
+ <div class={'menu--secondary menu--secondary--group'}>
<hy-menu-language
- class={'menu--secondary__item is-first'}
+ class={'menu--secondary__item is-first group'}
is-mobile={false}
data-menu-language={this.dataMenuLanguage}
labels={this.languageLabels}
/>
<hy-site-search
- class={'menu--secondary__item'}
+ class={'menu--secondary__item group'}
size={14}
color={ColorVariant.black}
show-label={true}
@@ -251,9 +252,9 @@ export class SiteHeader {
/>
{this.donateLink.map((i) => {
return (
- <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
+ <a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
<hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
- <span class={'hy-link__donate__label'}>{i.label}</span>
+ <span class={'hy-link__donate__label group'}>{i.label}</span>
</a>
);
})}
@@ -263,7 +264,7 @@ export class SiteHeader {
<div class="hy-site-header__content">
<div class={'hy-site-header__logo-container'}>
{this.isGroup ? (
- <div>{this.logoLabel}</div>
+ <div class={'group'}>{this.logoLabel}</div>
) : (
<hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
)}
@@ -302,38 +303,84 @@ export class SiteHeader {
</header>,
];
case MenuType.tablet:
+ // 960px-1200px screens
return (
<header class={classAttributes.join(' ')}>
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
- <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'}
+ {this.isGroup && (
+ <div class="hy-site-header__content-group">
+ <div class={'hy-site-header__logo-container group '}>
+ <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ </div>
+
+ <hy-menu-main-group
+ //className={'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}
+ data-main-menu={this.dataMainMenuLinks}
/>
- {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 class={'menu--secondary menu--secondary--group'}>
+ <hy-menu-language
+ class={'menu--secondary__item is-first group'}
+ is-mobile={false}
+ data-menu-language={this.dataMenuLanguage}
+ labels={this.languageLabels}
+ />
+ <hy-site-search
+ class={'menu--secondary__item group'}
+ 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 group'} href={i.url}>
+ <hy-icon icon={'hy-icon-heart-support'} size={14} fill={ColorVariant.black} />
+ <span class={'hy-link__donate__label group'}>{i.label}</span>
+ </a>
+ );
+ })}
+ </div>
</div>
+ )}
+ <div class="hy-site-header__content">
+ <div class={'hy-site-header__logo-container'}>
+ {this.isGroup ? (
+ <div class={'group'}>{this.logoLabel}</div>
+ ) : (
+ <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ )}
+ </div>
+ {!this.isGroup && (
+ <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={{
@@ -376,23 +423,56 @@ export class SiteHeader {
</header>
);
case MenuType.mobile:
+ // Smaller than 960px screens
return (
<header class={classAttributes.join(' ')}>
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
+ {this.isGroup && (
+ <div class="hy-site-header__content-group">
+ <div class={'hy-site-header__logo-container group '}>
+ <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ </div>
+
+ <hy-menu-main-group
+ //className={'menu--secondary__item is-first'}
+ is-mobile={true}
+ data-main-menu={this.dataMainMenuLinks}
+ />
+
+ <div class={'menu--secondary menu--secondary--group'}>
+ <hy-site-search
+ class={'menu--secondary__item group'}
+ size={14}
+ color={ColorVariant.black}
+ show-label={true}
+ labels={this.searchLabels}
+ search-labels={this.dataSiteSearchLabels}
+ search-tools={this.dataSearchTools}
+ />
+ </div>
+ </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} />
+ {this.isGroup ? (
+ <div class={'group'}>{this.logoLabel}</div>
+ ) : (
+ <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}
- />
+ {!this.isGroup && (
+ <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={{