From ac0916cdacd2a055caf70ff971443315559b1f25 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 1 Mar 2021 14:26:06 +0200
Subject: [PATCH] group header, v.1
---
src/components.d.ts | 2 +
src/components/site-header/readme.md | 7 +-
src/components/site-header/site-header.scss | 15 +++-
src/components/site-header/site-header.tsx | 91 +++++++++++++++------
4 files changed, 85 insertions(+), 30 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 348faa9a..7530b018 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -774,6 +774,7 @@ export namespace Components {
dataSearchTools: DesktopLinks[] | string;
dataSiteHeaderLabels: string;
dataSiteSearchLabels: string;
+ isGroup: boolean;
logoLabel?: string;
logoUrl?: string;
menuLabel: string;
@@ -2138,6 +2139,7 @@ declare namespace LocalJSX {
dataSearchTools?: DesktopLinks[] | string;
dataSiteHeaderLabels?: string;
dataSiteSearchLabels?: string;
+ isGroup?: boolean;
logoLabel?: string;
logoUrl?: string;
menuLabel?: string;
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index 8395afe7..51ee0633 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -12,6 +12,7 @@
| `dataSearchTools` | `data-search-tools` | | `DesktopLinks[] \| string` | `undefined` |
| `dataSiteHeaderLabels` | `data-site-header-labels` | | `string` | `undefined` |
| `dataSiteSearchLabels` | `data-site-search-labels` | | `string` | `undefined` |
+| `isGroup` | `is-group` | | `boolean` | `false` |
| `logoLabel` | `logo-label` | | `string` | `undefined` |
| `logoUrl` | `logo-url` | | `string` | `undefined` |
| `menuLabel` | `menu-label` | | `string` | `'Menu'` |
@@ -32,22 +33,21 @@
### Depends on
- [hy-site-logo](site-logo)
-- [hy-desktop-menu-links](hy-desktop-menu-links)
- [hy-menu-language](../navigation/menu-language)
- [hy-site-search](site-search)
- [hy-icon](../icon)
+- [hy-desktop-menu-links](hy-desktop-menu-links)
### Graph
```mermaid
graph TD;
hy-site-header --> hy-site-logo
- hy-site-header --> hy-desktop-menu-links
hy-site-header --> hy-menu-language
hy-site-header --> hy-site-search
hy-site-header --> hy-icon
+ hy-site-header --> hy-desktop-menu-links
hy-site-logo --> hy-icon
- hy-desktop-menu-links --> hy-icon
hy-menu-language --> hy-menu-language-item
hy-menu-language --> hy-icon
hy-site-search --> hy-icon
@@ -55,6 +55,7 @@ graph TD;
hy-site-search --> hy-paragraph-text
hy-search-field --> hy-icon
hy-paragraph-text --> hy-box
+ hy-desktop-menu-links --> hy-icon
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 69c07639..59587e2e 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -34,7 +34,6 @@
top: 0;
}
}
-
.hy-site-header__content {
align-items: center;
box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;
@@ -60,6 +59,20 @@
}
}
+.hy-site-header__content-group {
+ align-items: center;
+ background-color: var(--grayscale-black);
+ color: var(--grayscale-white);
+ display: flex;
+ flex-flow: row;
+ place-content: center space-between;
+
+ @include breakpoint($narrow) {
+ margin: 0 auto;
+ max-width: $fullhd;
+ }
+}
+
.hy-site-header__logo-container {
color: var(--brand-main-nearly-black);
margin: 16px 8px;
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 85b0dab7..e9c624e7 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -25,6 +25,7 @@ import {MenuType, ColorVariant, SiteLogoSize} from '../../utils/utils';
})
export class SiteHeader {
@Element() el: HTMLElement;
+ @Prop() isGroup: boolean = false;
@Prop() dataMenuLanguage: string;
@Prop() dataMenuDonate: string;
@Prop() dataSiteHeaderLabels: string;
@@ -219,38 +220,76 @@ export class SiteHeader {
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'}>
+ <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>
+ )}
<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>{this.logoLabel}</div>
+ ) : (
+ <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>
- );
- })}
- </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>
</header>,
];
--
GitLab