group header, v.1

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;

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
 ```
 

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;

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>,
         ];