university main meny styles

src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss

@@ -28,27 +28,62 @@
   letter-spacing: -0.44px;
   margin: 0 -4px;
   padding: 0;
+  position: relative;
 
   &:focus {
+    outline: none;
   }
   &:hover {
+    cursor: pointer;
+    span {
+      color: var(--grayscale-medium);
+    }
+    svg {
+      fill: var(--grayscale-medium);
+    }
   }
 
-  svg {
-    @include breakpoint($wide) {
-      height: 15.27px;
-      width: 3px;
-    }
-    @include breakpoint($extrawide) {
-      height: 14px;
-      width: 3px;
+  .toggle__caret {
+    svg {
+      @include breakpoint($wide) {
+        height: 15.27px;
+        width: 3px;
+      }
+      @include breakpoint($extrawide) {
+        height: 14px;
+        width: 3px;
+      }
     }
   }
+
   span {
     @include breakpoint($wide) {
       margin-left: 17px;
     }
   }
+
+  &.is-open {
+    &:after {
+      border-bottom: 3px solid white;
+      bottom: -10px;
+      content: ' ';
+      position: absolute;
+      width: 100%;
+    }
+
+    .toggle__close {
+      @include breakpoint($wide) {
+        height: 12px;
+        width: 12px;
+      }
+    }
+
+    span {
+      @include breakpoint($wide) {
+        margin-left: 10px;
+      }
+    }
+  }
 }
 
 .menu--main-group__dropdown {
@@ -76,6 +111,43 @@
       justify-items: center;
       position: relative;
     }
+
+    .panel-toggle {
+      background-color: transparent;
+      border: none;
+      position: absolute;
+      right: 0;
+      top: 0;
+
+      @include breakpoint($wide) {
+        padding: 26px 32px;
+      }
+
+      &__label {
+        @include font-size(16px, 20px);
+        @include font-weight($bold);
+        color: var(--grayscale-white);
+        display: flex;
+        font-family: var(--main-font-family);
+        letter-spacing: -0.5px;
+        text-transform: uppercase;
+
+        &__title {
+          padding-right: 12px;
+        }
+
+        &:hover {
+          cursor: pointer;
+          span {
+            color: var(--grayscale-medium);
+          }
+          svg {
+            fill: var(--grayscale-medium);
+          }
+        }
+      }
+    }
+
     .menu-main-link {
       @include font-size(16px, 20px);
       align-items: center;
@@ -83,6 +155,15 @@
       flex-direction: row;
       margin-bottom: 20px;
       text-decoration: none;
+
+      &:hover {
+        span {
+          color: var(--grayscale-medium);
+        }
+        svg {
+          fill: var(--grayscale-medium);
+        }
+      }
     }
     .menu--main-group__label {
       color: var(--grayscale-white);

src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx

+import {ColorVariant} from '../../../utils/utils';
+
 export interface MainMenu {
   label: string;
   url: string;
@@ -54,6 +56,11 @@ export class HyMenuMainGroup {
     this.dataMainMenuWatcher(this.dataMainMenu);
   }
 
+  handleMainMenuClose(event) {
+    this.isMenuOpen = false;
+    event.stopPropagation();
+  }
+
   render() {
     const white = 'var(--grayscale-white)';
 
@@ -107,12 +114,11 @@ export class HyMenuMainGroup {
           }}
           //aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
         >
-          <hy-icon
-            class={'menu--main-group__toggle__caret'}
-            icon={'hy-icon-slim-hamburger-menu'}
-            size={8}
-            fill={white}
-          />
+          {this.isMenuOpen ? (
+            <hy-icon class={'toggle__close'} icon={'hy-icon-remove'} size={8} fill={white} />
+          ) : (
+            <hy-icon class={'toggle__caret'} icon={'hy-icon-slim-hamburger-menu'} size={8} fill={white} />
+          )}
           <span>University main menu</span>
         </button>
         <div
@@ -133,6 +139,18 @@ export class HyMenuMainGroup {
               );
             })}
           </div>
+          <button
+            onClick={(e) => this.handleMainMenuClose(e)}
+            class={{
+              'panel-toggle': true,
+            }}
+            aria-label="Close menu"
+          >
+            <span class="panel-toggle__label">
+              <span class="panel-toggle__label__title">Close</span>
+              <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.white} />
+            </span>
+          </button>
         </div>
       </Host>
     );