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

Update DOM structure [WIP]

parent f5d8d825
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
− 1
View file @ 4fe65d18
...@@ -3,12 +3,15 @@ ...@@ -3,12 +3,15 @@
} }
.hy-site-header { .hy-site-header {
&__menu-desktop { &__menu-desktop-container {
align-items: center; align-items: center;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
list-style: none;
width: 100%; width: 100%;
}
&__menu-desktop {
.desktop-menu-link { .desktop-menu-link {
color: var(--brand-main-nearly-black); color: var(--brand-main-nearly-black);
cursor: pointer; cursor: pointer;
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 84
− 81
View file @ 4fe65d18
...@@ -118,89 +118,92 @@ export class HyDesktopMenuLinks { ...@@ -118,89 +118,92 @@ 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 class="hy-site-header__menu-desktop-container">
<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()}>
console.log(link.label); <div class="hy-desktop-menu-panel__desktop-menu">
console.log(link.shortcuts); {this._dataDesktopLinks &&
return ( this._dataDesktopLinks.map((link) => {
<div class="hy-desktop-menu-panel__wrapper"> return (
<ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}> <div>
<li class={'first'}> <ul class={'desktop-menu first'} menu-link-id={link.menuLinkId}>
<a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}> <li class={'first'}>
<span class="heading-icon-first"> <a aria-current={link.label} href={link.url} class="" menu-link-id={link.menuLinkId}>
<hy-icon icon={'hy-icon-arrow-right'} size={40} /> <span class="heading-icon-first">
</span> <hy-icon icon={'hy-icon-arrow-right'} size={40} />
<span class="hy-menu-item__label">{link.label}</span> </span>
<span class="hy-menu-item__description">{link.description}</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>
{link.shortcuts.length > 0 && (
<div class="shortcuts-panel">
<span class="shortcut-panel__title">{'Shortcuts'}</span>
{link.shortcuts.map((shortcut_item) => {
let target = shortcut_item.shortcut_is_external ? '_blank' : '_self';
return (
<div class="shortcut-item">
<a
aria-current={shortcut_item.shortcut_aria_label}
href={shortcut_item.shortcut_url}
class="shortcut-item__link"
target={target}
aria-label={shortcut_item.shortcut_aria_label}
>
<span class="shortcut-item__label">{shortcut_item.shortcut_title}</span>
</a> </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>
{link.shortcuts.length > 0 && (
<div class="shortcuts-panel">
<span class="shortcut-panel__title">{'Shortcuts'}</span>
{link.shortcuts.map((shortcut_item) => {
let target = shortcut_item.shortcut_is_external ? '_blank' : '_self';
return (
<div class="shortcut-item">
<a
aria-current={shortcut_item.shortcut_aria_label}
href={shortcut_item.shortcut_url}
class="shortcut-item__link"
target={target}
aria-label={shortcut_item.shortcut_aria_label}
>
<span class="shortcut-item__label">{shortcut_item.shortcut_title}</span>
</a>
</div>
);
})}
</div> </div>
); )}
})} </div>
</div> );
)} })}
</div> </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