Skip to content
Snippets Groups Projects
Commit 320b3cfb authored by katja's avatar katja
Browse files

group menu link, toggle off settings

parent 82d23452
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+ 4
− 0
View file @ 320b3cfb
...@@ -58,6 +58,10 @@ ...@@ -58,6 +58,10 @@
padding: 0 9px; padding: 0 9px;
} }
&.toggle {
text-decoration: none;
}
&__label { &__label {
position: relative; position: relative;
width: min-content; width: min-content;
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 108
− 94
View file @ 320b3cfb
...@@ -10,6 +10,7 @@ export interface DesktopLinks { ...@@ -10,6 +10,7 @@ export interface DesktopLinks {
labelExtra: string; labelExtra: string;
url: string; url: string;
description: string; description: string;
toggleOff: string;
menuLinkId: string; menuLinkId: string;
isExternal: string; isExternal: string;
isActive: string; isActive: string;
...@@ -390,6 +391,7 @@ export class HyDesktopMenuLinks { ...@@ -390,6 +391,7 @@ export class HyDesktopMenuLinks {
items, items,
url, url,
description, description,
toggleOff,
label, label,
labelExtra, labelExtra,
isExternal, isExternal,
...@@ -407,106 +409,118 @@ export class HyDesktopMenuLinks { ...@@ -407,106 +409,118 @@ export class HyDesktopMenuLinks {
].join(' '); ].join(' ');
let target = isExternal ? '_blank' : '_self'; let target = isExternal ? '_blank' : '_self';
menuLinkItems.push( if (toggleOff == 'true') {
<li> //console.log('toggleOff if true: show as a link: ' + label);
<button menuLinkItems.push(
type="button" <li onMouseEnter={(e) => this.handleDesktopMenuClose(e)}>
class={classAttributes} <a aria-current={label} href={url} target={target} class="desktop-menu-link toggle" menu-link-id={id}>
link-id={id} {labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>}
onMouseDown={(e) => this.handleDesktopMenuClick(e, id)} </a>
onFocus={(e) => this.handleDesktopMenuFocus(e, id)} </li>
onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)} );
onMouseMove={(e) => this.handleDesktopMenuMove(e, id)} } else {
aria-expanded="false" //console.log('toggleOff is false: show as a dropdown: ' + label);
> menuLinkItems.push(
<span class={classAttributesLabel}>{label}</span> <li>
<hy-icon icon={'hy-icon-caret-down'} size={32} /> <button
</button> type="button"
<div class="hy-desktop-menu-panel" aria-hidden="true"> class={classAttributes}
<div class="hy-desktop-menu-panel__desktop-menu"> link-id={id}
<div class="hy-desktop-menu-panel__desktop-menu__menu-items"> onMouseDown={(e) => this.handleDesktopMenuClick(e, id)}
<a onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
aria-current={label} onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)}
href={url} onMouseMove={(e) => this.handleDesktopMenuMove(e, id)}
target={target} aria-expanded="false"
class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item" >
menu-link-id={id} <span class={classAttributesLabel}>{label}</span>
> <hy-icon icon={'hy-icon-caret-down'} size={32} />
<span class="heading-icon"> </button>
<hy-icon icon={'hy-icon-arrow-right'} size={40} /> <div class="hy-desktop-menu-panel" aria-hidden="true">
</span> <div class="hy-desktop-menu-panel__desktop-menu">
{labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>} <div class="hy-desktop-menu-panel__desktop-menu__menu-items">
{description && <span class="description">{description}</span>} <a
</a> aria-current={label}
<ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}> href={url}
{items.map(({label, url, isExternal}) => { target={target}
let subitemTarget = isExternal ? '_blank' : '_self'; class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
return ( menu-link-id={id}
<li> >
<a href={url} target={subitemTarget}> <span class="heading-icon">
<span class="heading-icon"> <hy-icon icon={'hy-icon-arrow-right'} size={40} />
<hy-icon icon={'hy-icon-caret-right'} size={12} /> </span>
</span> {labelExtra ? <span class="label">{labelExtra}</span> : <span class="label">{label}</span>}
<span class="label">{label}</span> {description && <span class="description">{description}</span>}
{isExternal && ( </a>
<span class="external-icon"> <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
<hy-icon icon={'hy-icon-arrow-right'} size={12} /> {items.map(({label, url, isExternal}) => {
</span> let subitemTarget = isExternal ? '_blank' : '_self';
)}
</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(' ');
return ( return (
<li class={shortcutClass}> <li>
<a <a href={url} target={subitemTarget}>
aria-current={shortcut_aria_label} <span class="heading-icon">
href={shortcut_url} <hy-icon icon={'hy-icon-caret-right'} size={12} />
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> </span>
<span class="label">{label}</span>
{isExternal && (
<span class="external-icon">
<hy-icon icon={'hy-icon-arrow-right'} size={12} />
</span>
)}
</a> </a>
</li> </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> </div>
<button </li>
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>
);
} }
); );
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment