Skip to content
Snippets Groups Projects
Commit 95dd0960 authored by druid's avatar druid
Browse files

desktop nav links

parent 232beaa6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 169 additions and 178 deletions
src/components/navigation/menu-item/menu-item.scss
+ 1
− 130
View file @ 95dd0960
...@@ -32,135 +32,6 @@ ...@@ -32,135 +32,6 @@
@include font-weight($bold); @include font-weight($bold);
} }
// Desktop.
:host(.hy-menu-item--desktop.hy-menu-item--for-desktop) {
display: block;
visibility: visible;
}
:host(.hy-menu-item--desktop:not(.hy-menu-item--for-desktop)) {
display: none;
visibility: hidden;
}
/*
:host(.hy-menu-item--desktop.is-hidden) {
height: auto;
visibility: visible !important;
}
*/
:host(.hy-menu-item--for-desktop[depth='1']) {
a {
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
background-color: var(--grayscale-background-box);
letter-spacing: -0.75px;
margin-bottom: 4px;
padding-left: 32px;
padding-right: 32px;
padding-top: 5px;
position: relative;
text-transform: none;
}
@include breakpoint($fullhd) {
@include font-size(26px, 32px);
letter-spacing: -0.81px;
margin-bottom: 6px;
padding-top: 19px;
}
.hy-menu-item__label {
border: none;
margin-left: 14px;
}
span.hy-menu-item__heading__icon {
position: absolute;
top: 12px;
left: -6px;
@include breakpoint($fullhd) {
top: 27px;
}
svg {
background-color: var(--brand-main-light);
fill: var(--grayscale-white);
padding: 8px;
}
}
}
}
:host(.hy-menu-item--for-desktop[depth='2']) {
a {
@include breakpoint($extrawide) {
@include font-size(15px, 22px);
letter-spacing: -0.47px;
padding-left: 24px;
padding-right: 24px;
text-transform: none;
}
@include breakpoint($fullhd) {
@include font-size(18px, 22px);
letter-spacing: -0.56px;
}
.hy-menu-item__label {
border: none;
margin-left: 12px;
}
span.hy-menu-item__heading__icon {
svg {
fill: var(--brand-main-light);
@include breakpoint($extrawide) {
padding: 1px 0;
}
}
}
}
}
:host(.hy-menu-item--for-desktop:not([depth='2']):not([depth='1'])) {
a {
display: none;
}
}
:host(.hy-menu-item.hy-menu-item--for-desktop) {
border: 0 none;
//--menu-item-display: none;
a {
@include font-weight($bold);
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: -2px;
}
.hy-menu-item__label {
@include breakpoint($extrawide) {
padding-top: 12px;
padding-bottom: 12px;
}
}
}
a.is-heading {
display: none;
}
button {
display: none;
}
}
// Sidenav. // Sidenav.
:host(.hy-menu-item--sidenav) { :host(.hy-menu-item--sidenav) {
display: flex; display: flex;
...@@ -192,7 +63,7 @@ ...@@ -192,7 +63,7 @@
visibility: visible; visibility: visible;
} }
:host(.hy-menu-item:not(.hy-menu-item--for-desktop)) { :host(.hy-menu-item) {
a { a {
@include font-size(15px, 20px); @include font-size(15px, 20px);
@include font-weight($regular); @include font-weight($regular);
......
src/components/navigation/menu-level-container/menu-level-container.tsx
+ 0
− 10
View file @ 95dd0960
...@@ -59,16 +59,6 @@ export class MenuLevelContainer { ...@@ -59,16 +59,6 @@ export class MenuLevelContainer {
componentWillUpdate() { componentWillUpdate() {
// Pass the menu type and menu-button-submenu-expand attributes to // Pass the menu type and menu-button-submenu-expand attributes to
// the child menu item component. // the child menu item component.
/*
let hyMenu = this.el.closest('hy-menu');
if (hyMenu) {
if (hyMenu.menuType==MenuType.desktop) {
console.log(hyMenu.menuType);
this.menuType = MenuType.desktop;
}
}
*/
if (this.menuType) { if (this.menuType) {
const items = Array.from(this.el.children); const items = Array.from(this.el.children);
items.forEach((item) => { items.forEach((item) => {
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+ 115
− 1
View file @ 95dd0960
...@@ -76,8 +76,122 @@ ...@@ -76,8 +76,122 @@
&__desktop-menu { &__desktop-menu {
position: relative; position: relative;
left: 300px; left: 120px;
width: 50%; width: 50%;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
a {
@include font-weight($bold);
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: -2px;
}
.hy-menu-item__label {
@include breakpoint($extrawide) {
padding-top: 12px;
padding-bottom: 12px;
}
}
}
}
li.first {
a {
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
background-color: var(--grayscale-background-box);
letter-spacing: -0.75px;
margin-bottom: 4px;
padding-left: 32px;
padding-right: 32px;
padding-top: 5px;
position: relative;
text-transform: none;
}
@include breakpoint($fullhd) {
@include font-size(26px, 32px);
letter-spacing: -0.81px;
margin-bottom: 6px;
padding-top: 19px;
}
.hy-menu-item__label {
border: none;
margin-left: 14px;
}
span.heading-icon-first {
position: absolute;
top: 12px;
left: -6px;
@include breakpoint($fullhd) {
top: 27px;
}
svg {
background-color: var(--brand-main-light);
fill: var(--grayscale-white);
padding: 8px;
}
}
}
}
li.second {
a {
@include breakpoint($extrawide) {
@include font-size(15px, 22px);
letter-spacing: -0.47px;
padding-left: 24px;
padding-right: 24px;
text-transform: none;
}
@include breakpoint($fullhd) {
@include font-size(18px, 22px);
letter-spacing: -0.56px;
}
.hy-menu-item__label {
border: none;
margin-left: 12px;
}
span.heading-icon-second {
svg {
fill: var(--brand-main-light);
@include breakpoint($extrawide) {
padding: 1px 0;
}
}
}
}
}
}
ul.second {
background-color: var(--grayscale-background-box);
}
ul.desktop-menu {
display: none;
&--is-active {
display: block;
}
}
} }
&__panel-toggle { &__panel-toggle {
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 52
− 34
View file @ 95dd0960
...@@ -2,6 +2,7 @@ export interface DesktopLinks { ...@@ -2,6 +2,7 @@ export interface DesktopLinks {
label: string; label: string;
url: string; url: string;
menuLinkId: string; menuLinkId: string;
items: Array<DesktopLinks>;
} }
import {ColorVariant} from '../../../utils/utils'; import {ColorVariant} from '../../../utils/utils';
...@@ -42,19 +43,10 @@ export class HyDesktopMenuLinks { ...@@ -42,19 +43,10 @@ export class HyDesktopMenuLinks {
// Hide panel, remove class is-active. // Hide panel, remove class is-active.
(hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active'); (hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
let menuItems = document.querySelectorAll('hy-site-header hy-menu-item'); let menuItems = hyDesktopPanel.querySelectorAll('ul.first');
menuItems.forEach((item) => { menuItems.forEach((item) => {
(item as HTMLElement).classList.remove('hy-menu-item--for-desktop'); (item as HTMLElement).classList.remove('desktop-menu--is-active');
}); });
let parentMenu = document.querySelectorAll('hy-site-header hy-menu-level-container[menu-level="2"]');
if (parentMenu) {
const items = Array.from(parentMenu);
items.forEach((item) => {
item.classList.add('hy-menu-level-container--mobile');
item.classList.remove('hy-menu-level-container--desktop');
});
}
} }
} }
...@@ -79,26 +71,14 @@ export class HyDesktopMenuLinks { ...@@ -79,26 +71,14 @@ export class HyDesktopMenuLinks {
// Show panel, add class is-active. // Show panel, add class is-active.
(hyDesktopPanel as HTMLElement).classList.add('hy-desktop-menu-panel--is-active'); (hyDesktopPanel as HTMLElement).classList.add('hy-desktop-menu-panel--is-active');
//@todo show proper subtree on panel based on given menu-link-id // Show proper subtree on panel based on given menu-link-id.
// Hide all menu-item that have other menu-link-id attribute value. let menuItems = hyDesktopPanel.querySelectorAll('ul.first');
let menuItems = document.querySelectorAll('hy-site-header hy-menu-item');
menuItems.forEach((item) => { menuItems.forEach((item) => {
(item as HTMLElement).classList.remove('hy-menu-item--for-desktop'); (item as HTMLElement).classList.remove('desktop-menu--is-active');
}); });
let menuActivatedItems = document.querySelectorAll('hy-site-header hy-menu-item[menu-link-id="' + id + '"]'); let menuActivatedItems = hyDesktopPanel.querySelectorAll('ul[menu-link-id="' + id + '"]');
(menuActivatedItems[0] as HTMLElement).classList.add('hy-menu-item--for-desktop'); (menuActivatedItems[0] as HTMLElement).classList.add('desktop-menu--is-active');
let parentMenu = (menuActivatedItems[0] as HTMLElement).querySelector('hy-menu-level-container[menu-level="2"]');
if (parentMenu && parentMenu.children) {
(parentMenu as HTMLElement).classList.remove('hy-menu-level-container--mobile');
(parentMenu as HTMLElement).classList.add('hy-menu-level-container--desktop');
const items = Array.from(parentMenu.children);
items.forEach((item) => {
item.classList.add('hy-menu-item--for-desktop');
});
}
} }
} }
...@@ -106,21 +86,22 @@ export class HyDesktopMenuLinks { ...@@ -106,21 +86,22 @@ export class HyDesktopMenuLinks {
const links = this._dataDesktopLinks as Array<DesktopLinks>; const links = this._dataDesktopLinks as Array<DesktopLinks>;
let firstLevelLinksList = []; let firstLevelLinksList = [];
for (let i = 0; i < links.length; i++) { links.forEach((item) => {
let className = 'desktop-menu-link'; let className = 'desktop-menu-link';
firstLevelLinksList.push( firstLevelLinksList.push(
<div <div
class={className} class={className}
link-id={links[i].menuLinkId} link-id={item.menuLinkId}
onMouseOver={() => this.handleMenuDesktopHover(links[i].menuLinkId)} onMouseOver={() => this.handleMenuDesktopHover(item.menuLinkId)}
> >
{links[i].label} {item.label}
<span class="desktop-menu-link__heading__icon"> <span class="desktop-menu-link__heading__icon">
<hy-icon icon={'hy-icon-caret-down'} size={16} /> <hy-icon icon={'hy-icon-caret-down'} size={16} />
</span> </span>
</div> </div>
); );
} });
this.firstLevelLinksList = firstLevelLinksList; this.firstLevelLinksList = firstLevelLinksList;
} }
...@@ -130,7 +111,44 @@ export class HyDesktopMenuLinks { ...@@ -130,7 +111,44 @@ export class HyDesktopMenuLinks {
{this.firstLevelLinksList} {this.firstLevelLinksList}
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}> <div class="hy-desktop-menu-panel" onMouseLeave={() => this.closeDesktopMenuPanel()}>
<div class="hy-desktop-menu-panel__desktop-menu"> <div class="hy-desktop-menu-panel__desktop-menu">
<slot></slot> <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>
);
})}
</ul>
)}
</li>
</ul>
);
})}
</nav>
</div> </div>
<button <button
onClick={() => this.closeDesktopMenuPanel()} onClick={() => this.closeDesktopMenuPanel()}
......
src/components/site-header/site-header.tsx
+ 1
− 3
View file @ 95dd0960
...@@ -128,9 +128,7 @@ export class SiteHeader { ...@@ -128,9 +128,7 @@ export class SiteHeader {
<hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} /> <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
</div> </div>
<hy-desktop-menu-links data-desktop-links={this.dataDesktopLinks}> <hy-desktop-menu-links data-desktop-links={this.dataDesktopLinks}></hy-desktop-menu-links>
<slot name={'menu'} />
</hy-desktop-menu-links>
<div class={'menu--secondary'}> <div class={'menu--secondary'}>
<hy-menu-language <hy-menu-language
......
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