desktop menu nav, underline link that is in active trail

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;
-          }
-        }
-      }
-    }
-    */

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)}