Add active state for the menu item heading

src/components/navigation/menu-item/menu-item.scss

 // Mobile.
 :host(.hy-menu-item--mobile) {
   --menu-item-display: flex;
-  background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
   display: flex;
   margin-left: 12px;
   margin-right: 12px;
@@ -117,6 +116,7 @@ a {
   }
 
   &.hy-menu-item--mobile {
+    background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
     color: var(--brand-main-light);
     padding: 12px 12px 12px 20px;
 
@@ -136,6 +136,30 @@ a {
         transform: translate(-50%, -50%);
       }
     }
+
+    &.is-heading {
+      @include font-size(24px, 24px);
+      @include font-weight($bold);
+      background: transparent;
+      border-bottom: 3px solid var(--brand-main-light);
+      color: var(--brand-main-light);
+      margin-top: -24px;
+      padding-bottom: 24px;
+      padding-top: 24px;
+      text-transform: uppercase;
+
+      &.is-active,
+      &.in-active-trail {
+        @include font-weight($bold);
+        color: var(--grayscale-black);
+        position: relative;
+
+        &:before {
+          border-left-width: 4px;
+          height: 55%;
+        }
+      }
+    }
   }
 
   &.hy-menu-item--desktop {
@@ -273,7 +297,7 @@ a {
 
 .hy-menu-item__button {
   align-items: center;
-  background: transparent;
+  background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
   border-bottom: 0;
   border-left: 1px dashed var(--brand-main-light);
   border-right: 0;

src/components/navigation/menu-level-container/menu-level-container.tsx

@@ -98,6 +98,10 @@ export class MenuLevelContainer {
           ...this.headingItem,
           label: parentMenuItem.getAttribute('label'),
         };
+        this.headingItem = {
+          ...this.headingItem,
+          isActive: window.location.pathname === this.headingItem.url,
+        };
       } else {
         this.triggerItem = 'home';
       }
@@ -149,6 +153,7 @@ export class MenuLevelContainer {
                 label={this.headingItem.label}
                 url={this.headingItem.url}
                 isHeading={true}
+                isActive={this.headingItem.isActive}
                 menu-type={'mobile'}
               />
               <slot />