Skip to content
Snippets Groups Projects
Commit d913cf79 authored by druid's avatar druid
Browse files

structure for site-header for group and default pages

parent 6c08d005
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/site-header/site-header.tsx
+ 123
− 43
View file @ d913cf79
......@@ -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={{
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment