group main menu

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

 :host {
   display: block;
 }
+
+:host(.menu--main-group) {
+  align-items: center;
+  display: flex;
+  flex-flow: row;
+  position: relative;
+}
+
+.menu--main-group__toggle {
+  @include font-size(14px, 24px);
+  align-items: center;
+  background: var(--grayscale-black);
+  border: 0 none;
+  color: var(--grayscale-white);
+  display: flex;
+  flex-flow: row;
+  font-family: var(--main-font-family);
+  font-weight: 600;
+  letter-spacing: -0.4px;
+  margin: 0 -4px;
+  padding: 0;
+
+  &:focus {
+  }
+  &:hover {
+  }
+}
+
+.menu--main-group__dropdown {
+  display: none;
+  visibility: hidden;
+
+  &.is-open {
+    background-color: var(--grayscale-black);
+    border-radius: 0 0 5px 5px;
+    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
+    color: var(--grayscale-white);
+    display: flex;
+    flex-flow: column;
+    justify-items: center;
+    left: -15px;
+    margin: 0;
+    padding: 15px;
+    position: absolute;
+    visibility: visible;
+    width: max-content;
+    z-index: 100;
+
+    .menu-main-link {
+      @include font-size(16px, 20px);
+      text-decoration: none;
+    }
+    .menu--main-group__label {
+      color: var(--grayscale-white);
+    }
+  }
+}

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

@@ -53,18 +53,21 @@ export class HyMenuMainGroup {
           }}
           //aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
         >
-          <hy-icon class={'menu--main-group__globe-icon'} icon={'hy-icon-globe'} size={14} fill={white} />
-          <span>University main menu</span>
           <hy-icon class={'menu--main-group__toggle__caret'} icon={'hy-icon-caret-down'} size={8} fill={white} />
+          <span>University main menu</span>
         </button>
         <div
           class={{
-            'menu--language__dropdown': true,
+            'menu--main-group__dropdown': true,
             'is-open': this.isMenuOpen,
           }}
         >
           {this._dataMainMenu.map((item) => {
-            return <a href={item.url}>{item.label}</a>;
+            return (
+              <a href={item.url} class={{'menu-main-link': true}}>
+                <span class={'menu--main-group__label'}>{item.label}</span>
+              </a>
+            );
           })}
         </div>
       </Host>

src/components/site-header/site-header.scss

@@ -120,6 +120,23 @@
       fill: var(--brand-main);
     }
   }
+
+  &.group {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    &:hover {
+      color: var(--grayscale-medium);
+      a,
+      span {
+        color: var(--grayscale-medium) !important;
+      }
+      svg {
+        fill: var(--grayscale-medium);
+      }
+    }
+  }
 }
 
 .hy-site-header__menu-container {

src/components/site-header/site-header.tsx

@@ -238,10 +238,9 @@ export class SiteHeader {
                     url={this.siteUrl}
                     label={this.siteLabel}
                   />
+                  <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
                 </div>
 
-                <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
-
                 <div class={'menu--secondary menu--secondary--group'}>
                   <hy-menu-language
                     class={'menu--secondary__item is-first group'}