diff --git a/src/components.d.ts b/src/components.d.ts
index 14784e38bf8d42a62d57cf6a4564ac3038f2c5ff..ba226ddfca5158ab761e8fdf963478063a049924 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -629,6 +629,11 @@ export namespace Components {
interface HyMenuMainGroup {
dataMainMenu: MainMenu[] | string;
isMobile: boolean;
+ logoLabelGroup?: string;
+ logoSizeGroup?: any;
+ logoUrlGroup?: string;
+ siteLabel?: string;
+ siteUrl?: string;
}
interface HyMenuMobileBreadcrumb {
bid: string;
@@ -2009,6 +2014,11 @@ declare namespace LocalJSX {
interface HyMenuMainGroup {
dataMainMenu?: MainMenu[] | string;
isMobile?: boolean;
+ logoLabelGroup?: string;
+ logoSizeGroup?: any;
+ logoUrlGroup?: string;
+ siteLabel?: string;
+ siteUrl?: string;
}
interface HyMenuMobileBreadcrumb {
bid?: string;
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
index ffc87fc37a8b19c215141806155c9cfc8a8e7622..2624eceae572d62e3d1a62726a1e39e8f9933e6a 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
@@ -96,6 +96,7 @@
display: flex;
flex-flow: row;
margin-left: 28px;
+ position: relative;
@include breakpoint($narrow) {
margin-left: 32px;
@@ -110,3 +111,48 @@
background: transparent;
padding: 15px 28px 15px 15px;
}
+
+.menu--main-group__dropdown__top {
+}
+
+.menu--main-group__dropdown__items {
+}
+
+.menu--main-group__dropdown__donate {
+}
+
+.menu--main-group__dropdown--mobile {
+ place-items: stretch;
+ //inset: 0px;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ flex-direction: column;
+ justify-items: space-between;
+ background-color: var(--grayscale-black);
+ bottom: 0px;
+ overflow: hidden;
+ padding: 0px;
+ position: fixed;
+ right: 0px;
+ top: 0px;
+ transform: translateX(100%);
+ transition: all 0.3s ease 0s;
+ visibility: hidden;
+ width: 0px;
+
+ &.is-open {
+ padding: 20px;
+ transform: translateX(0px);
+ visibility: visible;
+ width: 90%;
+ z-index: 100;
+ padding-top: 50px;
+ transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
+
+ &::after {
+ opacity: 1;
+ visibility: visible;
+ }
+ }
+}
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
index 9cb9f162faf0676d2d6a3d7943f5fd7514456838..22f8a35848d788f66ea72d0a71dc894188377d5b 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
@@ -5,6 +5,8 @@ export interface MainMenu {
}
import {Component, Host, h, Element, Prop, State, Watch, Listen} from '@stencil/core';
+import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
+import {DonateLink} from '../../site-header/site-header';
@Component({
tag: 'hy-menu-main-group',
@@ -15,7 +17,13 @@ export class HyMenuMainGroup {
@Element() el: HTMLElement;
@Prop() dataMainMenu: MainMenu[] | string;
@Prop() isMobile: boolean = false;
+ @Prop() logoUrlGroup?: string;
+ @Prop() logoSizeGroup?: any;
+ @Prop() logoLabelGroup?: string;
+ @Prop() siteLabel?: string;
+ @Prop() siteUrl?: string;
@State() isMenuOpen: boolean = false;
+ private donateLink: DonateLink[];
private _dataMainMenu: MainMenu[];
@@ -56,6 +64,8 @@ export class HyMenuMainGroup {
render() {
const white = 'var(--grayscale-white)';
+ const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
+ const logoColorGroup = ColorVariant.white;
return this.isMobile ? (
<Host
@@ -74,12 +84,25 @@ export class HyMenuMainGroup {
</button>
<nav
role="navigation"
+ aria-hidden={this.isMenuOpen ? 'false' : 'true'}
class={{
'menu--main-group__dropdown--mobile': true,
'is-open': this.isMenuOpen,
}}
>
- <div class="list">
+ <div class="menu--main-group__dropdown__top">
+ <hy-site-logo
+ is-group={true}
+ size={logoSizeGroup}
+ color={logoColorGroup}
+ url={this.siteUrl}
+ label={this.siteLabel}
+ />
+ <button class="menu--main-group__dropdown__close" onClick={() => this.isMenuOpen == false}>
+ CLOSE ME
+ </button>
+ </div>
+ <div class="menu--main-group__dropdown__items">
{this._dataMainMenu.map((item) => {
return (
<a href={item.url} class={{'menu-main-link': true}}>
@@ -91,6 +114,16 @@ export class HyMenuMainGroup {
);
})}
</div>
+ <div class="menu--main-group__dropdown__donate">
+ {this.donateLink.map((i) => {
+ return (
+ <a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
+ <hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
+ <span class={'hy-link__donate__label group'}>{i.label}</span>
+ </a>
+ );
+ })}
+ </div>
</nav>
</Host>
) : (
diff --git a/src/components/navigation/hy-menu-main-group/readme.md b/src/components/navigation/hy-menu-main-group/readme.md
index 5211b414a22d921a9af76c96036a1f5c2c0d983e..6a5e71e743246734fa8f47a6b67ff8af2eff1d6b 100644
--- a/src/components/navigation/hy-menu-main-group/readme.md
+++ b/src/components/navigation/hy-menu-main-group/readme.md
@@ -4,10 +4,15 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------------- | ---------------- | ----------- | ---------------------- | ----------- |
-| `dataMainMenu` | `data-main-menu` | | `MainMenu[] \| string` | `undefined` |
-| `isMobile` | `is-mobile` | | `boolean` | `false` |
+| Property | Attribute | Description | Type | Default |
+| ---------------- | ------------------ | ----------- | ---------------------- | ----------- |
+| `dataMainMenu` | `data-main-menu` | | `MainMenu[] \| string` | `undefined` |
+| `isMobile` | `is-mobile` | | `boolean` | `false` |
+| `logoLabelGroup` | `logo-label-group` | | `string` | `undefined` |
+| `logoSizeGroup` | `logo-size-group` | | `any` | `undefined` |
+| `logoUrlGroup` | `logo-url-group` | | `string` | `undefined` |
+| `siteLabel` | `site-label` | | `string` | `undefined` |
+| `siteUrl` | `site-url` | | `string` | `undefined` |
## Dependencies
@@ -18,12 +23,15 @@
### Depends on
- [hy-icon](../../icon)
+- [hy-site-logo](../../site-header/site-logo)
### Graph
```mermaid
graph TD;
hy-menu-main-group --> hy-icon
+ hy-menu-main-group --> hy-site-logo
+ hy-site-logo --> hy-icon
hy-site-header --> hy-menu-main-group
style hy-menu-main-group fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index 1c9f53a471934d442ed10027825831494069959d..daa64e38ae26973724f4d61e077a634b6ca4c0f6 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -54,6 +54,7 @@ graph TD;
hy-site-header --> hy-desktop-menu-links
hy-site-logo --> hy-icon
hy-menu-main-group --> hy-icon
+ hy-menu-main-group --> hy-site-logo
hy-menu-language --> hy-menu-language-item
hy-menu-language --> hy-icon
hy-site-search --> hy-icon
diff --git a/src/components/site-header/site-logo/readme.md b/src/components/site-header/site-logo/readme.md
index 359a14c063cb7e4bd3adb0e3731b71c46b79b97a..5b2a3221c1313901f62b6ee418ac9a32cf366c9d 100644
--- a/src/components/site-header/site-logo/readme.md
+++ b/src/components/site-header/site-logo/readme.md
@@ -19,6 +19,7 @@
- [hy-footer-base](../../footer/hy-footer-base)
- [hy-menu](../../navigation/menu)
+- [hy-menu-main-group](../../navigation/hy-menu-main-group)
- [hy-menu-sidebar](../../navigation/menu-sidebar)
- [hy-site-header](..)
- [hy-user-login-form](../../hy-user-login-form)
@@ -34,6 +35,7 @@ graph TD;
hy-site-logo --> hy-icon
hy-footer-base --> hy-site-logo
hy-menu --> hy-site-logo
+ hy-menu-main-group --> hy-site-logo
hy-menu-sidebar --> hy-site-logo
hy-site-header --> hy-site-logo
hy-user-login-form --> hy-site-logo