nav desktop structure

src/components.d.ts

@@ -204,7 +204,6 @@ export namespace Components {
   interface HyDesktopMenuLinks {
     dataDesktopLinks: DesktopLinks[] | string;
   }
-  interface HyDesktopMenuPanel {}
   interface HyDocsContainer {}
   interface HyFooter {}
   interface HyFooterAction {
@@ -671,11 +670,6 @@ declare global {
     prototype: HTMLHyDesktopMenuLinksElement;
     new (): HTMLHyDesktopMenuLinksElement;
   };
-  interface HTMLHyDesktopMenuPanelElement extends Components.HyDesktopMenuPanel, HTMLStencilElement {}
-  var HTMLHyDesktopMenuPanelElement: {
-    prototype: HTMLHyDesktopMenuPanelElement;
-    new (): HTMLHyDesktopMenuPanelElement;
-  };
   interface HTMLHyDocsContainerElement extends Components.HyDocsContainer, HTMLStencilElement {}
   var HTMLHyDocsContainerElement: {
     prototype: HTMLHyDocsContainerElement;
@@ -941,7 +935,6 @@ declare global {
     'hy-cta-button': HTMLHyCtaButtonElement;
     'hy-cta-link': HTMLHyCtaLinkElement;
     'hy-desktop-menu-links': HTMLHyDesktopMenuLinksElement;
-    'hy-desktop-menu-panel': HTMLHyDesktopMenuPanelElement;
     'hy-docs-container': HTMLHyDocsContainerElement;
     'hy-footer': HTMLHyFooterElement;
     'hy-footer-action': HTMLHyFooterActionElement;
@@ -1155,7 +1148,6 @@ declare namespace LocalJSX {
   interface HyDesktopMenuLinks {
     dataDesktopLinks?: DesktopLinks[] | string;
   }
-  interface HyDesktopMenuPanel {}
   interface HyDocsContainer {}
   interface HyFooter {}
   interface HyFooterAction {
@@ -1571,7 +1563,6 @@ declare namespace LocalJSX {
     'hy-cta-button': HyCtaButton;
     'hy-cta-link': HyCtaLink;
     'hy-desktop-menu-links': HyDesktopMenuLinks;
-    'hy-desktop-menu-panel': HyDesktopMenuPanel;
     'hy-docs-container': HyDocsContainer;
     'hy-footer': HyFooter;
     'hy-footer-action': HyFooterAction;
@@ -1642,7 +1633,6 @@ declare module '@stencil/core' {
       'hy-cta-button': LocalJSX.HyCtaButton & JSXBase.HTMLAttributes<HTMLHyCtaButtonElement>;
       'hy-cta-link': LocalJSX.HyCtaLink & JSXBase.HTMLAttributes<HTMLHyCtaLinkElement>;
       'hy-desktop-menu-links': LocalJSX.HyDesktopMenuLinks & JSXBase.HTMLAttributes<HTMLHyDesktopMenuLinksElement>;
-      'hy-desktop-menu-panel': LocalJSX.HyDesktopMenuPanel & JSXBase.HTMLAttributes<HTMLHyDesktopMenuPanelElement>;
       'hy-docs-container': LocalJSX.HyDocsContainer & JSXBase.HTMLAttributes<HTMLHyDocsContainerElement>;
       'hy-footer': LocalJSX.HyFooter & JSXBase.HTMLAttributes<HTMLHyFooterElement>;
       'hy-footer-action': LocalJSX.HyFooterAction & JSXBase.HTMLAttributes<HTMLHyFooterActionElement>;

src/components/icon/readme.md

@@ -20,7 +20,6 @@
 - [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)
@@ -47,7 +46,6 @@ graph TD;
   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

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss

@@ -57,3 +57,33 @@
     }
   }
 }
+
+.hy-desktop-menu-panel {
+  display: none;
+
+  &--is-active {
+    border: 1px solid red;
+    background-color: var(--grayscale-white);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    opacity: 1;
+    position: absolute;
+    left: 0;
+    top: 90px;
+    width: 100%;
+    z-index: 510;
+  }
+
+  &__desktop-menu {
+    position: relative;
+    left: 300px;
+    width: 50%;
+  }
+
+  &__panel-toggle {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+}

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

@@ -4,6 +4,7 @@ export interface DesktopLinks {
   menuLinkId: string;
 }
 
+import {ColorVariant} from '../../../utils/utils';
 import {Component, h, Element, Listen, Prop, State, Watch} from '@stencil/core';
 
 @Component({
@@ -29,19 +30,16 @@ export class HyDesktopMenuLinks {
   }
 
   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');
+    let desktopMenuItems = this.el.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');
+    let hyDesktopPanel = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel')[0];
     if (hyDesktopPanel) {
-      //hide panel, remove class is-active
+      // 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"]');
@@ -63,6 +61,7 @@ export class HyDesktopMenuLinks {
 
   //Show desktop menu panel
   handleMenuDesktopHover(id) {
+    // Set is-active class for the desktop menu selected link to highlight it.
     let desktopMenuItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link');
     desktopMenuItems.forEach((item) => {
       (item as HTMLElement).classList.remove('desktop-menu-link--is-active');
@@ -70,35 +69,29 @@ export class HyDesktopMenuLinks {
     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');
-        menuItems.forEach((item) => {
-          (item as HTMLElement).classList.remove('hy-menu-item--is-active');
+    let hyDesktopPanel = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel')[0];
+    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');
+      menuItems.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');
         });
-
-        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');
-          });
-        }
       }
     }
   }
@@ -126,6 +119,27 @@ export class HyDesktopMenuLinks {
   }
 
   render() {
-    return <div class={'hy-site-header__menu-desktop'}>{this.firstLevelLinksList}</div>;
+    return (
+      <div class="hy-site-header__menu-desktop">
+        {this.firstLevelLinksList}
+        <div class="hy-desktop-menu-panel" 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>
+      </div>
+    );
   }
 }

src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.scss

-: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;
-  }
-}

src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx

-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');
-
-      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');
-        });
-      }
-    }
-  }
-
-  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>
-    );
-  }
-}

src/components/site-header/hy-desktop-menu-panel/readme.md

-# hy-desktop-menu-panel
-
-<!-- Auto Generated Below -->
-
-## Dependencies
-
-### Used by
-
-- [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
-```
-
----
-
-Helsinki University Design System

src/components/site-header/readme.md

@@ -25,7 +25,6 @@
 - [hy-menu-language](../navigation/menu-language)
 - [hy-site-search](site-search)
 - [hy-icon](../icon)
-- [hy-desktop-menu-panel](hy-desktop-menu-panel)
 
 ### Graph
 
@@ -36,13 +35,11 @@ graph TD;
   hy-site-header --> hy-menu-language
   hy-site-header --> hy-site-search
   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
 ```
 

src/components/site-header/site-header.tsx

@@ -128,7 +128,9 @@ export class SiteHeader {
               <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>
+            <hy-desktop-menu-links data-desktop-links={this.dataDesktopLinks}>
+              <slot name={'menu'} />
+            </hy-desktop-menu-links>
 
             <div class={'menu--secondary'}>
               <hy-menu-language
@@ -154,9 +156,6 @@ export class SiteHeader {
               })}
             </div>
           </header>,
-          <hy-desktop-menu-panel>
-            <slot name={'menu'} />
-          </hy-desktop-menu-panel>,
         ];
       case MenuType.tablet:
         return (