From fb95c66a88d16ee98e58215abbd429b89899bb1f Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Fri, 20 Nov 2020 12:48:31 +0200
Subject: [PATCH] desktop menu nav, underline link that is in active trail
---
.../hy-desktop-menu-links.scss | 34 ++++++-------------
.../hy-desktop-menu-links.tsx | 11 ++++--
2 files changed, 19 insertions(+), 26 deletions(-)
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index ab52bcf1..8a6ace35 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -36,6 +36,16 @@
display: none;
}
+ &--is-active-trail {
+ @include breakpoint($extrawide) {
+ border-bottom: 4px solid var(--brand-main-nearly-black);
+ padding-bottom: 8px;
+ }
+
+ @include breakpoint($overwide) {
+ padding-bottom: 12px;
+ }
+ }
&--is-active {
background-color: var(--grayscale-background-box);
padding: 35px 10px;
@@ -216,27 +226,3 @@
top: 10px;
}
}
-
-/*
-apply to desktop menu links upper level
- &.hy-menu-item--desktop {
- &.in-active-trail {
- .hy-menu-item__label {
- @include breakpoint($medium) {
- border-bottom: 4px solid var(--brand-main-nearly-black);
- padding-bottom: 8px;
- }
-
- @include breakpoint($extrawide) {
- padding-bottom: 8px;
- padding-top: 14px;
- }
-
- @include breakpoint($overwide) {
- padding-top: 12px;
- padding-bottom: 12px;
- }
- }
- }
- }
- */
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index f889fad1..41e9340b 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -10,6 +10,7 @@ export interface DesktopLinks {
url: string;
description: string;
menuLinkId: string;
+ isActive: string;
items: Array<DesktopLinks>;
shortcuts: Array<ShortcutLinks>;
}
@@ -96,10 +97,16 @@ export class HyDesktopMenuLinks {
let firstLevelLinksList = [];
links.forEach((item) => {
- let className = 'desktop-menu-link';
+ let classAttributes = [
+ 'desktop-menu-link',
+ item.isActive === 'true' ? 'desktop-menu-link--is-active-trail' : '',
+ ].join(' ');
+
+ //item.isActive ? classAttributes'desktop-menu-link--is-active-trail' : ''
+
firstLevelLinksList.push(
<div
- class={className}
+ class={classAttributes}
link-id={item.menuLinkId}
onMouseOver={() => this.handleMenuDesktopHover(item.menuLinkId)}
onFocus={() => this.handleMenuDesktopHover(item.menuLinkId)}
--
GitLab