From 95dd0960d480c81c0071b9bbcc321d831d7e11a8 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Thu, 19 Nov 2020 01:57:57 +0200
Subject: [PATCH] desktop nav links
---
.../navigation/menu-item/menu-item.scss | 131 +-----------------
.../menu-level-container.tsx | 10 --
.../hy-desktop-menu-links.scss | 116 +++++++++++++++-
.../hy-desktop-menu-links.tsx | 86 +++++++-----
src/components/site-header/site-header.tsx | 4 +-
5 files changed, 169 insertions(+), 178 deletions(-)
diff --git a/src/components/navigation/menu-item/menu-item.scss b/src/components/navigation/menu-item/menu-item.scss
index cfc85ee4..06b73c8c 100644
--- a/src/components/navigation/menu-item/menu-item.scss
+++ b/src/components/navigation/menu-item/menu-item.scss
@@ -32,135 +32,6 @@
@include font-weight($bold);
}
-// Desktop.
-:host(.hy-menu-item--desktop.hy-menu-item--for-desktop) {
- display: block;
- visibility: visible;
-}
-
-:host(.hy-menu-item--desktop:not(.hy-menu-item--for-desktop)) {
- display: none;
- visibility: hidden;
-}
-
-/*
-:host(.hy-menu-item--desktop.is-hidden) {
- height: auto;
- visibility: visible !important;
-}
- */
-
-:host(.hy-menu-item--for-desktop[depth='1']) {
- a {
- @include breakpoint($extrawide) {
- @include font-size(24px, 32px);
- background-color: var(--grayscale-background-box);
- letter-spacing: -0.75px;
- margin-bottom: 4px;
- padding-left: 32px;
- padding-right: 32px;
- padding-top: 5px;
- position: relative;
- text-transform: none;
- }
- @include breakpoint($fullhd) {
- @include font-size(26px, 32px);
- letter-spacing: -0.81px;
- margin-bottom: 6px;
- padding-top: 19px;
- }
-
- .hy-menu-item__label {
- border: none;
- margin-left: 14px;
- }
-
- span.hy-menu-item__heading__icon {
- position: absolute;
- top: 12px;
- left: -6px;
-
- @include breakpoint($fullhd) {
- top: 27px;
- }
-
- svg {
- background-color: var(--brand-main-light);
- fill: var(--grayscale-white);
- padding: 8px;
- }
- }
- }
-}
-
-:host(.hy-menu-item--for-desktop[depth='2']) {
- a {
- @include breakpoint($extrawide) {
- @include font-size(15px, 22px);
- letter-spacing: -0.47px;
- padding-left: 24px;
- padding-right: 24px;
- text-transform: none;
- }
-
- @include breakpoint($fullhd) {
- @include font-size(18px, 22px);
- letter-spacing: -0.56px;
- }
-
- .hy-menu-item__label {
- border: none;
- margin-left: 12px;
- }
-
- span.hy-menu-item__heading__icon {
- svg {
- fill: var(--brand-main-light);
- @include breakpoint($extrawide) {
- padding: 1px 0;
- }
- }
- }
- }
-}
-
-:host(.hy-menu-item--for-desktop:not([depth='2']):not([depth='1'])) {
- a {
- display: none;
- }
-}
-
-:host(.hy-menu-item.hy-menu-item--for-desktop) {
- border: 0 none;
- //--menu-item-display: none;
- a {
- @include font-weight($bold);
- align-items: center;
- color: var(--brand-main-nearly-black);
- display: flex;
- font-family: var(--main-font-family);
- text-decoration: none;
- width: 100%;
-
- &:focus {
- outline: solid 2px var(--additional-yellow);
- outline-offset: -2px;
- }
- .hy-menu-item__label {
- @include breakpoint($extrawide) {
- padding-top: 12px;
- padding-bottom: 12px;
- }
- }
- }
- a.is-heading {
- display: none;
- }
- button {
- display: none;
- }
-}
-
// Sidenav.
:host(.hy-menu-item--sidenav) {
display: flex;
@@ -192,7 +63,7 @@
visibility: visible;
}
-:host(.hy-menu-item:not(.hy-menu-item--for-desktop)) {
+:host(.hy-menu-item) {
a {
@include font-size(15px, 20px);
@include font-weight($regular);
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 b58375ac..ec25ffff 100644
--- a/src/components/navigation/menu-level-container/menu-level-container.tsx
+++ b/src/components/navigation/menu-level-container/menu-level-container.tsx
@@ -59,16 +59,6 @@ export class MenuLevelContainer {
componentWillUpdate() {
// Pass the menu type and menu-button-submenu-expand attributes to
// the child menu item component.
- /*
- let hyMenu = this.el.closest('hy-menu');
- if (hyMenu) {
- if (hyMenu.menuType==MenuType.desktop) {
- console.log(hyMenu.menuType);
- this.menuType = MenuType.desktop;
- }
- }
- */
-
if (this.menuType) {
const items = Array.from(this.el.children);
items.forEach((item) => {
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
index dd403868..7321fd04 100644
--- 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
@@ -76,8 +76,122 @@
&__desktop-menu {
position: relative;
- left: 300px;
+ left: 120px;
width: 50%;
+
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ a {
+ @include font-weight($bold);
+ align-items: center;
+ color: var(--brand-main-nearly-black);
+ display: flex;
+ font-family: var(--main-font-family);
+ text-decoration: none;
+ width: 100%;
+
+ &:focus {
+ outline: solid 2px var(--additional-yellow);
+ outline-offset: -2px;
+ }
+ .hy-menu-item__label {
+ @include breakpoint($extrawide) {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
+ }
+ }
+ }
+
+ li.first {
+ a {
+ @include breakpoint($extrawide) {
+ @include font-size(24px, 32px);
+ background-color: var(--grayscale-background-box);
+ letter-spacing: -0.75px;
+ margin-bottom: 4px;
+ padding-left: 32px;
+ padding-right: 32px;
+ padding-top: 5px;
+ position: relative;
+ text-transform: none;
+ }
+ @include breakpoint($fullhd) {
+ @include font-size(26px, 32px);
+ letter-spacing: -0.81px;
+ margin-bottom: 6px;
+ padding-top: 19px;
+ }
+
+ .hy-menu-item__label {
+ border: none;
+ margin-left: 14px;
+ }
+
+ span.heading-icon-first {
+ position: absolute;
+ top: 12px;
+ left: -6px;
+
+ @include breakpoint($fullhd) {
+ top: 27px;
+ }
+
+ svg {
+ background-color: var(--brand-main-light);
+ fill: var(--grayscale-white);
+ padding: 8px;
+ }
+ }
+ }
+ }
+
+ li.second {
+ a {
+ @include breakpoint($extrawide) {
+ @include font-size(15px, 22px);
+ letter-spacing: -0.47px;
+ padding-left: 24px;
+ padding-right: 24px;
+ text-transform: none;
+ }
+
+ @include breakpoint($fullhd) {
+ @include font-size(18px, 22px);
+ letter-spacing: -0.56px;
+ }
+
+ .hy-menu-item__label {
+ border: none;
+ margin-left: 12px;
+ }
+
+ span.heading-icon-second {
+ svg {
+ fill: var(--brand-main-light);
+ @include breakpoint($extrawide) {
+ padding: 1px 0;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ ul.second {
+ background-color: var(--grayscale-background-box);
+ }
+
+ ul.desktop-menu {
+ display: none;
+ &--is-active {
+ display: block;
+ }
+ }
}
&__panel-toggle {
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
index 1bbb1df5..fa226114 100644
--- 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
@@ -2,6 +2,7 @@ export interface DesktopLinks {
label: string;
url: string;
menuLinkId: string;
+ items: Array<DesktopLinks>;
}
import {ColorVariant} from '../../../utils/utils';
@@ -42,19 +43,10 @@ export class HyDesktopMenuLinks {
// Hide panel, remove class is-active.
(hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
- let menuItems = document.querySelectorAll('hy-site-header hy-menu-item');
+ let menuItems = hyDesktopPanel.querySelectorAll('ul.first');
menuItems.forEach((item) => {
- (item as HTMLElement).classList.remove('hy-menu-item--for-desktop');
+ (item as HTMLElement).classList.remove('desktop-menu--is-active');
});
-
- let parentMenu = document.querySelectorAll('hy-site-header 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');
- });
- }
}
}
@@ -79,26 +71,14 @@ export class HyDesktopMenuLinks {
// 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');
+ // Show proper subtree on panel based on given menu-link-id.
+ let menuItems = hyDesktopPanel.querySelectorAll('ul.first');
menuItems.forEach((item) => {
- (item as HTMLElement).classList.remove('hy-menu-item--for-desktop');
+ (item as HTMLElement).classList.remove('desktop-menu--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--for-desktop');
-
- 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--for-desktop');
- });
- }
+ let menuActivatedItems = hyDesktopPanel.querySelectorAll('ul[menu-link-id="' + id + '"]');
+ (menuActivatedItems[0] as HTMLElement).classList.add('desktop-menu--is-active');
}
}
@@ -106,21 +86,22 @@ export class HyDesktopMenuLinks {
const links = this._dataDesktopLinks as Array<DesktopLinks>;
let firstLevelLinksList = [];
- for (let i = 0; i < links.length; i++) {
+ links.forEach((item) => {
let className = 'desktop-menu-link';
firstLevelLinksList.push(
<div
class={className}
- link-id={links[i].menuLinkId}
- onMouseOver={() => this.handleMenuDesktopHover(links[i].menuLinkId)}
+ link-id={item.menuLinkId}
+ onMouseOver={() => this.handleMenuDesktopHover(item.menuLinkId)}
>
- {links[i].label}
+ {item.label}
<span class="desktop-menu-link__heading__icon">
<hy-icon icon={'hy-icon-caret-down'} size={16} />
</span>
</div>
);
- }
+ });
+
this.firstLevelLinksList = firstLevelLinksList;
}
@@ -130,7 +111,44 @@ export class HyDesktopMenuLinks {
{this.firstLevelLinksList}
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}>
<div class="hy-desktop-menu-panel__desktop-menu">
- <slot></slot>
+ <nav role={'navigation'}>
+ {this._dataDesktopLinks &&
+ this._dataDesktopLinks.map((link) => {
+ return (
+ <ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}>
+ <li class={'first'}>
+ <a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}>
+ <span class="heading-icon-first">
+ <hy-icon icon={'hy-icon-arrow-right'} size={40} />
+ </span>
+ <span class="hy-menu-item__label">{link.label}</span>
+ </a>
+ {link.items && (
+ <ul class="second" menu-link-id={link.menuLinkId}>
+ {link.items.map((subitem) => {
+ return (
+ <li class={'second'}>
+ <a
+ aria-current={subitem.label}
+ href={subitem.url}
+ class=""
+ menu-link-id={subitem.menuLinkId}
+ >
+ <span class="heading-icon-second">
+ <hy-icon icon={'hy-icon-caret-right'} size={12} />
+ </span>
+ <span class="hy-menu-item__label">{subitem.label}</span>
+ </a>
+ </li>
+ );
+ })}
+ </ul>
+ )}
+ </li>
+ </ul>
+ );
+ })}
+ </nav>
</div>
<button
onClick={() => this.closeDesktopMenuPanel()}
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 89390f5b..56de89f5 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -128,9 +128,7 @@ 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}>
- <slot name={'menu'} />
- </hy-desktop-menu-links>
+ <hy-desktop-menu-links data-desktop-links={this.dataDesktopLinks}></hy-desktop-menu-links>
<div class={'menu--secondary'}>
<hy-menu-language
--
GitLab