diff --git a/src/components/hy-menu-main-group/hy-menu-main-group.scss b/src/components/hy-menu-main-group/hy-menu-main-group.scss index 5d4e87f30f6362b8597dbe54a44aadaffa915763..90bad91b1d61c5ff00b44196d8596976fbfc8f8a 100644 --- a/src/components/hy-menu-main-group/hy-menu-main-group.scss +++ b/src/components/hy-menu-main-group/hy-menu-main-group.scss @@ -1,3 +1,60 @@ :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); + } + } +} diff --git a/src/components/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/hy-menu-main-group/hy-menu-main-group.tsx index a33699018c3cf48dbe4461148bd84f08b9b77c7f..0915840f268b6f43bb9c7754ea1fa6c9874bdfe3 100644 --- a/src/components/hy-menu-main-group/hy-menu-main-group.tsx +++ b/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> diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss index f2299aac882b88706bb38ac44aa939ab73c9b2ab..fc6c275cbe5a590234150f1de0ca9ae9dd209251 100644 --- a/src/components/site-header/site-header.scss +++ b/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 { diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx index a4c5541137060aa202f7cdb61ed710f116093940..688e7941bc1106c956aac88a889a2debbc5c6b32 100644 --- a/src/components/site-header/site-header.tsx +++ b/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'}