university main menu dropdown

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

@@ -6,7 +6,6 @@
   align-items: center;
   display: flex;
   flex-flow: row;
-  position: relative;
   margin-left: 28px;
   @include breakpoint($narrow) {
     margin-left: 32px;
@@ -17,7 +16,8 @@
 }
 
 .menu--main-group__toggle {
-  @include font-size(14px, 24px);
+  @include font-size(14px, 16px);
+  @include font-weight($semibold);
   align-items: center;
   background: var(--grayscale-black);
   border: 0 none;
@@ -25,8 +25,7 @@
   display: flex;
   flex-flow: row;
   font-family: var(--main-font-family);
-  font-weight: 600;
-  letter-spacing: -0.4px;
+  letter-spacing: -0.44px;
   margin: 0 -4px;
   padding: 0;
 
@@ -34,6 +33,14 @@
   }
   &:hover {
   }
+
+  svg {
+  }
+  span {
+    @include breakpoint($wide) {
+      margin-left: 17px;
+    }
+  }
 }
 
 .menu--main-group__dropdown {
@@ -46,22 +53,32 @@
     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;
+    left: 0;
     margin: 0;
-    padding: 15px;
+    padding: 6px 0 20px;
     position: absolute;
+    top: 0;
     visibility: visible;
-    width: max-content;
+    width: 100%;
     z-index: 100;
 
+    .list {
+      display: flex;
+      flex-flow: column;
+      justify-items: center;
+      position: relative;
+    }
     .menu-main-link {
       @include font-size(16px, 20px);
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 20px;
       text-decoration: none;
     }
     .menu--main-group__label {
       color: var(--grayscale-white);
+      margin-left: 12px;
     }
   }
 }

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

@@ -27,6 +27,22 @@ export class HyMenuMainGroup {
   @Listen('click')
   handleComponentClick(event) {
     this.isMenuOpen = !this.isMenuOpen;
+
+    if (this.isMenuOpen) {
+      let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
+      let mainMenuToggle = event.target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
+      let mainMenuDropdown = event.target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
+      let mainMenuList = event.target.shadowRoot.querySelector('.list') as HTMLElement;
+
+      if (hyTopHeader && mainMenuDropdown && mainMenuList && mainMenuToggle) {
+        let rectHeader = hyTopHeader.getBoundingClientRect();
+        let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
+        mainMenuDropdown.style.top = `${rectHeader.height}px`;
+
+        mainMenuList.style.left = `${rectMenuToggle.left}px`;
+      }
+    }
+
     event.stopPropagation();
   }
 
@@ -62,13 +78,18 @@ export class HyMenuMainGroup {
             'is-open': this.isMenuOpen,
           }}
         >
-          {this._dataMainMenu.map((item) => {
-            return (
-              <a href={item.url} class={{'menu-main-link': true}}>
-                <span class={'menu--main-group__label'}>{item.label}</span>
-              </a>
-            );
-          })}
+          <div class="list">
+            {this._dataMainMenu.map((item) => {
+              return (
+                <a href={item.url} class={{'menu-main-link': true}}>
+                  <span class="heading-icon">
+                    <hy-icon icon={'hy-icon-caret-right'} size={10} fill={white} />
+                  </span>
+                  <span class={'menu--main-group__label'}>{item.label}</span>
+                </a>
+              );
+            })}
+          </div>
         </div>
       </Host>
     );