From c08c3ca9ba23697524053d2e47c5aa36fa4c0e73 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Tue, 17 Nov 2020 21:41:19 +0200
Subject: [PATCH] desktop menu nav, functionality, v.2
---
src/components.d.ts | 2 +-
.../hy-desktop-menu-links.scss | 3 -
.../hy-desktop-menu-links.tsx | 67 ---------
.../hy-desktop-menu-panel.scss | 7 -
.../hy-desktop-menu-panel.tsx | 17 ---
src/components/icon/readme.md | 4 +
.../navigation/menu-item/menu-item.scss | 44 ++++++
.../navigation/menu-item/menu-item.tsx | 11 ++
.../menu-level-container.scss | 16 ++-
.../menu-level-container.tsx | 3 +-
.../hy-desktop-menu-links.scss | 41 ++++++
.../hy-desktop-menu-links.tsx | 136 ++++++++++++++++++
.../hy-desktop-menu-links/readme.md | 7 +-
.../hy-desktop-menu-panel.scss | 26 ++++
.../hy-desktop-menu-panel.tsx | 51 +++++++
.../hy-desktop-menu-panel/readme.md | 7 +-
src/components/site-header/readme.md | 6 +-
src/components/site-header/site-header.scss | 9 --
src/components/site-header/site-header.tsx | 41 ++++++
19 files changed, 386 insertions(+), 112 deletions(-)
delete mode 100644 src/components/hy-desktop-menu-links/hy-desktop-menu-links.scss
delete mode 100644 src/components/hy-desktop-menu-links/hy-desktop-menu-links.tsx
delete mode 100644 src/components/hy-desktop-menu-panel/hy-desktop-menu-panel.scss
delete mode 100644 src/components/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
create mode 100644 src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
create mode 100644 src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
rename src/components/{ => site-header}/hy-desktop-menu-links/readme.md (85%)
create mode 100644 src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.scss
create mode 100644 src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
rename src/components/{ => site-header}/hy-desktop-menu-panel/readme.md (73%)
diff --git a/src/components.d.ts b/src/components.d.ts
index a6e62138..46deb148 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -29,7 +29,7 @@ import {
ProcessFlowBoxVariants,
SiteLogoSize,
} from './utils/utils';
-import {DesktopLinks} from './components/hy-desktop-menu-links/hy-desktop-menu-links';
+import {DesktopLinks} from './components/site-header/hy-desktop-menu-links/hy-desktop-menu-links';
import {FooterBaseLinks, FooterBaseSome} from './components/footer/hy-footer-base/hy-footer-base';
import {FooterInfoLinks} from './components/footer/hy-footer-info/hy-footer-info';
import {KeyFigureValue} from './components/hy-key-figure-group/hy-key-figure-group';
diff --git a/src/components/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/hy-desktop-menu-links/hy-desktop-menu-links.scss
deleted file mode 100644
index 5d4e87f3..00000000
--- a/src/components/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
- display: block;
-}
diff --git a/src/components/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/hy-desktop-menu-links/hy-desktop-menu-links.tsx
deleted file mode 100644
index 4a9e3c96..00000000
--- a/src/components/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-export interface DesktopLinks {
- label: string;
- url: string;
- menuLinkId: string;
-}
-
-import {Component, h, Element, Prop, State, Watch} from '@stencil/core';
-
-@Component({
- tag: 'hy-desktop-menu-links',
- styleUrl: 'hy-desktop-menu-links.scss',
- shadow: true,
-})
-export class HyDesktopMenuLinks {
- @Element() el: HTMLElement;
- /*
- First level menu links to be displayed on Desktop screens.
- * */
- @Prop() dataDesktopLinks: DesktopLinks[] | string;
- private _dataDesktopLinks: DesktopLinks[];
- @State() firstLevelLinksList: Array<object> = [];
-
- @Watch('dataDesktopLinks') dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
- this._dataDesktopLinks = typeof data === 'string' ? JSON.parse(data) : data;
- }
-
- componentWillLoad() {
- this.dataDesktopLinksWatcher(this.dataDesktopLinks);
- }
-
- handleMenuDesktopHover(id) {
- console.log(id);
-
- let panel = (this.el.parentElement as HTMLElement).nextElementSibling;
- if (panel) {
- //@todo hide/show panel here
-
- //@todo show proper subtree on panel based on given menu-link-id
- console.log(document.querySelectorAll('[trigger-item="' + id + '"]')[0]);
- /*
- <hy-menu-item menu-link-id="538c248e4fd3cde8e72463b2387b571f" url="/en/lets-research" label="Research" data-drupal-link-system-path="node/90" class="hy-menu-item hy-menu-item--desktop hydrated" depth="1" menu-type="desktop" menu-button-submenu-expand="Expand submenu for">
- * */
- /*
- <hy-menu-level-container menu-level="2" aria-expanded="false" class="hy-menu-level-container hy-menu-level-container--level-2 hy-menu-level-container--mobile hydrated" tabindex="-1" depth="2" trigger-item="68f5a4fa9dae69bb944a173f3f8af88f"><!----><hy-menu-item menu-type="mobile" class="hy-menu-item hy-menu-item--mobile hydrated" depth="2">
- * */
- }
- }
-
- componentDidLoad() {
- const links = this._dataDesktopLinks as Array<DesktopLinks>;
- let firstLevelLinksList = [];
-
- for (let i = 0; i < links.length; i++) {
- let className = 'desktop-menu-link-' + links[i].menuLinkId;
- firstLevelLinksList.push(
- <a class={className} href={links[i].url} onMouseOver={() => this.handleMenuDesktopHover(links[i].menuLinkId)}>
- {links[i].label}
- </a>
- );
- }
- this.firstLevelLinksList = firstLevelLinksList;
- }
-
- render() {
- return <div class={'hy-site-header__menu-desktop'}>{this.firstLevelLinksList}</div>;
- }
-}
diff --git a/src/components/hy-desktop-menu-panel/hy-desktop-menu-panel.scss b/src/components/hy-desktop-menu-panel/hy-desktop-menu-panel.scss
deleted file mode 100644
index 7fda1ffc..00000000
--- a/src/components/hy-desktop-menu-panel/hy-desktop-menu-panel.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-:host {
- display: block;
-}
-
-.hy-desktop-menu-panel {
- background-color: cyan;
-}
diff --git a/src/components/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx b/src/components/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
deleted file mode 100644
index c045724e..00000000
--- a/src/components/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import {Component, h} from '@stencil/core';
-
-@Component({
- tag: 'hy-desktop-menu-panel',
- styleUrl: 'hy-desktop-menu-panel.scss',
- shadow: true,
-})
-export class HyDesktopMenuPanel {
- render() {
- const classAttributes = ['hy-desktop-menu-panel'].join(' ');
- return (
- <div class={classAttributes}>
- <slot></slot>
- </div>
- );
- }
-}
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 1a82cd62..2289e926 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -19,6 +19,8 @@
- [hy-button](../button)
- [hy-cta-button](../cta-button)
- [hy-cta-link](../cta-link)
+- [hy-desktop-menu-links](../site-header/hy-desktop-menu-links)
+- [hy-desktop-menu-panel](../site-header/hy-desktop-menu-panel)
- [hy-footer-action](../footer/hy-footer-action)
- [hy-footer-base](../footer/hy-footer-base)
- [hy-footer-link-item](../footer/hy-footer-link-item)
@@ -44,6 +46,8 @@ graph TD;
hy-button --> hy-icon
hy-cta-button --> hy-icon
hy-cta-link --> hy-icon
+ hy-desktop-menu-links --> hy-icon
+ hy-desktop-menu-panel --> hy-icon
hy-footer-action --> hy-icon
hy-footer-base --> hy-icon
hy-footer-link-item --> hy-icon
diff --git a/src/components/navigation/menu-item/menu-item.scss b/src/components/navigation/menu-item/menu-item.scss
index 830797c2..00dd904c 100644
--- a/src/components/navigation/menu-item/menu-item.scss
+++ b/src/components/navigation/menu-item/menu-item.scss
@@ -1,3 +1,12 @@
+:host(.hy-menu-item--desktop.hy-menu-item--is-active) {
+ display: block;
+ visibility: visible;
+}
+:host(.hy-menu-item--desktop:not(.hy-menu-item--is-active)) {
+ display: none;
+ visibility: hidden;
+}
+
// Mobile.
:host(.hy-menu-item--mobile) {
background-color: var(--grayscale-white);
@@ -37,6 +46,34 @@
visibility: visible !important;
}
+:host(.hy-menu-item--desktop[depth='1']) {
+ a {
+ @include font-size(18px, 18px); //@todo check font size
+ border: 1px solid orange;
+ background-color: var(--grayscale-background-box);
+ margin-bottom: 8px; //@todo check margin
+ padding-left: 32px;
+ padding-right: 32px;
+ text-transform: none;
+
+ .hy-menu-item__label {
+ border: none;
+ }
+ }
+ a:before {
+ }
+}
+:host(.hy-menu-item--desktop[depth='2']) {
+ a {
+ @include font-size(14px, 14px); //@todo check font size
+ padding-left: 32px;
+ padding-right: 32px;
+ text-transform: none;
+ }
+ a:before {
+ }
+}
+
:host(.hy-menu-item--desktop) {
border: 0 none;
--menu-item-display: none;
@@ -125,6 +162,13 @@ a {
}
}
+ &.is-heading {
+ display: inherit;
+ @include breakpoint($extrawide) {
+ display: none;
+ }
+ }
+
&.hy-menu-item--desktop {
@include breakpoint($medium) {
@include font-size(14px, 14px);
diff --git a/src/components/navigation/menu-item/menu-item.tsx b/src/components/navigation/menu-item/menu-item.tsx
index c09ed296..da5b2dbb 100644
--- a/src/components/navigation/menu-item/menu-item.tsx
+++ b/src/components/navigation/menu-item/menu-item.tsx
@@ -165,8 +165,19 @@ export class MenuItem {
'is-demo': this.isDemo,
}}
>
+ {this.depth == 1 && (
+ <span class="hy-menu-item__heading__icon">
+ <hy-icon icon={'hy-icon-arrow-right'} size={20} />
+ </span>
+ )}
+ {this.depth == 2 && (
+ <span class="hy-menu-item__heading__icon">
+ <hy-icon icon={'hy-icon-caret-right'} size={10} />
+ </span>
+ )}
<span class={'hy-menu-item__label'}>{this.label}</span>
</a>
+ {this.hasChildren && <slot />}
</Host>
);
case MenuType.mobile:
diff --git a/src/components/navigation/menu-level-container/menu-level-container.scss b/src/components/navigation/menu-level-container/menu-level-container.scss
index b7459214..a80d5227 100644
--- a/src/components/navigation/menu-level-container/menu-level-container.scss
+++ b/src/components/navigation/menu-level-container/menu-level-container.scss
@@ -19,14 +19,24 @@
}
&--desktop {
- align-items: center;
+ //align-items: center;
+ align-items: flex-start;
display: flex;
- flex-flow: row;
+ flex-flow: column;
+ //max-width: 500px; // ?? Ask Mikko
width: 100%;
- &:not(.hy-menu-level-container--level-1) {
+ &.is-open {
+ display: block;
+ visibility: visible;
+ }
+
+ &:not(.hy-menu-level-container--level-1):not(.hy-menu-level-container--level-2) {
display: none;
}
+ &.hy-menu-level-container--level-2 {
+ background-color: var(--grayscale-background-box);
+ }
}
&--sidenav {
diff --git a/src/components/navigation/menu-level-container/menu-level-container.tsx b/src/components/navigation/menu-level-container/menu-level-container.tsx
index 6233f212..03f77112 100644
--- a/src/components/navigation/menu-level-container/menu-level-container.tsx
+++ b/src/components/navigation/menu-level-container/menu-level-container.tsx
@@ -123,9 +123,10 @@ export class MenuLevelContainer {
switch (this.menuType) {
case MenuType.desktop:
classAttributes = [...classAttributes, 'hy-menu-level-container--desktop'];
+ //menu-type="sidenav"
return (
- <Host class={classAttributes.join(' ')}>
+ <Host class={classAttributes.join(' ')} menu-type="desktop">
<slot />
</Host>
);
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
new file mode 100644
index 00000000..8877644e
--- /dev/null
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -0,0 +1,41 @@
+:host {
+ display: block;
+}
+
+.hy-site-header {
+ &__menu-desktop {
+ align-items: center;
+ display: flex;
+ flex-flow: row;
+ width: 100%;
+
+ .desktop-menu-link {
+ color: var(--brand-main-nearly-black);
+ cursor: pointer;
+ font-family: var(--main-font-family);
+
+ @include breakpoint($medium) {
+ @include font-size(14px, 14px);
+ @include font-weight($bold);
+ border-top: 0 none;
+ padding: 10px 15px;
+ text-transform: uppercase;
+ }
+
+ @include breakpoint($extrawide) {
+ @include font-size(15px, 16px);
+ padding: 10px 8px;
+ }
+
+ @include breakpoint($overwide) {
+ @include font-size(18px, 16px);
+ padding: 10px;
+ }
+
+ &--is-active {
+ background-color: var(--grayscale-background-box);
+ padding: 52px 10px;
+ }
+ }
+ }
+}
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
new file mode 100644
index 00000000..3dd11eae
--- /dev/null
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -0,0 +1,136 @@
+export interface DesktopLinks {
+ label: string;
+ url: string;
+ menuLinkId: string;
+}
+
+import {Component, h, Element, Listen, Prop, State, Watch} from '@stencil/core';
+
+@Component({
+ tag: 'hy-desktop-menu-links',
+ styleUrl: 'hy-desktop-menu-links.scss',
+ shadow: true,
+})
+export class HyDesktopMenuLinks {
+ @Element() el: HTMLElement;
+ /*
+ First level menu links to be displayed on Desktop screens.
+ * */
+ @Prop() dataDesktopLinks: DesktopLinks[] | string;
+ private _dataDesktopLinks: DesktopLinks[];
+ @State() firstLevelLinksList: Array<object> = [];
+
+ @Watch('dataDesktopLinks') dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
+ this._dataDesktopLinks = typeof data === 'string' ? JSON.parse(data) : data;
+ }
+
+ componentWillLoad() {
+ this.dataDesktopLinksWatcher(this.dataDesktopLinks);
+ }
+
+ closeDesktopMenuPanel() {
+ let hySiteHeader = document.querySelectorAll('hy-site-header')[0];
+
+ // Remove is-active from desktop menu links.
+ let hyDesktopMenuLinks = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-links');
+ let desktopMenuItems = hyDesktopMenuLinks.shadowRoot.querySelectorAll('.desktop-menu-link');
+ desktopMenuItems.forEach((item) => {
+ (item as HTMLElement).classList.remove('desktop-menu-link--is-active');
+ });
+
+ // Close desktop menu panel.
+ let hyDesktopPanel = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-panel');
+ if (hyDesktopPanel) {
+ //hide panel, remove class is-active
+ (hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
+
+ let parentMenu = document.querySelectorAll('hy-menu-level-container[menu-level="2"]');
+ if (parentMenu) {
+ const items = Array.from(parentMenu);
+ items.forEach((item) => {
+ item.classList.add('hy-menu-level-container--mobile');
+ item.classList.remove('hy-menu-level-container--desktop');
+ });
+ }
+ }
+ }
+
+ @Listen('click')
+ handleMenuDesktopLinkClick(event) {
+ this.closeDesktopMenuPanel();
+ event.stopPropagation();
+ }
+
+ handleMenuDesktopHover(id) {
+ let desktopMenuItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link');
+ desktopMenuItems.forEach((item) => {
+ (item as HTMLElement).classList.remove('desktop-menu-link--is-active');
+ });
+ let desktopMenuActivatedItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link[link-id="' + id + '"]');
+ (desktopMenuActivatedItems[0] as HTMLElement).classList.add('desktop-menu-link--is-active');
+
+ let hySiteHeader = document.querySelectorAll('hy-site-header')[0];
+ if (hySiteHeader) {
+ let hyDesktopPanel = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-panel');
+
+ if (hyDesktopPanel) {
+ //show panel, add class is-active
+ (hyDesktopPanel as HTMLElement).classList.add('hy-desktop-menu-panel--is-active');
+
+ //@todo show proper subtree on panel based on given menu-link-id
+ // Hide all menu-item that have other menu-link-id attribute value.
+ let menuItems = document.querySelectorAll('hy-site-header hy-menu-item[depth="1"]');
+ menuItems.forEach((item) => {
+ (item as HTMLElement).classList.remove('hy-menu-item--is-active');
+ });
+
+ let menuItemsLevel2 = document.querySelectorAll('hy-site-header hy-menu-item[depth="2"]');
+ menuItemsLevel2.forEach((item) => {
+ (item as HTMLElement).classList.remove('hy-menu-item--is-active');
+ });
+
+ let menuActivatedItems = document.querySelectorAll('hy-site-header hy-menu-item[menu-link-id="' + id + '"]');
+ (menuActivatedItems[0] as HTMLElement).classList.add('hy-menu-item--is-active');
+
+ let parentMenu = (menuActivatedItems[0] as HTMLElement).querySelector(
+ 'hy-menu-level-container[menu-level="2"]'
+ );
+ if (parentMenu && parentMenu.children) {
+ (parentMenu as HTMLElement).classList.remove('hy-menu-level-container--mobile');
+ (parentMenu as HTMLElement).classList.add('hy-menu-level-container--desktop');
+ const items = Array.from(parentMenu.children);
+ items.forEach((item) => {
+ item.classList.add('hy-menu-item--is-active');
+ });
+ }
+ }
+ }
+ }
+
+ componentDidLoad() {
+ const links = this._dataDesktopLinks as Array<DesktopLinks>;
+ let firstLevelLinksList = [];
+
+ for (let i = 0; i < links.length; i++) {
+ //let className = 'desktop-menu-link-' + links[i].menuLinkId;
+ let className = 'desktop-menu-link';
+ firstLevelLinksList.push(
+ <div
+ class={className}
+ link-id={links[i].menuLinkId}
+ onMouseOver={() => this.handleMenuDesktopHover(links[i].menuLinkId)}
+ >
+ {links[i].label}
+ <span class="desktop-menu-link__heading__icon">
+ <hy-icon icon={'hy-icon-caret-right'} size={10} />
+ </span>
+ </div>
+ );
+ }
+ this.firstLevelLinksList = firstLevelLinksList;
+ }
+
+ render() {
+ return <div class={'hy-site-header__menu-desktop'}>{this.firstLevelLinksList}</div>;
+ }
+}
diff --git a/src/components/hy-desktop-menu-links/readme.md b/src/components/site-header/hy-desktop-menu-links/readme.md
similarity index 85%
rename from src/components/hy-desktop-menu-links/readme.md
rename to src/components/site-header/hy-desktop-menu-links/readme.md
index 3d6ce575..97289c9d 100644
--- a/src/components/hy-desktop-menu-links/readme.md
+++ b/src/components/site-header/hy-desktop-menu-links/readme.md
@@ -12,12 +12,17 @@
### Used by
-- [hy-site-header](../site-header)
+- [hy-site-header](..)
+
+### Depends on
+
+- [hy-icon](../../icon)
### Graph
```mermaid
graph TD;
+ hy-desktop-menu-links --> hy-icon
hy-site-header --> hy-desktop-menu-links
style hy-desktop-menu-links fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.scss b/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.scss
new file mode 100644
index 00000000..aed2a965
--- /dev/null
+++ b/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.scss
@@ -0,0 +1,26 @@
+:host {
+ display: none;
+}
+:host(.hy-desktop-menu-panel--is-active) {
+ display: block;
+}
+
+.hy-desktop-menu-panel {
+ flex-direction: row;
+ justify-content: center;
+ position: relative;
+ top: 10px;
+ width: 100%;
+
+ &__desktop-menu {
+ position: relative;
+ left: 300px;
+ width: 50%;
+ }
+
+ &__panel-toggle {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ }
+}
diff --git a/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx b/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
new file mode 100644
index 00000000..0e99bfc8
--- /dev/null
+++ b/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
@@ -0,0 +1,51 @@
+import {Component, h} from '@stencil/core';
+import {ColorVariant} from '../../../utils/utils';
+
+@Component({
+ tag: 'hy-desktop-menu-panel',
+ styleUrl: 'hy-desktop-menu-panel.scss',
+ shadow: true,
+})
+export class HyDesktopMenuPanel {
+ closeDesktopMenuPanel() {
+ let hySiteHeader = document.querySelectorAll('hy-site-header')[0];
+
+ // Remove is-active from desktop menu links.
+ let hyDesktopMenuLinks = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-links');
+ let desktopMenuItems = hyDesktopMenuLinks.shadowRoot.querySelectorAll('.desktop-menu-link');
+ desktopMenuItems.forEach((item) => {
+ (item as HTMLElement).classList.remove('desktop-menu-link--is-active');
+ });
+
+ // Close desktop menu panel.
+ let hyDesktopPanel = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-panel');
+ if (hyDesktopPanel) {
+ //hide panel, remove class is-active
+ (hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
+ }
+ }
+
+ render() {
+ const classAttributes = ['hy-desktop-menu-panel'].join(' ');
+
+ return (
+ <div class={classAttributes} onMouseLeave={() => this.closeDesktopMenuPanel()}>
+ <div class="hy-desktop-menu-panel__desktop-menu">
+ <slot></slot>
+ </div>
+ <button
+ onClick={() => this.closeDesktopMenuPanel()}
+ class={{
+ 'hy-desktop-menu-panel__panel-toggle': true,
+ }}
+ aria-label="close"
+ >
+ <span class="hy-desktop-menu-panel__panel-toggle__label">
+ CLOSE
+ <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
+ </span>
+ </button>
+ </div>
+ );
+ }
+}
diff --git a/src/components/hy-desktop-menu-panel/readme.md b/src/components/site-header/hy-desktop-menu-panel/readme.md
similarity index 73%
rename from src/components/hy-desktop-menu-panel/readme.md
rename to src/components/site-header/hy-desktop-menu-panel/readme.md
index 32711eb2..51da121c 100644
--- a/src/components/hy-desktop-menu-panel/readme.md
+++ b/src/components/site-header/hy-desktop-menu-panel/readme.md
@@ -6,12 +6,17 @@
### Used by
-- [hy-site-header](../site-header)
+- [hy-site-header](..)
+
+### Depends on
+
+- [hy-icon](../../icon)
### Graph
```mermaid
graph TD;
+ hy-desktop-menu-panel --> hy-icon
hy-site-header --> hy-desktop-menu-panel
style hy-desktop-menu-panel fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index 1cc81add..119c5f02 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -21,11 +21,11 @@
### Depends on
- [hy-site-logo](site-logo)
-- [hy-desktop-menu-links](../hy-desktop-menu-links)
+- [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-panel](../hy-desktop-menu-panel)
+- [hy-desktop-menu-panel](hy-desktop-menu-panel)
### Graph
@@ -38,9 +38,11 @@ graph TD;
hy-site-header --> hy-icon
hy-site-header --> hy-desktop-menu-panel
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
+ hy-desktop-menu-panel --> 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 39a17b68..58784ad2 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -9,7 +9,6 @@
display: flex;
flex-flow: row;
place-content: center space-between;
- //position: relative;
z-index: 99;
@include breakpoint($medium) {
@@ -29,13 +28,6 @@
height: 120px;
}
- &__desktop-header {
- background-color: red;
- }
- &__menu-desktop-container {
- background-color: cyan;
- }
-
&__logo-container {
margin: 16px 8px;
@@ -98,7 +90,6 @@
padding: 10px;
position: absolute;
right: 0;
- //top: 10px;
top: 17px;
z-index: 101;
}
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index a3f5fc81..28863f1f 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -269,3 +269,44 @@ export class SiteHeader {
}
}
}
+
+/*
+<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>
+
+ <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}
+ />
+ {this.donateLink.map((i) => {
+ return (
+ <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
+ <hy-icon icon={'hy-icon-euro'} size={14} fill={ColorVariant.black} />
+ <span class={'hy-link__donate__label'}>{i.label}</span>
+ </a>
+ );
+ })}
+ </div>
+ </header>,
+
+ <header>
+ <hy-desktop-menu-panel>
+ <slot name={'menu'} />
+ </hy-desktop-menu-panel>
+ </header>
+*/
--
GitLab