From 2ea4dc7e78f1db42d8c37e00e5931dad654d342e Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Thu, 4 Mar 2021 16:21:48 +0200
Subject: [PATCH] Initial mobile things
---
src/components.d.ts | 2 +-
src/components/icon/readme.md | 2 +-
.../hy-menu-main-group.scss | 20 +++++++
.../hy-menu-main-group/hy-menu-main-group.tsx | 56 ++++++++++++++++---
.../hy-menu-main-group/readme.md | 4 +-
src/components/site-header/readme.md | 2 +-
src/components/site-header/site-header.scss | 6 ++
src/components/site-header/site-header.tsx | 5 +-
8 files changed, 80 insertions(+), 17 deletions(-)
rename src/components/{ => navigation}/hy-menu-main-group/hy-menu-main-group.scss (83%)
rename src/components/{ => navigation}/hy-menu-main-group/hy-menu-main-group.tsx (55%)
rename src/components/{ => navigation}/hy-menu-main-group/readme.md (91%)
diff --git a/src/components.d.ts b/src/components.d.ts
index af51b3b7..14784e38 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 e5c795da..325bab04 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 0704a154..ffc87fc3 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 0147243d..9cb9f162 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 b3a61124..5211b414 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 e17f9cc8..1c9f53a4 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 26a7e6e4..b19990f7 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 e4e26ab7..a4bf9ff3 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>
)}
--
GitLab