From 320b3cfbae41aa717bcaedc1a23604f833b7d0c4 Mon Sep 17 00:00:00 2001
From: katja <ekaterina.kondareva@druid.fi>
Date: Fri, 5 Mar 2021 16:42:40 +0200
Subject: [PATCH] group menu link, toggle off settings
---
.../hy-desktop-menu-links.scss | 4 +
.../hy-desktop-menu-links.tsx | 202 ++++++++++--------
2 files changed, 112 insertions(+), 94 deletions(-)
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 414e3389..9ade9e6a 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
@@ -58,6 +58,10 @@
padding: 0 9px;
}
+ &.toggle {
+ text-decoration: none;
+ }
+
&__label {
position: relative;
width: min-content;
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 1d41aa0b..dd4bdca7 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
@@ -10,6 +10,7 @@ export interface DesktopLinks {
labelExtra: string;
url: string;
description: string;
+ toggleOff: string;
menuLinkId: string;
isExternal: string;
isActive: string;
@@ -390,6 +391,7 @@ export class HyDesktopMenuLinks {
items,
url,
description,
+ toggleOff,
label,
labelExtra,
isExternal,
@@ -407,106 +409,118 @@ export class HyDesktopMenuLinks {
].join(' ');
let target = isExternal ? '_blank' : '_self';
- menuLinkItems.push(
- <li>
- <button
- type="button"
- class={classAttributes}
- link-id={id}
- onMouseDown={(e) => this.handleDesktopMenuClick(e, id)}
- onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
- onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)}
- onMouseMove={(e) => this.handleDesktopMenuMove(e, id)}
- aria-expanded="false"
- >
- <span class={classAttributesLabel}>{label}</span>
- <hy-icon icon={'hy-icon-caret-down'} size={32} />
- </button>
- <div class="hy-desktop-menu-panel" aria-hidden="true">
- <div class="hy-desktop-menu-panel__desktop-menu">
- <div class="hy-desktop-menu-panel__desktop-menu__menu-items">
- <a
- aria-current={label}
- href={url}
- target={target}
- class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
- menu-link-id={id}
- >
- <span class="heading-icon">
- <hy-icon icon={'hy-icon-arrow-right'} size={40} />
- </span>
- {labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>}
- {description && <span class="description">{description}</span>}
- </a>
- <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
- {items.map(({label, url, isExternal}) => {
- let subitemTarget = isExternal ? '_blank' : '_self';
- return (
- <li>
- <a href={url} target={subitemTarget}>
- <span class="heading-icon">
- <hy-icon icon={'hy-icon-caret-right'} size={12} />
- </span>
- <span class="label">{label}</span>
- {isExternal && (
- <span class="external-icon">
- <hy-icon icon={'hy-icon-arrow-right'} size={12} />
- </span>
- )}
- </a>
- </li>
- );
- })}
- </ul>
- </div>
- {shortcuts.length > 0 && (
- <ul class="shortcuts-panel">
- <h2 class="shortcuts-panel__title">{shortcutsTitle}</h2>
- {shortcuts.map(
- ({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}, index) => {
- let target = shortcut_is_external ? '_blank' : '_self';
-
- let shortcutClass = [
- 'shortcuts-panel__shortcut-item',
- index == 0 ? 'shortcuts-panel__shortcut-item__first' : '',
- ].join(' ');
-
+ if (toggleOff == 'true') {
+ //console.log('toggleOff if true: show as a link: ' + label);
+ menuLinkItems.push(
+ <li onMouseEnter={(e) => this.handleDesktopMenuClose(e)}>
+ <a aria-current={label} href={url} target={target} class="desktop-menu-link toggle" menu-link-id={id}>
+ {labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>}
+ </a>
+ </li>
+ );
+ } else {
+ //console.log('toggleOff is false: show as a dropdown: ' + label);
+ menuLinkItems.push(
+ <li>
+ <button
+ type="button"
+ class={classAttributes}
+ link-id={id}
+ onMouseDown={(e) => this.handleDesktopMenuClick(e, id)}
+ onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
+ onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)}
+ onMouseMove={(e) => this.handleDesktopMenuMove(e, id)}
+ aria-expanded="false"
+ >
+ <span class={classAttributesLabel}>{label}</span>
+ <hy-icon icon={'hy-icon-caret-down'} size={32} />
+ </button>
+ <div class="hy-desktop-menu-panel" aria-hidden="true">
+ <div class="hy-desktop-menu-panel__desktop-menu">
+ <div class="hy-desktop-menu-panel__desktop-menu__menu-items">
+ <a
+ aria-current={label}
+ href={url}
+ target={target}
+ class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
+ menu-link-id={id}
+ >
+ <span class="heading-icon">
+ <hy-icon icon={'hy-icon-arrow-right'} size={40} />
+ </span>
+ {labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>}
+ {description && <span class="description">{description}</span>}
+ </a>
+ <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
+ {items.map(({label, url, isExternal}) => {
+ let subitemTarget = isExternal ? '_blank' : '_self';
return (
- <li class={shortcutClass}>
- <a
- aria-current={shortcut_aria_label}
- href={shortcut_url}
- class="shortcut-item__link"
- target={target}
- aria-label={shortcut_aria_label}
- >
- <span class="label">{shortcut_title}</span>
- <span class="icon">
- <hy-icon icon={'hy-icon-arrow-right'} size={24} />
+ <li>
+ <a href={url} target={subitemTarget}>
+ <span class="heading-icon">
+ <hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
+ <span class="label">{label}</span>
+ {isExternal && (
+ <span class="external-icon">
+ <hy-icon icon={'hy-icon-arrow-right'} size={12} />
+ </span>
+ )}
</a>
</li>
);
- }
- )}
- </ul>
- )}
+ })}
+ </ul>
+ </div>
+ {shortcuts.length > 0 && (
+ <ul class="shortcuts-panel">
+ <h2 class="shortcuts-panel__title">{shortcutsTitle}</h2>
+ {shortcuts.map(
+ ({shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label}, index) => {
+ let target = shortcut_is_external ? '_blank' : '_self';
+
+ let shortcutClass = [
+ 'shortcuts-panel__shortcut-item',
+ index == 0 ? 'shortcuts-panel__shortcut-item__first' : '',
+ ].join(' ');
+
+ return (
+ <li class={shortcutClass}>
+ <a
+ aria-current={shortcut_aria_label}
+ href={shortcut_url}
+ class="shortcut-item__link"
+ target={target}
+ aria-label={shortcut_aria_label}
+ >
+ <span class="label">{shortcut_title}</span>
+ <span class="icon">
+ <hy-icon icon={'hy-icon-arrow-right'} size={24} />
+ </span>
+ </a>
+ </li>
+ );
+ }
+ )}
+ </ul>
+ )}
+ </div>
+ <button
+ onClick={(e) => this.handleDesktopMenuClose(e)}
+ class={{
+ 'hy-desktop-menu-panel__panel-toggle': true,
+ }}
+ aria-label="Close menu"
+ >
+ <span class="hy-desktop-menu-panel__panel-toggle__label">
+ <span class="hy-desktop-menu-panel__panel-toggle__label__title">{closeButtonTitle}</span>
+ <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
+ </span>
+ </button>
</div>
- <button
- onClick={(e) => this.handleDesktopMenuClose(e)}
- class={{
- 'hy-desktop-menu-panel__panel-toggle': true,
- }}
- aria-label="Close menu"
- >
- <span class="hy-desktop-menu-panel__panel-toggle__label">
- <span class="hy-desktop-menu-panel__panel-toggle__label__title">{closeButtonTitle}</span>
- <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
- </span>
- </button>
- </div>
- </li>
- );
+ </li>
+ );
+ }
}
);
}
--
GitLab