Skip to content
Snippets Groups Projects
Commit a7151b01 authored by shamalainen's avatar shamalainen
Browse files

Update the menu DOM hierarchy

parent 95dd0960
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.tsx
+ 64
− 56
View file @ a7151b01
......@@ -93,6 +93,8 @@ export class HyDesktopMenuLinks {
class={className}
link-id={item.menuLinkId}
onMouseOver={() => this.handleMenuDesktopHover(item.menuLinkId)}
onFocus={() => this.handleMenuDesktopHover(item.menuLinkId)}
tabIndex={0}
>
{item.label}
<span class="desktop-menu-link__heading__icon">
......@@ -107,63 +109,69 @@ export class HyDesktopMenuLinks {
render() {
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">
<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>
);
})}
<nav role={'navigation'} class="hy-site-header__menu-desktop">
<ul>
{this.firstLevelLinksList.map((firstLevelLink) => {
return (
<li>
{firstLevelLink}
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}>
<div class="hy-desktop-menu-panel__desktop-menu">
{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>
)}
</li>
</ul>
);
})}
</nav>
</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>
);
})}
</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>
</li>
);
})}
</ul>
</nav>
);
}
}
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