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 @@
}
.hy-site-header {
&__menu-desktop {
&__menu-desktop-container {
align-items: center;
display: flex;
flex-flow: row;
list-style: none;
width: 100%;
}
&__menu-desktop {
.desktop-menu-link {
color: var(--brand-main-nearly-black);
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 {
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) => {
console.log(link.label);
console.log(link.shortcuts);
return (
<div class="hy-desktop-menu-panel__wrapper">
<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>
<span class="hy-menu-item__description">{link.description}</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>
<nav role={'navigation'} class="hy-site-header__menu-desktop">
<ul class="hy-site-header__menu-desktop-container">
{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 (
<div>
<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>
{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>
);
})}
</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>
);
})}
</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