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 { ...@@ -93,6 +93,8 @@ export class HyDesktopMenuLinks {
class={className} class={className}
link-id={item.menuLinkId} link-id={item.menuLinkId}
onMouseOver={() => this.handleMenuDesktopHover(item.menuLinkId)} onMouseOver={() => this.handleMenuDesktopHover(item.menuLinkId)}
onFocus={() => this.handleMenuDesktopHover(item.menuLinkId)}
tabIndex={0}
> >
{item.label} {item.label}
<span class="desktop-menu-link__heading__icon"> <span class="desktop-menu-link__heading__icon">
...@@ -107,63 +109,69 @@ export class HyDesktopMenuLinks { ...@@ -107,63 +109,69 @@ export class HyDesktopMenuLinks {
render() { render() {
return ( return (
<div class="hy-site-header__menu-desktop"> <nav role={'navigation'} class="hy-site-header__menu-desktop">
{this.firstLevelLinksList} <ul>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}> {this.firstLevelLinksList.map((firstLevelLink) => {
<div class="hy-desktop-menu-panel__desktop-menu"> return (
<nav role={'navigation'}> <li>
{this._dataDesktopLinks && {firstLevelLink}
this._dataDesktopLinks.map((link) => { <div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}>
return ( <div class="hy-desktop-menu-panel__desktop-menu">
<ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}> {this._dataDesktopLinks &&
<li class={'first'}> this._dataDesktopLinks.map((link) => {
<a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}> return (
<span class="heading-icon-first"> <ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}>
<hy-icon icon={'hy-icon-arrow-right'} size={40} /> <li class={'first'}>
</span> <a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}>
<span class="hy-menu-item__label">{link.label}</span> <span class="heading-icon-first">
</a> <hy-icon icon={'hy-icon-arrow-right'} size={40} />
{link.items && ( </span>
<ul class="second" menu-link-id={link.menuLinkId}> <span class="hy-menu-item__label">{link.label}</span>
{link.items.map((subitem) => { </a>
return ( {link.items && (
<li class={'second'}> <ul class="second" menu-link-id={link.menuLinkId}>
<a {link.items.map((subitem) => {
aria-current={subitem.label} return (
href={subitem.url} <li class={'second'}>
class="" <a
menu-link-id={subitem.menuLinkId} aria-current={subitem.label}
> href={subitem.url}
<span class="heading-icon-second"> class=""
<hy-icon icon={'hy-icon-caret-right'} size={12} /> menu-link-id={subitem.menuLinkId}
</span> >
<span class="hy-menu-item__label">{subitem.label}</span> <span class="heading-icon-second">
</a> <hy-icon icon={'hy-icon-caret-right'} size={12} />
</li> </span>
); <span class="hy-menu-item__label">{subitem.label}</span>
})} </a>
</li>
);
})}
</ul>
)}
</li>
</ul> </ul>
)} );
</li> })}
</ul> </div>
); <button
})} onClick={() => this.closeDesktopMenuPanel()}
</nav> class={{
</div> 'hy-desktop-menu-panel__panel-toggle': true,
<button }}
onClick={() => this.closeDesktopMenuPanel()} aria-label="close"
class={{ >
'hy-desktop-menu-panel__panel-toggle': true, <span class="hy-desktop-menu-panel__panel-toggle__label">
}} CLOSE
aria-label="close" <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
> </span>
<span class="hy-desktop-menu-panel__panel-toggle__label"> </button>
CLOSE </div>
<hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} /> </li>
</span> );
</button> })}
</div> </ul>
</div> </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