diff --git a/src/components.d.ts b/src/components.d.ts
index af51b3b7953322013895b50d839b795a138029cb..14784e38bf8d42a62d57cf6a4564ac3038f2c5ff 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -53,7 +53,7 @@ import {CtaLinkValue} from './components/hy-link-list/hy-link-list';
import {AdditionalInfo, RelatedLink} from './components/hy-list-item/hy-list-item';
import {MenuLanguage} from './components/navigation/menu-language/menu-language';
import {ComponentLabels} from './components/site-header/site-header';
-import {MainMenu} from './components/hy-menu-main-group/hy-menu-main-group';
+import {MainMenu} from './components/navigation/hy-menu-main-group/hy-menu-main-group';
import {ProcessFlowBoxValue} from './components/process/process';
import {ShortcutLinkValue} from './components/hy-shortcuts/hy-shortcuts';
import {DesktopLinks as DesktopLinks1} from './components/site-header/site-header';
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index e5c795da76b0c7609c50d595681daa02a48ed08d..325bab04a2a84bce132d3678ae777477376db770 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -38,7 +38,7 @@
- [hy-menu-item-sidebar](../navigation/menu-item-sidebar)
- [hy-menu-language](../navigation/menu-language)
- [hy-menu-level-container](../navigation/menu-level-container)
-- [hy-menu-main-group](../hy-menu-main-group)
+- [hy-menu-main-group](../navigation/hy-menu-main-group)
- [hy-menu-mobile-breadcrumb](../navigation/menu-mobile-breadcrumb)
- [hy-menu-sidebar](../navigation/menu-sidebar)
- [hy-pager-item](../pagination/hy-pager-item)
diff --git a/src/components/hy-menu-main-group/hy-menu-main-group.scss b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
similarity index 83%
rename from src/components/hy-menu-main-group/hy-menu-main-group.scss
rename to src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
index 0704a154bfcf7dcc1dd550d4c01069f59ea8a8e3..ffc87fc37a8b19c215141806155c9cfc8a8e7622 100644
--- a/src/components/hy-menu-main-group/hy-menu-main-group.scss
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
@@ -90,3 +90,23 @@
}
}
}
+
+:host(.menu--main-group--mobile) {
+ align-items: center;
+ display: flex;
+ flex-flow: row;
+ margin-left: 28px;
+
+ @include breakpoint($narrow) {
+ margin-left: 32px;
+ }
+ @include breakpoint($wide) {
+ margin-left: 40px;
+ }
+}
+
+.menu--main-group__mobile-toggle {
+ border: none;
+ background: transparent;
+ padding: 15px 28px 15px 15px;
+}
diff --git a/src/components/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
similarity index 55%
rename from src/components/hy-menu-main-group/hy-menu-main-group.tsx
rename to src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
index 0147243d0389d15228e7c017900489d72fb5e7e5..9cb9f162faf0676d2d6a3d7943f5fd7514456838 100644
--- a/src/components/hy-menu-main-group/hy-menu-main-group.tsx
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
@@ -30,16 +30,20 @@ export class HyMenuMainGroup {
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`;
+ if (hyTopHeader && hyTopHeader.hasAttribute('is-mobile')) {
+ console.log('do mobile stuff');
+ } else {
+ 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 (mainMenuDropdown && mainMenuList && mainMenuToggle) {
+ let rectHeader = hyTopHeader.getBoundingClientRect();
+ let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
+ mainMenuDropdown.style.top = `${rectHeader.height}px`;
- mainMenuList.style.left = `${rectMenuToggle.left}px`;
+ mainMenuList.style.left = `${rectMenuToggle.left}px`;
+ }
}
}
@@ -54,7 +58,41 @@ export class HyMenuMainGroup {
const white = 'var(--grayscale-white)';
return this.isMobile ? (
- <div>Mobile Main Menu in Groups</div>
+ <Host
+ class={{
+ 'menu--main-group--mobile': true,
+ 'menu--main-group--mobile__is-open': this.isMenuOpen,
+ }}
+ >
+ <button
+ class={{
+ 'menu--main-group__mobile-toggle': true,
+ 'is-open': this.isMenuOpen,
+ }}
+ >
+ <hy-icon icon={'hy-icon-slim-hamburger-menu'} size={20} fill={white} />
+ </button>
+ <nav
+ role="navigation"
+ class={{
+ 'menu--main-group__dropdown--mobile': true,
+ 'is-open': this.isMenuOpen,
+ }}
+ >
+ <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>
+ </nav>
+ </Host>
) : (
<Host
class={{
diff --git a/src/components/hy-menu-main-group/readme.md b/src/components/navigation/hy-menu-main-group/readme.md
similarity index 91%
rename from src/components/hy-menu-main-group/readme.md
rename to src/components/navigation/hy-menu-main-group/readme.md
index b3a61124010d6e9006184a79bb0e49f6ff92aa91..5211b414a22d921a9af76c96036a1f5c2c0d983e 100644
--- a/src/components/hy-menu-main-group/readme.md
+++ b/src/components/navigation/hy-menu-main-group/readme.md
@@ -13,11 +13,11 @@
### Used by
-- [hy-site-header](../site-header)
+- [hy-site-header](../../site-header)
### Depends on
-- [hy-icon](../icon)
+- [hy-icon](../../icon)
### Graph
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index e17f9cc8c9bad9265efe4a9ce365a28c772a1e5e..1c9f53a471934d442ed10027825831494069959d 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -36,7 +36,7 @@
### Depends on
- [hy-site-logo](site-logo)
-- [hy-menu-main-group](../hy-menu-main-group)
+- [hy-menu-main-group](../navigation/hy-menu-main-group)
- [hy-menu-language](../navigation/menu-language)
- [hy-site-search](site-search)
- [hy-icon](../icon)
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 26a7e6e48f1d9a16fdd6deb1fd1366d21f36ad92..b19990f751fa2d7cc2af63bd934e6b1f7bc1e2a6 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -92,6 +92,12 @@
bottom: 0;
left: 0;
}
+
+ .menu--secondary--group {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
}
.hy-site-header__logo-container {
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index e4e26ab76258b0b7c380b349fd7d00124e6d40c1..a4bf9ff3473b58043d02cb78508f9c1475aaf776 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -444,13 +444,11 @@ export class SiteHeader {
<header class={classAttributes.join(' ')}>
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
{this.isGroup && (
- <div class="hy-site-header__content-top">
+ <div class="hy-site-header__content-top" is-mobile={true}>
<div class={'hy-site-header__logo-container group '}>
<hy-site-logo size={logoSizeGroup} color={logoColorGroup} url={this.siteUrl} label={this.siteLabel} />
</div>
- <hy-menu-main-group is-mobile={true} data-main-menu={this.dataMainMenuLinks} />
-
<div class={'menu--secondary menu--secondary--group'}>
<hy-site-search
class={'menu--secondary__item group'}
@@ -462,6 +460,7 @@ export class SiteHeader {
search-labels={this.dataSiteSearchLabels}
search-tools={this.dataSearchTools}
/>
+ <hy-menu-main-group is-mobile={true} data-main-menu={this.dataMainMenuLinks} />
</div>
</div>
)}